-
Notifications
You must be signed in to change notification settings - Fork 15
/
if-ie.styl
228 lines (200 loc) · 6.52 KB
/
if-ie.styl
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
// set the `ie` variable so you'll need only to set it to `true` in `ie.` files
ie ?= false
// Method to use a `{lte_ie9}` selector to make styles for either old ie, or for prefixed ie9 class
ie9_class ?= 'ie9' // set the `ie9_class` in your .styl if you need another class here
lte_ie9 = ie ? '' : '.' ie9_class ' '
// Block mixin wrapper for lte-ie9
lte-ie9()
{lte_ie9}
{block}
// Handy `zoom`, would be visible only for IE
zoom()
zoom: arguments if ie
// `inline-block` for IE
// Making it so it won't override previous overrides of `display`
display_previous = display if !display_previous && type(display) == "function"
display(type, args...)
if type == inline-block and ie
display: inline args
zoom: 1
else
if type(display_previous) == "function"
display_previous(arguments)
else
display: arguments
// Emulating `box-sizing` in IE
// Could be used only in the same block and after all other box-model props
// Also, only paddings for now, no borders
box-sizing_previous = box-sizing if !box-sizing_previous && type(box-sizing) == "function"
box-sizing(type, args...)
if ie and @padding and (@width or @height)
$padding = @padding
$minus_width = 0
$minus_height = 0
if length($padding) == 1
$minus_width = $padding*2
$minus_height = $padding*2
else if length($padding) == 2
$minus_width = $padding[1]*2
$minus_height = $padding[0]*2
else if length($padding) == 3
$minus_width = $padding[1]*2
else if length($padding) == 4
$minus_width = $padding[1] $padding[3] unless (unit($padding[1]) != unit($padding[3]) and $padding[1] > 0 and $padding[3] > 0)
if length($padding) > 2
$minus_height = $padding[0] $padding[2] unless (unit($padding[0]) != unit($padding[2]) and $padding[0] > 0 and $padding[2] > 0)
if @width and unit(@width) == unit($minus_width)
width: @width - $minus_width
if @height and unit(@height) == unit($minus_height)
height: @height - $minus_height
else if ie
z if 0 // Do nothing in IE, details in the last section
else
if type(box-sizing_previous) == "function"
box-sizing_previous(arguments)
else
box-sizing: arguments
// rgba-like function with an optional fallback (defaults to #FFF)
$default_rgba_fallback ?= #FFF
rgba-ie()
// Getting the fallback from the arguments
if length(arguments) > 1 && type(arguments[length(arguments) - 1]) == "rgba"
$fallback = pop(arguments)
else
$fallback = $default_rgba_fallback
// Return rgba as soon as possible when not in IE
return rgba(arguments) if !ie
// We can have a contrasting function or take a function as the last argument
if $fallback == 'contrasting' and type(contrasting) == 'function'
$fallback = contrasting(rgba(arguments))
else if type($fallback) == 'function'
$fallback = $fallback(rgba(arguments))
// If we still don't have a color as a fallback, ok, white
if type($fallback) != 'rgba'
$fallback = #FFF
// If the fallback is transparent, it shouldn't be
if alpha($fallback) < 1
if $fallback != $default_rgba_fallback and type($default_rgba_fallback == 'rgba')
$fallback = rgba-ie($fallback)
else
$fallback = rgba-ie($fallback, #FFF)
return blend(rgba(arguments), $fallback)
// Crossbrowser `rect()` for `clip` property
rect()
return 'rect(%s)' % unquote(join(ie?' ':',', arguments))
// Simple nth-child helper for IE
// Inspired by http://codepen.io/scottkellum/pen/isytK
// No handling of `2n` and `2n 1` like functions (yet?)
nth-child(selector, number, offset = 0)
if ie and number[1] != n // second check don't throw away the rule, need to find better way.
a = ':first-child'
if number == 1
return unquote(selector) a
for i in (2..number)
a = a ' ' if i == 2
a = a '* ' if i > 2
return a unquote(selector)
else
return '%s:nth-child(%s)' % (unquote(selector) unquote(join('',number)))
// Disabling vendor functions in IE, saving bytes.
// Would work only if `ie` variable would be set _before_ including if-ie.styl`.
// `z if 0` — shortest non-buggy thing there. Kust empty comment is buggy :(
if ie
border-radius()
z if 0 // Do nothing in IE
text-shadow()
z if 0 // Do nothing in IE
box-shadow()
z if 0 // Do nothing in IE
user-select()
z if 0 // Do nothing in IE
column-count()
z if 0 // Do nothing in IE
column-gap()
z if 0 // Do nothing in IE
column-rule()
z if 0 // Do nothing in IE
column-rule-color()
z if 0 // Do nothing in IE
column-rule-width()
z if 0 // Do nothing in IE
column-rule-style()
z if 0 // Do nothing in IE
column-width()
z if 0 // Do nothing in IE
column-span()
z if 0 // Do nothing in IE
column-fill()
z if 0 // Do nothing in IE
background-clip()
z if 0 // Do nothing in IE
background-origin()
z if 0 // Do nothing in IE
background-size()
z if 0 // Do nothing in IE
transform()
z if 0 // Do nothing in IE
transform-style()
z if 0 // Do nothing in IE
border-image()
z if 0 // Do nothing in IE
transition()
z if 0 // Do nothing in IE
transition-property()
z if 0 // Do nothing in IE
transition-duration()
z if 0 // Do nothing in IE
transition-timing-function()
z if 0 // Do nothing in IE
transition-delay()
z if 0 // Do nothing in IE
backface-visibility()
z if 0 // Do nothing in IE
perspective()
z if 0 // Do nothing in IE
perspective-origin()
z if 0 // Do nothing in IE
text-size-adjust()
z if 0 // Do nothing in IE
box-orient()
z if 0 // Do nothing in IE
box-flex()
z if 0 // Do nothing in IE
box-flex-group()
z if 0 // Do nothing in IE
box-ordinal-group()
z if 0 // Do nothing in IE
box-align()
z if 0 // Do nothing in IE
box-pack()
z if 0 // Do nothing in IE
box-direction()
z if 0 // Do nothing in IE
animation()
z if 0 // Do nothing in IE
animation-name()
z if 0 // Do nothing in IE
animation-duration()
z if 0 // Do nothing in IE
animation-delay()
z if 0 // Do nothing in IE
animation-direction()
z if 0 // Do nothing in IE
animation-iteration-count()
z if 0 // Do nothing in IE
animation-timing-function()
z if 0 // Do nothing in IE
animation-play-state()
z if 0 // Do nothing in IE
animation-fill-mode()
z if 0 // Do nothing in IE
hyphens()
z if 0 // Do nothing in IE
appearance()
z if 0 // Do nothing in IE
tab-size()
z if 0 // Do nothing in IE
overflow-scrolling()
z if 0 // Do nothing in IE
text-size-adjust()
z if 0 // Do nothing in IE