Permalink
Browse files

Add missing recipes

  • Loading branch information...
1 parent 76aa0e8 commit 6fbc7c25b2db434a776e82ea2f3de51ea0672c10 @kennym kennym committed May 14, 2012
Showing with 3,480 additions and 0 deletions.
  1. +15 −0 vendor/assets/stylesheets/recipes/_background.scss
  2. +200 −0 vendor/assets/stylesheets/recipes/_color.scss
  3. +6 −0 vendor/assets/stylesheets/recipes/_effect.scss
  4. +2 −0 vendor/assets/stylesheets/recipes/_form.scss
  5. +15 −0 vendor/assets/stylesheets/recipes/_google-webfont.scss
  6. +34 −0 vendor/assets/stylesheets/recipes/_icons.scss
  7. +1 −0 vendor/assets/stylesheets/recipes/_layout.scss
  8. +102 −0 vendor/assets/stylesheets/recipes/_media-queries.scss
  9. +2 −0 vendor/assets/stylesheets/recipes/_shadow.scss
  10. +11 −0 vendor/assets/stylesheets/recipes/_shape.scss
  11. +5 −0 vendor/assets/stylesheets/recipes/_shared.scss
  12. +8 −0 vendor/assets/stylesheets/recipes/_ui.scss
  13. +209 −0 vendor/assets/stylesheets/recipes/_webfont-icon.scss
  14. +21 −0 vendor/assets/stylesheets/recipes/animation/_keyframes.scss
  15. +52 −0 vendor/assets/stylesheets/recipes/background/_blueprint-grid.scss
  16. +33 −0 vendor/assets/stylesheets/recipes/background/_carbon-fiber.scss
  17. +61 −0 vendor/assets/stylesheets/recipes/background/_checkerboard.scss
  18. +42 −0 vendor/assets/stylesheets/recipes/background/_cicada.scss
  19. +94 −0 vendor/assets/stylesheets/recipes/background/_gradients.scss
  20. +51 −0 vendor/assets/stylesheets/recipes/background/_houndstooth.scss
  21. +30 −0 vendor/assets/stylesheets/recipes/background/_lined-paper.scss
  22. +84 −0 vendor/assets/stylesheets/recipes/background/_madras.scss
  23. +47 −0 vendor/assets/stylesheets/recipes/background/_noise.scss
  24. +28 −0 vendor/assets/stylesheets/recipes/background/_polka-dot.scss
  25. +15 −0 vendor/assets/stylesheets/recipes/background/_radial-overlay.scss
  26. +24 −0 vendor/assets/stylesheets/recipes/background/_striped.scss
  27. +46 −0 vendor/assets/stylesheets/recipes/background/_stripes.scss
  28. +30 −0 vendor/assets/stylesheets/recipes/background/_tablecloth.scss
  29. +81 −0 vendor/assets/stylesheets/recipes/background/_tartan.scss
  30. +37 −0 vendor/assets/stylesheets/recipes/effect/_bevel.scss
  31. +26 −0 vendor/assets/stylesheets/recipes/effect/_corner-folded.scss
  32. +19 −0 vendor/assets/stylesheets/recipes/effect/_cutout.scss
  33. +65 −0 vendor/assets/stylesheets/recipes/effect/_folded-corner.scss
  34. +39 −0 vendor/assets/stylesheets/recipes/effect/_glass.scss
  35. +43 −0 vendor/assets/stylesheets/recipes/effect/_tape.scss
  36. +1 −0 vendor/assets/stylesheets/recipes/form/_element.scss
  37. +1 −0 vendor/assets/stylesheets/recipes/form/_skin.scss
  38. +24 −0 vendor/assets/stylesheets/recipes/form/element/_inline.scss
  39. +143 −0 vendor/assets/stylesheets/recipes/form/skin/_natural.scss
  40. +68 −0 vendor/assets/stylesheets/recipes/layout/_flexible-box-model.scss
  41. +207 −0 vendor/assets/stylesheets/recipes/layout/_grid.scss
  42. +67 −0 vendor/assets/stylesheets/recipes/layout/_vertical-align.scss
  43. +15 −0 vendor/assets/stylesheets/recipes/shadow/_drop.scss
  44. +28 −0 vendor/assets/stylesheets/recipes/shadow/_top-edge.scss
  45. +37 −0 vendor/assets/stylesheets/recipes/shadow/drop/_curled-corners.scss
  46. +74 −0 vendor/assets/stylesheets/recipes/shadow/drop/_curved.scss
  47. +34 −0 vendor/assets/stylesheets/recipes/shadow/drop/_flying.scss
  48. +38 −0 vendor/assets/stylesheets/recipes/shadow/drop/_lifted-corners.scss
  49. +26 −0 vendor/assets/stylesheets/recipes/shadow/drop/_perspective.scss
  50. +13 −0 vendor/assets/stylesheets/recipes/shadow/drop/_raised.scss
  51. +24 −0 vendor/assets/stylesheets/recipes/shadow/drop/_transform-requirement.scss
  52. +24 −0 vendor/assets/stylesheets/recipes/shape/_ellipse.scss
  53. +15 −0 vendor/assets/stylesheets/recipes/shape/_polygon.scss
  54. +11 −0 vendor/assets/stylesheets/recipes/shape/_symbol.scss
  55. +38 −0 vendor/assets/stylesheets/recipes/shape/polygon/_hexagon.scss
  56. +41 −0 vendor/assets/stylesheets/recipes/shape/polygon/_octagon.scss
  57. +15 −0 vendor/assets/stylesheets/recipes/shape/polygon/_parallelogram.scss
  58. +26 −0 vendor/assets/stylesheets/recipes/shape/polygon/_pentagon.scss
  59. +11 −0 vendor/assets/stylesheets/recipes/shape/polygon/_rectangle.scss
  60. +10 −0 vendor/assets/stylesheets/recipes/shape/polygon/_rhombus.scss
  61. +11 −0 vendor/assets/stylesheets/recipes/shape/polygon/_square.scss
  62. +144 −0 vendor/assets/stylesheets/recipes/shape/polygon/_star.scss
  63. +13 −0 vendor/assets/stylesheets/recipes/shape/polygon/_trapezoid.scss
  64. +73 −0 vendor/assets/stylesheets/recipes/shape/polygon/_triangle.scss
  65. +33 −0 vendor/assets/stylesheets/recipes/shape/symbol/_diamond.scss
  66. +13 −0 vendor/assets/stylesheets/recipes/shape/symbol/_egg.scss
  67. +38 −0 vendor/assets/stylesheets/recipes/shape/symbol/_heart.scss
  68. +48 −0 vendor/assets/stylesheets/recipes/shape/symbol/_infinity.scss
  69. +18 −0 vendor/assets/stylesheets/recipes/shape/symbol/_pacman.scss
  70. +49 −0 vendor/assets/stylesheets/recipes/shape/symbol/_yin-yang.scss
  71. +6 −0 vendor/assets/stylesheets/recipes/shared/_block-inline-block.scss
  72. +31 −0 vendor/assets/stylesheets/recipes/shared/_clearfix.scss
  73. +12 −0 vendor/assets/stylesheets/recipes/shared/_list-inline-block.scss
  74. +27 −0 vendor/assets/stylesheets/recipes/shared/_pseudo-element.scss
  75. +6 −0 vendor/assets/stylesheets/recipes/shared/_user-select.scss
  76. +30 −0 vendor/assets/stylesheets/recipes/ui/_convex.scss
  77. +25 −0 vendor/assets/stylesheets/recipes/ui/_glossy.scss
  78. +30 −0 vendor/assets/stylesheets/recipes/ui/_gradient.scss
  79. +1 −0 vendor/assets/stylesheets/recipes/ui/_helper.scss
  80. +106 −0 vendor/assets/stylesheets/recipes/ui/_keyboard.scss
  81. +1 −0 vendor/assets/stylesheets/recipes/ui/_menu.scss
  82. +22 −0 vendor/assets/stylesheets/recipes/ui/_overlay.scss
  83. +37 −0 vendor/assets/stylesheets/recipes/ui/_separator.scss
  84. +9 −0 vendor/assets/stylesheets/recipes/ui/border/_bevel.scss
  85. +76 −0 vendor/assets/stylesheets/recipes/ui/helper/_arrow.scss
  86. +52 −0 vendor/assets/stylesheets/recipes/ui/menu/_dropdown.scss
@@ -0,0 +1,15 @@
+@import "recipes/background/noise";
+@import "recipes/background/gradients";
+@import "recipes/background/blueprint-grid";
+@import "recipes/background/radial-overlay";
+@import "recipes/background/striped";
+@import "recipes/background/tartan";
+@import "recipes/background/carbon-fiber";
+@import "recipes/background/stripes";
+@import "recipes/background/cicada";
+@import "recipes/background/tablecloth";
+@import "recipes/background/lined-paper";
+@import "recipes/background/madras";
+@import "recipes/background/checkerboard";
+@import "recipes/background/houndstooth";
+@import "recipes/background/polka-dot";
@@ -0,0 +1,200 @@
+/**
+ *
+ * @class Color
+ * @author David Kaneda - http://www.davidkaneda.com
+ *
+ */
+
+/**
+ * Returns the brightness (out of 100) of a specified color.
+ * @todo explain why this is useful
+ * @param {color} $color The color you want the brightness value of
+ * @return {measurement}
+ */
+@function brightness($color) {
+ $r: red($color) / 255 * 100;
+ $g: green($color) / 255 * 100;
+ $b: blue($color) / 255 * 100;
+
+ $brightness: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+ @return $brightness;
+}
+
+// @private
+@function color-difference($c1, $c2) {
+ @return (max(red($c1), red($c2)) - min(red($c1), red($c2))) + (max(green($c1), green($c2)) - min(green($c1), green($c2))) + (max(blue($c1), blue($c2)) - min(blue($c1), blue($c2)));
+}
+
+// @private
+@function color-luminance($value) {
+ @if $value <= 0.03928 {
+ @return $value / 12.92;
+ } @else {
+ @return ($value + 0.055)/1.055 * ($value + 0.055)/1.055;
+ }
+}
+
+/**
+ * Returns the luminosity for a specified color
+ * @param {color} The color to check
+ * @return {measurement}
+ */
+@function luminosity($color) {
+ $r: color-luminance(red($color) / 255);
+ $g: color-luminance(green($color) / 255);
+ $b: color-luminance(blue($color) / 255);
+ $l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
+ @debug 'luminosity for ' + $color + ' is ' + $l;
+ @return $l;
+}
+
+/**
+ * Returns the contrast ratio between two colors
+ * @param {color1} The color to check
+ * @return {measurement}
+ */
+@function contrast-ratio($color1, $color2) {
+ $l1: luminosity($color1);
+ $l2: luminosity($color2);
+
+ @if $l2 > $l1 {
+ @return $l2 / $l1;
+ } @else {
+ @return $l1 / $l2;
+ }
+}
+
+@function get-color-mode($color) {
+ @if brightness($color) > 55 {
+ @return light;
+ } @else {
+ @return dark;
+ }
+}
+
+@function color-offset($color, $contrast: 85%, $mode: $color-mode, $inverse: false) {
+ $flat_color: check-opacity($color);
+
+ @if $mode == inverse {
+ $mode: reverse-color-mode($color-mode);
+ }
+
+ @if $inverse == true {
+ $mode: reverse-color-mode($mode);
+ }
+
+ @if ($mode == light) {
+ @return rgba(lighten($flat_color, $contrast), opacity($color));
+ } @else if ($mode == dark) {
+ @return rgba(darken($flat_color, $contrast), opacity($color));
+ } @else {
+ @debug $mode " is not a valid color mode. Use light, dark, or inverse.";
+ @return white;
+ }
+}
+
+@function reverse-color-mode($mode) {
+ @if $mode == dark {
+ @return light;
+ } @else {
+ @return dark;
+ }
+}
+
+@function check-opacity($color) {
+ @if (opacity($color) == 0) {
+ $color: opacify($color, 1);
+ }
+ @if $color == transparent {
+ $color: opacify($color, 1);
+ }
+ @return $color;
+}
+
+@function color-by-background($bg-color, $contrast: $default-text-contrast) {
+ $bg-color: check-opacity($bg-color);
+ $tmpmode: get-color-mode($bg-color);
+
+ @return color-offset($bg-color, $contrast, $tmpmode, $inverse: true);
+}
+
+@function get-inset-offset($mode){
+ @if $mode == light {
+ @return 1px;
+ } @else {
+ @return -1px;
+ }
+}
+
+@function safe-saturate($color, $amount) {
+ @if saturation($color) > 0 {
+ @return saturate($color, $amount);
+ } @else {
+ @return $color;
+ }
+}
+
+/**
+ * Colors the text of an element based on lightness of its background.
+ *
+ * .my-element {
+ * @include color-by-background(#fff); // Colors text black.
+ * }
+ *
+ * .my-element {
+ * @include color-by-background(#fff, 40%); // Colors text gray.
+ * }
+ *
+ * @param {color} $bg-color Background color of element.
+ * @param {percent} $contrast Contrast of text color to its background.
+ *
+ */
+@mixin color-by-background($bg-color, $contrast: $default-text-contrast, $default-color: false, $inset-text: false) {
+ @if $default-color {
+ color: color-by-background(hsla(hue($default-color), saturation($default-color), lightness($bg-color), opacity($bg-color)), $contrast);
+ } @else {
+ color: color-by-background($bg-color, $contrast);
+ }
+
+ @if $inset-text {
+ @include inset-by-background($bg-color);
+ }
+}
+
+@mixin inset-by-background($bg-color, $contrast: 10%, $box: false){
+ $bg-color: check-opacity($bg-color);
+ $offset: get-inset-offset(get-color-mode($bg-color));
+
+ @if ($box == true) {
+ @include box-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
+ }
+
+ @include text-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
+}
+
+@function hsv-to-rgb($color) {
+ $r: red($color) / 255;
+ $g: green($color) / 255;
+ $b: blue($color) / 255;
+ $a: opacity($color);
+}
+
+// @debug hsv(rgba(#3E87E3, .5));
+
+@function brighten($color, $amount) {
+ $current_brightness: brightness($color);
+}
+
+$base-color: blue !default;
+$neutral-color: #ccc !default;
+$highlight-color: darken(safe-saturate($base-color, 15), 5) !default;
+
+$base-gradient: matte !default;
+$default-text-contrast: 85% !default;
+$color-mode: get-color-mode($neutral-color) !default;
+
+// @debug color-difference(#95419F, #0FFF90);
+// @debug brightness(#cbea0d) - brightness(#ea850d);
+// @debug contrast-ratio(#95419F, #0FFF90);
+// @debug brightness(#E0F200);
@@ -0,0 +1,6 @@
+@import "effect/glass";
+@import "effect/cutout";
+@import "effect/bevel";
+@import "effect/tape";
+@import "effect/corner-folded";
+@import "effect/folded-corner";
@@ -0,0 +1,2 @@
+@import "recipes/form/element";
+@import "recipes/form/skin";
@@ -0,0 +1,15 @@
+$google-font-name: false !default;
+$google-font-weights: false !default;
+
+@if $google-font-name and $google-font-weights {
+ @include google-webfont($google-font-name, $google-font-weights);
+}
+
+@mixin google-webfont(
+ $font-name,
+ $font-weights: 500
+) {
+ // @debug join($font-name,'', '|');
+
+ @import url("//fonts.googleapis.com/css?family=#{$font-name}:#{$font-weights}");
+}
@@ -0,0 +1,34 @@
+@mixin icon($background-position: 0 50%, $display: inline-block)
+{
+ background-repeat: no-repeat;
+ background-position: $background-position;
+ display: $display;
+ vertical-align: middle;
+}
+
+@mixin icon-inline(
+ $side: left,
+ $width: 24px,
+ $height: auto,
+ $background-position: 2px 50%,
+ $display: inline-block
+) {
+ @if $height == auto
+ {
+ $height: $width;
+ }
+
+ @include icon($background-position, $display);
+ padding-#{$side}: $width;
+ line-height: $height;
+}
+
+@mixin icon-left($width: 24px, $height: auto, $background-position: 2px 50%, $display: inline-block)
+{
+ @include icon-inline(left, $width, $height, $background-position, $display);
+}
+
+@mixin icon-right($width: 24px, $height: auto, $background-position: 100% 50%, $display: inline-block)
+{
+ @include icon-inline(right, $width, $height, $background-position, $display);
+}
@@ -0,0 +1 @@
+@import "recipes/layout/vertical-align";
@@ -0,0 +1,102 @@
+/**
+ * Media Queries Mixins
+ *
+ * @todo Do we have to take care of print ?
+ *
+ * @require sass-3.2 (you need eventually to do "sudo gem install sass --pre")
+ * @author Maxime Thirouin <maxime.thirouin@gmail.com>
+ */
+
+// differentes screen width definition: 3 limits allow 4 configurations
+/*
+$media-query-width-big: 1280px;
+$media-query-width-medium: 960px;
+$media-query-width-small: 480px;
+*/
+// recent desktop & big screen
+@mixin media-big
+{
+ //@media (min-width: $media-query-width-big)
+ @media (min-width: 1280px)
+ {
+ @content;
+ }
+}
+
+// average desktop
+@mixin media-medium
+{
+ //@media (max-width: $media-query-width-big - 1px)
+ @media (max-width: 1279px)
+ {
+ @content;
+ }
+}
+ @mixin media-medium-only
+ {
+ //@media (min-width: $media-query-width-medium) and (max-width: $media-query-width-big - 1px)
+ @media (min-width: 960px) and (max-width: 1279px)
+ {
+ @content;
+ }
+ }
+
+// old computer & tablet
+@mixin media-small
+{
+ //@media (max-width: $media-query-width-medium - 1px)
+ @media (max-width: 959px)
+ {
+ @content;
+ }
+}
+
+ @mixin media-small-only
+ {
+ //@media (min-width: $media-query-width-small) and (max-width: $media-query-width-medium - 1px)
+ @media (min-width: 480px) and (max-width: 959px)
+ {
+ @content;
+ }
+ }
+
+
+// mobile
+@mixin media-tiny
+{
+ //@media (max-width: $media-query-width-small - 1px)
+ @media (max-width: 479px)
+ {
+ @content;
+ }
+}
+
+// orientation
+@mixin media-portrait
+{
+ @media (orientation:portrait)
+ {
+ @content;
+ }
+}
+
+@mixin media-landscape
+{
+ @media (orientation:landscape)
+ {
+ @content;
+ }
+}
+
+// media for high resolution screen
+@mixin media-highres
+{
+
+ @media
+ (-webkit-min-device-pixel-ratio: 2),
+ (-o-min-device-pixel-ratio: 3/2),
+ (min-device-pixel-ratio: 2)
+ {
+ @content;
+ }
+}
@@ -0,0 +1,2 @@
+@import "recipes/shadow/drop";
+@import "recipes/shadow/top-edge";
Oops, something went wrong.

0 comments on commit 6fbc7c2

Please sign in to comment.