playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Merge pull request #535 from twbs/gradient-mixins 

Gradient mixins
pull/537/head
Connor Sears 11 years ago
parent
fba29ee4eb 847c3ffe1f
commit
a0fe5c16cf
2 changed files with 20 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      sass/docs.scss
  2. 29
      sass/mixins.scss

9
sass/docs.scss
Unescape View File

@ -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;

29
sass/mixins.scss
Unescape View File

@ -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
}

Write Preview
Loading…
Cancel
Save