Permalink
Browse files

Update Bourbon. Use my preferred organization for CSS.

  • Loading branch information...
Chad Mazzola
Chad Mazzola committed Dec 27, 2011
1 parent 36751eb commit 908c09e4cb5fc69a8d31778c3d7a1ed865d3972b
Showing with 759 additions and 161 deletions.
  1. +2 −0 .gitignore
  2. +1 −1 index.html
  3. +0 −17 scss/_bourbon.scss
  4. +0 −7 scss/css3/_border-radius.scss
  5. +0 −8 scss/css3/_transform.scss
  6. +0 −16 scss/functions/_compact.scss
  7. +0 −32 scss/functions/_golden-ratio.scss
  8. +31 −62 {css → stylesheets}/buttons.css
  9. 0 { → stylesheets}/scss/_screen.scss
  10. +29 −0 stylesheets/scss/bourbon/_bourbon.scss
  11. +170 −0 stylesheets/scss/bourbon/addons/_button.scss
  12. +4 −0 stylesheets/scss/bourbon/addons/_font-family.scss
  13. +36 −0 stylesheets/scss/bourbon/addons/_html5-input-types.scss
  14. +30 −0 stylesheets/scss/bourbon/addons/_position.scss
  15. +32 −0 stylesheets/scss/bourbon/addons/_timing-functions.scss
  16. 0 {scss → stylesheets/scss/bourbon}/css3/_animation.scss
  17. +7 −0 stylesheets/scss/bourbon/css3/_appearance.scss
  18. +71 −0 stylesheets/scss/bourbon/css3/_background-image.scss
  19. +15 −0 stylesheets/scss/bourbon/css3/_background-size.scss
  20. +7 −0 stylesheets/scss/bourbon/css3/_border-image.scss
  21. +59 −0 stylesheets/scss/bourbon/css3/_border-radius.scss
  22. 0 {scss → stylesheets/scss/bourbon}/css3/_box-shadow.scss
  23. 0 {scss → stylesheets/scss/bourbon}/css3/_box-sizing.scss
  24. +67 −0 stylesheets/scss/bourbon/css3/_columns.scss
  25. +8 −0 {scss → stylesheets/scss/bourbon}/css3/_flex-box.scss
  26. 0 {scss → stylesheets/scss/bourbon}/css3/_inline-block.scss
  27. +9 −11 {scss → stylesheets/scss/bourbon}/css3/_linear-gradient.scss
  28. +7 −6 {scss → stylesheets/scss/bourbon}/css3/_radial-gradient.scss
  29. +19 −0 stylesheets/scss/bourbon/css3/_transform.scss
  30. 0 {scss → stylesheets/scss/bourbon}/css3/_transition.scss
  31. +36 −0 stylesheets/scss/bourbon/functions/_deprecated-webkit-gradient.scss
  32. +31 −0 stylesheets/scss/bourbon/functions/_golden-ratio.scss
  33. 0 {scss → stylesheets/scss/bourbon}/functions/_grid-width.scss
  34. +23 −0 stylesheets/scss/bourbon/functions/_linear-gradient.scss
  35. +15 −0 stylesheets/scss/bourbon/functions/_radial-gradient.scss
  36. 0 {scss → stylesheets/scss/bourbon}/functions/_tint-shade.scss
  37. +17 −0 stylesheets/scss/bourbon/lib/bourbon.rb
  38. +6 −0 stylesheets/scss/bourbon/lib/bourbon/sass_extensions.rb
  39. +13 −0 stylesheets/scss/bourbon/lib/bourbon/sass_extensions/functions.rb
  40. +13 −0 stylesheets/scss/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
  41. +1 −1 { → stylesheets}/scss/buttons.scss
View
@@ -0,0 +1,2 @@
+.sass-cache/
+_site/
View
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>CSS3 buttons by Chad Mazzola</title>
<meta name="description" content="A collection of CSS3 buttons by Chad Mazzola">
- <link rel="stylesheet" href="css/buttons.css" type="text/css" media="screen">
+ <link rel="stylesheet" href="stylesheets/buttons.css" type="text/css" media="screen">
</head>
<body>
View
@@ -1,17 +0,0 @@
-// Custom Functions
-@import "functions/compact";
-@import "functions/golden-ratio";
-@import "functions/tint-shade";
-
-// CSS3 Mixins
-@import "css3/animation";
-@import "css3/border-radius";
-@import "css3/box-shadow";
-@import "css3/box-sizing";
-@import "css3/flex-box";
-@import "css3/inline-block";
-@import "css3/linear-gradient";
-@import "css3/radial-gradient";
-@import "css3/transform";
-@import "css3/transition";
-
@@ -1,7 +0,0 @@
-@mixin border-radius ($radii) {
- -webkit-border-radius: $radii;
- -moz-border-radius: $radii;
- -ms-border-radius: $radii;
- -o-border-radius: $radii;
- border-radius: $radii;
-}
@@ -1,8 +0,0 @@
-@mixin transform($property: none) {
-// none | <transform-function>
- -webkit-transform: $property;
- -moz-transform: $property;
- -ms-transform: $property;
- -o-transform: $property;
- transform: $property;
-}
@@ -1,16 +0,0 @@
-@function compact($var-1, $var-2: false,
- $var-3: false, $var-4: false,
- $var-5: false, $var-6: false,
- $var-7: false, $var-8: false,
- $var-9: false, $var-10: false) {
- $full: $var-1;
- $vars: $var-2, $var-3, $var-4, $var-5,
- $var-6, $var-7, $var-8, $var-9, $var-10;
-
- @each $var in $vars {
- @if $var {
- $full: $full, $var;
- }
- }
- @return $full;
-}
@@ -1,32 +0,0 @@
-@function golden-ratio($value, $increment) {
- @if $increment > 0 {
- @for $i from 1 through $increment {
- $value: ($value * 1.618);
- }
- }
- @if $increment < 0 {
- $increment: abs($increment);
- @for $i from 1 through $increment {
- $value: ($value / 1.618);
- }
- }
- @if $increment == 0 {
- @warn "Increment value cannot be zero; must be ...-3, -2, -1, 1, 2, 3...";
- }
- @return $value;
-}
-
-// div {
-// Increment Up GR with positive value
-// width: golden-ratio(14px, 1); // returns: 22.652px
-//
-// Increment Down GR with negative value
-// width: golden-ratio(14px, -1); // returns: 8.653px
-//
-// Can be used with ceil(round up) or floor(round down)
-// width: floor( golden-ratio(14px, 1) ); // returns: 22px
-// width: ceil( golden-ratio(14px, 1) ); // returns: 23px
-// }
-//
-// modularscale.com
-// goldenratiocalculator.com

Large diffs are not rendered by default.

Oops, something went wrong.
File renamed without changes.
@@ -0,0 +1,29 @@
+// Custom Functions
+@import "functions/deprecated-webkit-gradient";
+@import "functions/golden-ratio";
+@import "functions/grid-width";
+@import "functions/tint-shade";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/appearance";
+@import "css3/background-image";
+@import "css3/background-size";
+@import "css3/border-image";
+@import "css3/border-radius";
+@import "css3/box-shadow";
+@import "css3/box-sizing";
+@import "css3/columns";
+@import "css3/flex-box";
+@import "css3/inline-block";
+@import "css3/linear-gradient";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+
+// Addons & other mixins
+@import "addons/button";
+@import "addons/font-family";
+@import "addons/html5-input-types";
+@import "addons/position";
+@import "addons/timing-functions";
@@ -0,0 +1,170 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+ @if type-of($style) == color {
+ $base-color: $style;
+ $style: simple;
+ }
+
+ @if $style == simple {
+ @include simple($base-color);
+ }
+
+ @else if $style == shiny {
+ @include shiny($base-color);
+ }
+
+ @else if $style == pill {
+ @include pill($base-color);
+ }
+}
+
+@mixin simple ($base-color) {
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $color: hsl(0, 0, 100%);
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ border: 1px solid $border;
+ @include border-radius (3px);
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline;
+ font-size: 11px;
+ font-weight: bold;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: 6px 18px 7px;
+ text-shadow: 0 1px 0 $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover {
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ }
+
+ &:active {
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+ border: 1px solid $border-active;
+ @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+ }
+}
+
+@mixin shiny($base-color) {
+ $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
+ $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
+ $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
+ $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+ $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+ $color: hsl(0, 0, 100%);
+ $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
+ $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+ border: 1px solid $border;
+ border-bottom: 1px solid $border-bottom;
+ @include border-radius(5px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline;
+ font-size: 14px;
+ font-weight: bold;
+ padding: 7px 20px 8px;
+ text-decoration: none;
+ text-align: center;
+ text-shadow: 0 -1px 1px $text-shadow;
+
+ &:hover {
+ $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);
+ $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+ @include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
+ cursor: pointer;
+ }
+
+ &:active {
+ $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+ @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+ }
+}
+
+@mixin pill($base-color) {
+ $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
+ $color: hsl(0, 0, 100%);
+ $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
+ $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @include linear-gradient ($base-color, $stop-gradient);
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ @include border-radius(16px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+ color: $color;
+ display: inline;
+ font-size: 11px;
+ font-weight: normal;
+ line-height: 1;
+ padding: 3px 16px 5px;
+ text-align: center;
+ text-shadow: 0 -1px 1px $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover {
+ $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
+ $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
+ $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
+
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ text-shadow: 0 -1px 1px $text-shadow-hover;
+ -webkit-background-clip: padding-box;
+ }
+
+ &:active {
+ $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%);
+ $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
+ $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
+
+ background: $active-color;
+ border: 1px solid $border-active;
+ border-bottom: 1px solid $border-bottom-active;
+ @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+ text-shadow: 0 -1px 1px $text-shadow-active;
+ }
+}
@@ -0,0 +1,4 @@
+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$verdana: Verdana, Geneva, sans-serif;
@@ -0,0 +1,36 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+ 'input[type="number"]',
+ 'input[type="password"]',
+ 'input[type="search"]',
+ 'input[type="tel"]',
+ 'input[type="text"]',
+ 'input[type="url"]',
+
+ // Webkit & Gecko may change the display of these in the future
+ 'input[type="color"]',
+ 'input[type="date"]',
+ 'input[type="datetime"]',
+ 'input[type="datetime-local"]',
+ 'input[type="month"]',
+ 'input[type="time"]',
+ 'input[type="week"]';
+
+$unquoted-inputs-list: ();
+
+@each $input-type in $inputs-list {
+ $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+//************************************************************************//
+// #{$all-text-inputs}, textarea {
+// border: 1px solid red;
+// }
@@ -0,0 +1,30 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+ @if type-of($position) == list {
+ $coordinates: $position;
+ $position: relative;
+ }
+
+ $top: nth($coordinates, 1);
+ $right: nth($coordinates, 2);
+ $bottom: nth($coordinates, 3);
+ $left: nth($coordinates, 4);
+
+ position: $position;
+
+ @if not(unitless($top)) {
+ top: $top;
+ }
+
+ @if not(unitless($right)) {
+ right: $right;
+ }
+
+ @if not(unitless($bottom)) {
+ bottom: $bottom;
+ }
+
+ @if not(unitless($left)) {
+ left: $left;
+ }
+}
Oops, something went wrong.

0 comments on commit 908c09e

Please sign in to comment.