/
_images.scss
144 lines (128 loc) · 7.35 KB
/
_images.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
@import "shared";
@import "compass/utilities/general/hacks";
// Background property support for vendor prefixing within values.
@mixin background(
$background-1,
$background-2: false,
$background-3: false,
$background-4: false,
$background-5: false,
$background-6: false,
$background-7: false,
$background-8: false,
$background-9: false,
$background-10: false
) {
$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
$background-6, $background-7, $background-8, $background-9, $background-10);
$mult-bgs: -compass-list-size($backgrounds) > 1;
$add-pie-bg: prefixed(-pie, $backgrounds) or $mult-bgs;
@if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); }
@if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); }
@if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); }
@if $experimental-support-for-opera and prefixed(-o, $backgrounds) { background: -o($backgrounds); }
@if $experimental-support-for-pie and $add-pie-bg { -pie-background: -pie($backgrounds); }
background: $backgrounds ;
}
@mixin background-with-css2-fallback(
$background-1,
$background-2: false,
$background-3: false,
$background-4: false,
$background-5: false,
$background-6: false,
$background-7: false,
$background-8: false,
$background-9: false,
$background-10: false
) {
$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
$background-6, $background-7, $background-8, $background-9, $background-10);
$mult-bgs: -compass-list-size($backgrounds) > 1;
$simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);
@if not blank($simple-background) { background: $simple-background; }
@include background($background-1, $background-2, $background-3, $background-4, $background-5,
$background-6, $background-7, $background-8, $background-9, $background-10);
}
// Background image property support for vendor prefixing within values.
@mixin background-image(
$image-1,
$image-2: false,
$image-3: false,
$image-4: false,
$image-5: false,
$image-6: false,
$image-7: false,
$image-8: false,
$image-9: false,
$image-10: false
) {
$images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
$add-pie-bg: prefixed(-pie, $images) or -compass-list-size($images) > 1;
@if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; }
@if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }
@if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }
@if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); }
@if $experimental-support-for-pie and $add-pie-bg { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
background-image: $images ;
}
// Emit a IE-Specific filters that renders a simple linear gradient.
// For use in IE 6 - 8. Best practice would have you apply this via a
// conditional IE stylesheet, but if you must, you should place this before
// any background-image properties that you have specified.
//
// For the `$orientation` parameter, you can pass `vertical` or `horizontal`.
@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
@include has-layout;
$gradient-type: if($orientation == vertical, 0, 1);
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
}
}
// Border image property support for vendor prefixing properties and values.
@mixin border-image($value) {
@if $experimental-support-for-mozilla { -moz-border-image: -moz(reject(-compass-list($value), fill)); }
@if $experimental-support-for-webkit { -webkit-border-image: -webkit(reject(-compass-list($value), fill)); }
@if $experimental-support-for-opera { -o-border-image: -o(reject(-compass-list($value), fill)); }
@if $experimental-support-for-svg { border-image: -svg(reject(-compass-list($value), fill)); }
border-image: $value;
}
// List style image property support for vendor prefixing within values.
@mixin list-style-image($image) {
@if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); }
@if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
@if $experimental-support-for-opera and prefixed(-o, $image) { list-style-image: -o($image); }
@if $experimental-support-for-svg and prefixed(-svg, $image) { list-style-image: -svg($image); }
list-style-image: $image ;
}
// List style property support for vendor prefixing within values.
@mixin list-style($value) {
$value: -compass-list($value);
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
@if $experimental-support-for-opera and prefixed(-o, $value) { list-style-image: -o($value); }
@if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); }
list-style-image: $value ;
}
// content property support for vendor prefixing within values.
@mixin content($value) {
$value: -compass-list($value);
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); }
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { content: -webkit($value); }
@if $experimental-support-for-opera and prefixed(-o, $value) { content: -o($value); }
@if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); }
content: $value ;
}
$use-legacy-gradient-syntax: false !default;
@function linear-gradient($angle, $details...) {
$legacy-syntax: $use-legacy-gradient-syntax;
@if type-of($angle) != 'number' {
$angle: compact($angle);
$legacy-syntax: if(index($angle, 'to'), false, true);
}
@if $legacy-syntax {
@return _linear-gradient_legacy($angle, $details...);
} @else {
@return _linear-gradient($angle, $details...);
}
}