Permalink
Browse files

Update Bourbon.

  • Loading branch information...
1 parent 7361810 commit fbaec37958e69be756838facf7124cb63712564e @ubuwaits committed Sep 18, 2012
Showing with 392 additions and 277 deletions.
  1. +0 −32 stylesheets/buttons.css
  2. +5 −0 stylesheets/scss/bourbon/_bourbon.scss
  3. +19 −13 stylesheets/scss/bourbon/addons/_button.scss
  4. +12 −0 stylesheets/scss/bourbon/addons/_font-face.scss
  5. +15 −0 stylesheets/scss/bourbon/addons/_hide-text.scss
  6. +16 −4 stylesheets/scss/bourbon/addons/_position.scss
  7. +9 −55 stylesheets/scss/bourbon/css3/_animation.scss
  8. +1 −5 stylesheets/scss/bourbon/css3/_appearance.scss
  9. +1 −5 stylesheets/scss/bourbon/css3/_background-size.scss
  10. +107 −0 stylesheets/scss/bourbon/css3/_background.scss
  11. +10 −19 stylesheets/scss/bourbon/css3/_border-radius.scss
  12. +1 −3 stylesheets/scss/bourbon/css3/_box-shadow.scss
  13. +1 −3 stylesheets/scss/bourbon/css3/_box-sizing.scss
  14. +10 −30 stylesheets/scss/bourbon/css3/_columns.scss
  15. +11 −26 stylesheets/scss/bourbon/css3/_flex-box.scss
  16. +0 −2 stylesheets/scss/bourbon/css3/_inline-block.scss
  17. +3 −1 stylesheets/scss/bourbon/css3/_linear-gradient.scss
  18. +12 −0 stylesheets/scss/bourbon/css3/_prefixer.scss
  19. +50 −5 stylesheets/scss/bourbon/css3/_radial-gradient.scss
  20. +2 −10 stylesheets/scss/bourbon/css3/_transform.scss
  21. +18 −50 stylesheets/scss/bourbon/css3/_transition.scss
  22. +1 −4 stylesheets/scss/bourbon/css3/_user-select.scss
  23. +11 −3 stylesheets/scss/bourbon/functions/_deprecated-webkit-gradient.scss
  24. +51 −4 stylesheets/scss/bourbon/functions/_radial-gradient.scss
  25. +22 −0 stylesheets/scss/bourbon/functions/_transition-property-name.scss
  26. +1 −1 stylesheets/scss/bourbon/lib/bourbon.rb
  27. +3 −2 stylesheets/scss/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
View
@@ -8,7 +8,6 @@ button.minimal {
border: 1px solid #bbb;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
- -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
@@ -19,14 +18,12 @@ button.minimal {
button.minimal:hover {
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
- -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer; }
button.minimal:active {
background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
- -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: #000; }
@@ -65,7 +62,6 @@ button.clean-gray {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
- -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }
/* cupid green (inspired by okcupid.com)
@@ -82,7 +78,6 @@ button.cupid-green {
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
- -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
box-shadow: inset 0 1px 0 0 #96ca6d;
color: #fff;
font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
@@ -99,14 +94,12 @@ button.cupid-green {
background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
background-image: linear-gradient(top, #76b347, #5e9e2e);
-webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
- -moz-box-shadow: inset 0 1px 0 0 #8dbf67;
box-shadow: inset 0 1px 0 0 #8dbf67;
cursor: pointer; }
button.cupid-green:active {
border: 1px solid #5b992b;
border-bottom: 1px solid #538c27;
-webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
- -moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; }
/* cupid blue (inspired by okcupid.com)
@@ -125,7 +118,6 @@ button.cupid-blue {
border-right: 1px solid #a7b6c7;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 0 white;
- -moz-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
@@ -146,14 +138,12 @@ button.cupid-blue {
border-bottom: 1px solid #96a3b3;
border-right: 1px solid #9caaba;
-webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
- -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
box-shadow: inset 0 1px 0 0 #f2f2f2;
color: #163659;
cursor: pointer; }
button.cupid-blue:active {
border: 1px solid #8c98a7;
-webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
- -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; }
/* blue pill (inspired by iTunes)
@@ -172,7 +162,6 @@ button.blue-pill {
border-left: 1px solid #6c84ab;
border-radius: 18px;
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
- -moz-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;
color: #fff;
font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
@@ -194,13 +183,11 @@ button.blue-pill {
border-bottom: 1px solid #546685;
border-left: 1px solid #647a9e;
-webkit-box-shadow: inset 0 1px 0 0 #a5b9d9;
- -moz-box-shadow: inset 0 1px 0 0 #a5b9d9;
box-shadow: inset 0 1px 0 0 #a5b9d9;
cursor: pointer; }
button.blue-pill:active {
border: 1px solid #546685;
-webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
- -moz-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; }
/* thoughtbot (inspired by thoughtbot.com)
@@ -216,7 +203,6 @@ button.thoughtbot {
border: 1px solid #951100;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
- -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
color: #fff;
font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
@@ -242,7 +228,6 @@ button.thoughtbot {
background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
- -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); }
/* punch
@@ -255,7 +240,6 @@ button.punch {
border-left: 1px solid #1f2d4d;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
- -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
color: #fff;
font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
@@ -267,12 +251,10 @@ button.punch {
-webkit-background-clip: padding-box; }
button.punch:hover {
-webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
- -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
cursor: pointer; }
button.punch:active {
-webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
- -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
margin-top: 58px; }
@@ -327,7 +309,6 @@ button.shiny-blue {
border-left: 1px solid #1b4db3;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
- -moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
@@ -349,7 +330,6 @@ button.shiny-blue {
border-bottom: 1px solid #133780;
border-left: 1px solid #174299;
-webkit-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
- -moz-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; }
/* download itunes
@@ -370,7 +350,6 @@ button.download-itunes {
border-left: 1px solid #2e69a3;
border-radius: 16px;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
- -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
color: #fff;
font: normal 11px/1 "lucida grande", sans-serif;
@@ -392,7 +371,6 @@ button.download-itunes {
border-bottom: 1px solid #07428f;
border-left: 1px solid #165899;
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
- -moz-box-shadow: inset 0 1px 0 0 #62b1e9;
box-shadow: inset 0 1px 0 0 #62b1e9;
cursor: pointer;
text-shadow: 0 -1px 1px #1d62ab;
@@ -402,7 +380,6 @@ button.download-itunes {
border: 1px solid #154c8c;
border-bottom: 1px solid #0e408e;
-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
- -moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
text-shadow: 0 -1px 1px #2361a4;
-webkit-background-clip: padding-box; }
@@ -422,7 +399,6 @@ button[disabled].download-itunes:active {
border-bottom: 1px solid #d9d9d9;
border-left: 1px solid #cecece;
-webkit-box-shadow: none;
- -moz-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
cursor: not-allowed;
@@ -446,7 +422,6 @@ button.skip {
border-bottom: 1px solid #0e1d45;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #b1b9cb;
- -moz-box-shadow: inset 0 1px 0 0 #b1b9cb;
box-shadow: inset 0 1px 0 0 #b1b9cb;
color: #fff;
font: bold 16px/1 "helvetica neue", helvetica, arial, sans-serif;
@@ -466,7 +441,6 @@ button.skip {
cursor: pointer; }
button.skip:active {
-webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
- -moz-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; }
/* minimal indent (inspired by okcupid iphone interface)
@@ -501,7 +475,6 @@ button.minimal-indent {
border-right: 1px solid #dfdfdf;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
- -moz-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
color: #666;
font: bold 16px/1 "helvetica neue", helvetica, arial, sans-serif;
@@ -518,12 +491,10 @@ button.minimal-indent {
background-image: -o-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
background-image: linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
-webkit-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
- -moz-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
cursor: pointer; }
button.minimal-indent:active {
-webkit-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
- -moz-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white; }
/* webkit badge
@@ -596,7 +567,6 @@ button[disabled]:active {
background: #999;
border: 0;
-webkit-box-shadow: none;
- -moz-box-shadow: none;
box-shadow: none;
color: #aaa;
cursor: not-allowed;
@@ -738,10 +708,8 @@ ul.column {
ul.column li {
background: #eee;
-webkit-border-radius: 5px;
- -moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;
- -moz-box-shadow: inset 0 1px 1px 0 #c7c7c7;
box-shadow: inset 0 1px 1px 0 #c7c7c7;
float: left;
margin: 10px 0 0 10px;
@@ -7,10 +7,12 @@
@import "functions/radial-gradient";
@import "functions/render-gradients";
@import "functions/tint-shade";
+@import "functions/transition-property-name";
// CSS3 Mixins
@import "css3/animation";
@import "css3/appearance";
+@import "css3/background";
@import "css3/background-image";
@import "css3/background-size";
@import "css3/border-image";
@@ -21,6 +23,7 @@
@import "css3/flex-box";
@import "css3/inline-block";
@import "css3/linear-gradient";
+@import "css3/prefixer";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";
@@ -29,7 +32,9 @@
// Addons & other mixins
@import "addons/button";
@import "addons/clearfix";
+@import "addons/font-face";
@import "addons/font-family";
+@import "addons/hide-text";
@import "addons/html5-input-types";
@import "addons/position";
@import "addons/timing-functions";
@@ -34,6 +34,11 @@
@include pill($base-color);
}
}
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
}
@@ -62,15 +67,16 @@
@include border-radius (3px);
@include box-shadow (inset 0 1px 0 0 $inset-shadow);
color: $color;
- display: inline;
+ display: inline-block;
font-size: 11px;
font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient);
- padding: 6px 18px 7px;
+ padding: 7px 18px;
+ text-decoration: none;
text-shadow: 0 1px 0 $text-shadow;
-webkit-background-clip: padding-box;
- &:hover {
+ &:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
@@ -86,7 +92,7 @@
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
}
- &:active {
+ &:active:not(:disabled) {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
@@ -133,16 +139,16 @@
@include border-radius(5px);
@include box-shadow(inset 0 1px 0 0 $inset-shadow);
color: $color;
- display: inline;
+ display: inline-block;
font-size: 14px;
font-weight: bold;
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
- padding: 7px 20px 8px;
+ padding: 8px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
- &:hover {
+ &:hover:not(:disabled) {
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
@@ -162,7 +168,7 @@
$fourth-stop-hover 100%);
}
- &:active {
+ &:active:not(:disabled) {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
@if $grayscale == true {
@@ -204,17 +210,18 @@
@include border-radius(16px);
@include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
color: $color;
- display: inline;
+ display: inline-block;
font-size: 11px;
font-weight: normal;
line-height: 1;
@include linear-gradient ($base-color, $stop-gradient);
- padding: 3px 16px 5px;
+ padding: 5px 16px;
text-align: center;
+ text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
-webkit-background-clip: padding-box;
- &:hover {
+ &:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
@@ -242,7 +249,7 @@
-webkit-background-clip: padding-box;
}
- &:active {
+ &:active:not(:disabled) {
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
@@ -264,4 +271,3 @@
text-shadow: 0 -1px 1px $text-shadow-active;
}
}
-
@@ -0,0 +1,12 @@
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
+ @font-face {
+ font-family: $font-family;
+ src: url('#{$file-path}.eot');
+ src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+ url('#{$file-path}.woff') format('woff'),
+ url('#{$file-path}.ttf') format('truetype'),
+ url('#{$file-path}.svg##{$font-family}') format('svg');
+ font-weight: $weight;
+ font-style: $style;
+ }
+}
Oops, something went wrong.

0 comments on commit fbaec37

Please sign in to comment.