Merge pull request #535 from twbs/gradient-mixins

Gradient mixins
twbs · Apr 2, 2014 · a0fe5c1 · a0fe5c1
2 parents fba29ee + 847c3ff
commit a0fe5c1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/sass/docs.scss b/sass/docs.scss
@@ -63,14 +63,7 @@ body {
 .docs-header,
 .docs-sub-header {
   position: relative;
-  background-color: #0a1855;
-  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#0a1855), color-stop(100%,#da0024));
-  background-image: -webkit-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
-  background-image:    -moz-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
-  background-image:     -ms-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
-  background-image:      -o-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
-  background-image:         linear-gradient(45deg, #0a1855 0%, #da0024 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a1855', endColorstr='#da0024', GradientType=1 );
+  @include directional-gradient(#0a1855, #da0024)
 }
 .docs-header {
   height: 100vh;

diff --git a/sass/mixins.scss b/sass/mixins.scss
@@ -37,16 +37,25 @@
 }
 
 // Gradients
-@mixin gradient($color-form, $color-to) {
-  background-color: $color-form; // Old browsers
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-form), color-stop(100%,$color-to)); // Chrome, Safari4+
-  background-image: -webkit-linear-gradient(top, $color-form 0%, $color-to 100%);           // Chrome10+, Safari5.1+
-  background-image:    -moz-linear-gradient(top, $color-form 0%, $color-to 100%);           // FF3.6+
-  background-image:     -ms-linear-gradient(top, $color-form 0%, $color-to 100%);           // IE10+
-  background-image:      -o-linear-gradient(top, $color-form 0%, $color-to 100%);           // Opera 11.10+
-  background-image:         linear-gradient(to bottom, $color-form 0%, $color-to 100%);     // W3C
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-form', endColorstr='$color-to', GradientType=0 ); // IE6-9
-
+@mixin linear-gradient($color-from, $color-to) {
+  background-color: $color-from; // Old browsers
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+
+  background-image: -webkit-linear-gradient(top, $color-from 0%, $color-to 100%);           // Chrome10+, Safari5.1+
+  background-image:    -moz-linear-gradient(top, $color-from 0%, $color-to 100%);           // FF3.6+
+  background-image:     -ms-linear-gradient(top, $color-from 0%, $color-to 100%);           // IE10+
+  background-image:      -o-linear-gradient(top, $color-from 0%, $color-to 100%);           // Opera 11.10+
+  background-image:         linear-gradient(to bottom, $color-from 0%, $color-to 100%);     // W3C
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color-from}', endColorstr='#{$color-to}', GradientType=0 ); // IE6-9
+}
+@mixin directional-gradient($color-from, $color-to, $deg: 45deg) {
+  background-color: $color-from; // Old browsers
+  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+
+  background-image: -webkit-linear-gradient(45deg, $color-from 0%, $color-to 100%);           // Chrome10+, Safari5.1+
+  background-image:    -moz-linear-gradient(45deg, $color-from 0%, $color-to 100%);           // FF3.6+
+  background-image:     -ms-linear-gradient(45deg, $color-from 0%, $color-to 100%);           // IE10+
+  background-image:      -o-linear-gradient(45deg, $color-from 0%, $color-to 100%);           // Opera 11.10+
+  background-image:         linear-gradient(45deg, $color-from 0%, $color-to 100%);     // W3C
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color-from}', endColorstr='#{$color-to}', GradientType=1 ); // IE6-9
 }