Difference between revisions of "Compass Mixins"

From rbachwiki
Jump to navigation Jump to search
(Created page with "==Gradients == // This will yield a radial gradient with an apparent specular highlight #radial-gradient { @include background-image(radial-gradient(45px 45px, cyan 10px, do...")
 
Line 1: Line 1:
==Gradients ==
==Gradients ==
// This will yield a radial gradient with an apparent specular highlight
// This will yield a radial gradient with an apparent specular highlight
#radial-gradient {
#radial-gradient {
   @include background-image(radial-gradient(45px 45px, cyan 10px, dodgerblue 30px));
   @include background-image(radial-gradient(45px 45px, cyan 10px, dodgerblue 30px));
}
}
   
   
// This yields a linear gradient spanning from the upper left corner to the lower right corner
// This yields a linear gradient spanning from the upper left corner to the lower right corner
#linear-gradient {
#linear-gradient {
   @include background-image(linear-gradient(to bottom right, white, #dddddd));
   @include background-image(linear-gradient(to bottom right, white, #dddddd));
}
}

Revision as of 23:08, 22 August 2016

Gradients

// This will yield a radial gradient with an apparent specular highlight

#radial-gradient {
 @include background-image(radial-gradient(45px 45px, cyan 10px, dodgerblue 30px));

}

// This yields a linear gradient spanning from the upper left corner to the lower right corner

#linear-gradient {
 @include background-image(linear-gradient(to bottom right, white, #dddddd));

}

// This yields a gradient starting at the top with #fff, ending in #aaa

#v-gradient {
@include background-image(linear-gradient(white, #aaaaaa));
}

// Same as above but with a #ccc at the halfway point

#v-gradient-2 {
 @include background-image(linear-gradient(white, #cccccc, #aaaaaa));
}

// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top

#v-gradient-3 {
 @include background-image(linear-gradient(white, #cccccc 30%, #bbbbbb 70%, #aaaaaa));
}

// This yields a horizontal linear gradient spanning from left to right.

#h-gradient {
 @include background-image(linear-gradient(to right, white, #dddddd));
}

#svg-gradient {
 $svg-gradient-shim-threshold: 1 !global;
 @include background-image(linear-gradient(to right, #2ac363, #cd8c14, #9c4cc2));
 width: 80px;
 height: 80px;
}

#angle-gradient {
 $svg-gradient-shim-threshold: 1 !global;
 @include background-image(linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2));
 width: 80px;
 height: 80px;
}