1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
@mixin fancy-gradient($color1, $color2) {
$top_shine: lighten($color1, 18);
$bottom_glow: lighten($color2, 10);
$top_middle: $color1;
$middle: lighten($color2, 3);
$bottom_middle: $color2;
@include background-image(linear-gradient($top_shine, $top_middle 10%, $middle 50%, $bottom_middle 50%, $bottom_glow)); }
@mixin fancy-gradient-active($color1, $color2) {
$top: lighten($color2, 6);
$bottom: lighten($color2, 14);
$top_middle: lighten($color2, 8);
$middle: lighten($color2, 4);
$bottom_middle: lighten($color2, 1);
@include background-image(linear-gradient($top, $top_middle 30%, $middle 50%, $bottom_middle 50%, $bottom)); }
@mixin fancy-matte-gradient($color1, $color2) {
@include background-image(linear-gradient($color1, $color2)); }
@mixin fancy-matte-gradient-active($color1, $color2) {
$top: lighten($color2, 5);
$bottom: lighten($color2, 15);
$middle: lighten($color2, 8);
@include background-image(linear-gradient($top, $middle 40%, $middle 85%, $bottom)); }
/* incase an inverted custom gradient isn't specified */
@mixin custom-fancy-gradient-active($color1, $color2) {
@include custom-fancy-gradient($color1, $color2); }
|
