Browse files

Added more SCSS Mixins.

  • Loading branch information...
1 parent 3d17e03 commit 316d4de89db1edf972094dc956f20f8bdd00d79b Phil LaPier committed Jun 8, 2011
Showing with 172 additions and 80 deletions.
  1. +5 −0 _border-radius.scss
  2. +22 −0 _box-shadow.scss
  3. +5 −0 _box-sizing.scss
  4. +10 −0 _inline-block.scss
  5. +38 −0 _linear-gradient.scss
  6. +9 −80 _mixins.scss
  7. +29 −0 _radial-gradient.scss
  8. +42 −0 _simple-color.scss
  9. +6 −0 _transform.scss
  10. +6 −0 _transition.scss
View
5 _border-radius.scss
@@ -0,0 +1,5 @@
+@mixin border-radius ($radii) {
+ -moz-border-radius: $radii;
+ -webkit-border-radius: $radii;
+ border-radius: $radii;
+}
View
22 _box-shadow.scss
@@ -0,0 +1,22 @@
+// Box-Shadow Mixin Requires Sass v3.1.1+
+@mixin box-shadow ($shadow-1,
+ $shadow-2: false, $shadow-3: false,
+ $shadow-4: false, $shadow-5: false,
+ $shadow-6: false, $shadow-7: false,
+ $shadow-8: false, $shadow-9: false)
+ {
+ $full: $shadow-1;
+ @each $shadow in
+ $shadow-2, $shadow-3,
+ $shadow-4, $shadow-5,
+ $shadow-6, $shadow-7,
+ $shadow-8, $shadow-9{
+ @if $shadow {
+ $full: $full, $shadow;
+ }
+ }
+ -webkit-box-shadow: $full;
+ -moz-box-shadow: $full;
+ -o-box-shadow: $full;
+ box-shadow: $full;
+}
View
5 _box-sizing.scss
@@ -0,0 +1,5 @@
+@mixin box-sizing ($box) {
+ -webkit-box-sizing: $box;
+ -moz-box-sizing: $box;
+ box-sizing: $box;
+}
View
10 _inline-block.scss
@@ -0,0 +1,10 @@
+/* Legacy support for inline-block in IE7 (maybe IE6) */
+@mixin inline-block {
+ display: -moz-inline-box;
+ -moz-box-orient: vertical;
+ display: inline-block;
+ vertical-align: baseline;
+ zoom: 1;
+ *display: inline;
+ *vertical-align: auto;
+}
View
38 _linear-gradient.scss
@@ -0,0 +1,38 @@
+/* Requires Sass 3.1+ */
+@mixin linear-gradient($pos, $G1, $G2: false,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false) {
+ // Detect what type of value exists in $pos
+ $pos-type: type-of(nth($pos, 1));
+
+ // If $pos is missing from mixin, reassign vars and add default position
+ @if $pos-type == color {
+ $G8: $G7; $G7: $G6; $G6: $G5; $G5: $G4;
+ $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+ $pos: top; // Default position
+ }
+
+ $full: $G1;
+ $gradients: $G2, $G3, $G4, $G5, $G6, $G7, $G8;
+ @each $gradient in $gradients {
+ @if $gradient {
+ $full: $full, $gradient;
+ }
+ }
+ background-color: nth($G1, 1);
+ background-image: -webkit-linear-gradient($pos, $full);
+ background-image: -moz-linear-gradient($pos, $full);
+ background-image: -ms-linear-gradient($pos, $full);
+ background-image: -o-linear-gradient($pos, $full);
+ background-image: linear-gradient($pos, $full);
+}
+
+/* Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.*/
+/*
+div.linear {
+ @include linear-gradient(#1e5799, #2989d8);
+ @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
+ @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
+}
+*/
View
89 _mixins.scss
@@ -1,80 +1,9 @@
-@mixin border-radius ($radii) {
- -moz-border-radius: $radii;
- -webkit-border-radius: $radii;
- border-radius: $radii;
-}
-
-// Box-Shadow Mixin Requires Sass v3.1.1+
-@mixin box-shadow ($shadow-1,
- $shadow-2: false, $shadow-3: false,
- $shadow-4: false, $shadow-5: false,
- $shadow-6: false, $shadow-7: false,
- $shadow-8: false, $shadow-9: false)
- {
- $full: $shadow-1;
- @each $shadow in
- $shadow-2, $shadow-3,
- $shadow-4, $shadow-5,
- $shadow-6, $shadow-7,
- $shadow-8, $shadow-9{
- @if $shadow {
- $full: $full, $shadow;
- }
- }
- -webkit-box-shadow: $full;
- -moz-box-shadow: $full;
- -o-box-shadow: $full;
- box-shadow: $full;
-}
-
-@mixin linear-gradient ($from, $to) {
- background: $from;
- background: -moz-linear-gradient(top, $from, $to); // FF3.6
- background: -ms-linear-gradient(top, $from, $to); // IE10
- background: -o-linear-gradient(top, $from, $to); // Opera 11.10+
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to)); // Saf4+, Chrome
- background: -webkit-linear-gradient(top, $from, $to); // Chrome 10+, Saf5.1+
- background: linear-gradient(top, $from, $to);
-}
-
-@mixin simple-color ($base-hue, $base-saturation, $base-lightness) {
- $start-gradient: hsl($base-hue, $base-saturation, $base-lightness);
- $stop-gradient: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 11%), 9%);
- $border: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 14%), 9%);
- $inset-shadow: desaturate(lighten(hsl($base-hue, $base-saturation, $base-lightness), 14%), 8%);
- $text-shadow: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 18%), 15%);
- $color: hsl(0, 0, 100%);
-
- @if $base-lightness > 70% {
- $color: hsl(0, 0, 20%);
- $text-shadow: saturate(lighten(hsl($base-hue, $base-saturation, $base-lightness), 4%), 10%);
- }
-
- @include linear-gradient ($start-gradient, $stop-gradient);
- border: 1px solid $border;
- @include border-radius (3px);
- @include box-shadow (inset 0 1px 0 0 $inset-shadow);
- color: $color;
- font-weight: bold;
- padding: 8px;
- text-shadow: 0 1px 0 $text-shadow;
- width: 150px;
-
- &:hover {
- $start-gradient: desaturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 5%), 4%);
- $stop-gradient: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 14%), 8%);
- $inset-shadow: desaturate(lighten(hsl($base-hue, $base-saturation, $base-lightness), 5%), 7%);
-
- @include linear-gradient ($start-gradient, $stop-gradient);
- @include box-shadow (inset 0 1px 0 0 $inset-shadow);
- cursor: pointer;
- }
-
- &:active {
- $border: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 14%), 9%);
- $inset-shadow: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 17%), 7%);
-
- @include box-shadow (inset 0 0 8px 4px $inset-shadow, inset 0 0 8px 4px $inset-shadow, 0 1px 1px 0 #eee);
- border: 1px solid $border;
- }
-}
+@import "border-radius"
+@import "box-shadow"
+@import "box-sizing"
+@import "inline-block"
+@import "linear-gradient"
+@import "radial-gradient"
+@import "simple-color"
+@import "transform"
+@import "transition"
View
29 _radial-gradient.scss
@@ -0,0 +1,29 @@
+/* Requires Sass 3.1+ */
+@mixin radial-gradient($pos, $shape-size,
+ $G1, $G2,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false) {
+ $full: $G1;
+ $gradients: $G2, $G3, $G4, $G5, $G6, $G7, $G8;
+
+ @each $gradient in $gradients {
+ @if $gradient {
+ $full: $full, $gradient;
+ }
+ }
+ background-color: nth($G1, 1);
+ background-image: -webkit-radial-gradient($pos, $shape-size, $full);
+ background-image: -moz-radial-gradient($pos, $shape-size, $full);
+ background-image: -ms-radial-gradient($pos, $shape-size, $full);
+ background-image: -o-radial-gradient($pos, $shape-size, $full);
+ background-image: radial-gradient($pos, $shape-size, $full);
+}
+
+/* Usage: Gradient position and shape-size are required. Color stops are optional.*/
+/*
+div.radial {
+ @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
+ @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
+}
+*/
View
42 _simple-color.scss
@@ -0,0 +1,42 @@
+// Used for Buttons. See https://github.com/ubuwaits/css3-buttons
+@mixin simple-color ($base-hue, $base-saturation, $base-lightness) {
+ $start-gradient: hsl($base-hue, $base-saturation, $base-lightness);
+ $stop-gradient: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 11%), 9%);
+ $border: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 14%), 9%);
+ $inset-shadow: desaturate(lighten(hsl($base-hue, $base-saturation, $base-lightness), 14%), 8%);
+ $text-shadow: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 18%), 15%);
+ $color: hsl(0, 0, 100%);
+
+ @if $base-lightness > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: saturate(lighten(hsl($base-hue, $base-saturation, $base-lightness), 4%), 10%);
+ }
+
+ @include linear-gradient ($start-gradient, $stop-gradient);
+ border: 1px solid $border;
+ @include border-radius (3px);
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ font-weight: bold;
+ padding: 8px;
+ text-shadow: 0 1px 0 $text-shadow;
+ width: 150px;
+
+ &:hover {
+ $start-gradient: desaturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 5%), 4%);
+ $stop-gradient: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 14%), 8%);
+ $inset-shadow: desaturate(lighten(hsl($base-hue, $base-saturation, $base-lightness), 5%), 7%);
+
+ @include linear-gradient ($start-gradient, $stop-gradient);
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+ cursor: pointer;
+ }
+
+ &:active {
+ $border: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 14%), 9%);
+ $inset-shadow: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 17%), 7%);
+
+ @include box-shadow (inset 0 0 8px 4px $inset-shadow, inset 0 0 8px 4px $inset-shadow, 0 1px 1px 0 #eee);
+ border: 1px solid $border;
+ }
+}
View
6 _transform.scss
@@ -0,0 +1,6 @@
+@mixin transform($property) {
+ -webkit-transform: $property;
+ -moz-transform: $property;
+ -ms-transform: $property;
+ transform: $property;
+}
View
6 _transition.scss
@@ -0,0 +1,6 @@
+@mixin transition($property: all, $ratio: 0.15s, $ease: ease-out) {
+ -webkit-transition: $property $ratio $ease;
+ -moz-transition: $property $ratio $ease;
+ -o-transition: $property $ratio $ease;
+ transition: $property $ratio $ease;
+}

0 comments on commit 316d4de

Please sign in to comment.