This repository has been archived by the owner on Jun 7, 2023. It is now read-only.
/
gradient.scss
60 lines (53 loc) · 2.82 KB
/
gradient.scss
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@mixin linear-gradient($solidFill, $start: top, $color1: false, $color1pos: false, $color2: false, $color2pos: false, $color3: false, $color3pos: false, $color4: false, $color4pos: false) {
// output solid fill for browsers not supporting CSS gradients
@if $solidFill {
background-color: $solidFill;
}
$mozBackground : "";
$webkitBackground : "";
// add gradient start type
@if $start == top {
$webkitBackground : "0% 0%, 0% 100%";
} @else if $start == left {
$webkitBackground : "0% 0%, 100% 0%";
} @else if $start == right {
$webkitBackground : "100% 0%, 0% 0%";
}
$mozBackground : $start;
// add colors and their positions
@if $color1 {
$mozBackground : $mozBackground + ", " + $color1 + " " + $color1pos;
$webkitBackground : $webkitBackground + ", color-stop(" + $color1pos + ", " + $color1 + ")";
}
@if $color2 {
$mozBackground : $mozBackground + ", " + $color2 + " " + $color2pos;
$webkitBackground : $webkitBackground + ", color-stop(" + $color2pos + ", " + $color2 + ")";
}
@if $color3 {
$mozBackground : $mozBackground + ", " + $color3 + " " + $color3pos;
$webkitBackground : $webkitBackground + ", color-stop(" + $color3pos + ", " + $color3 + ")";
}
@if $color4 {
$mozBackground : $mozBackground + ", " + $color4 + " " + $color4pos;
$webkitBackground : $webkitBackground + ", color-stop(" + $color4pos + ", " + $color4 + ")";
}
/* dev note(hyun): gecko, ms, and opera uses the html5 syntax. None support non-vendor specific key currently (2012-3-19). */
background-image: unquote("-moz-linear-gradient(" + unquote($mozBackground) + ")");
background-image: unquote("-webkit-gradient(linear, " + unquote($webkitBackground) + ")");
background-image: unquote("-o-linear-gradient(" + unquote($mozBackground) + ")");
background-image: unquote("-ms-linear-gradient(" + unquote($mozBackground) + ")");
/* background-image: unquote("linear-gradient(" + unquote($mozBackground) + ")"); */ /* uncomment this someday - hyun */
}
@mixin clear-linear-gradient($background-color: transparent) {
background-image: none;
background-color: $background-color;
}
@mixin radial-gradient($color1: false, $color2: false) {
background-image: $color1; /* Old browsers */
background-image: -moz-radial-gradient(center, ellipse cover, $color1 0%, $color2 100%); /* FF3.6+ */
background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$color1), color-stop(100%,$color2)); /* Chrome,Safari4+ */
background-image: -webkit-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* Opera 12+ */
background-image: -ms-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* IE10+ */
background-image: radial-gradient(ellipse at center, $color1 0%,$color2 100%); /* W3C */
}