semantic-mixins 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/lib/assets/stylesheets/semantic-mixins/_accessibility.sass +18 -0
- data/lib/assets/stylesheets/semantic-mixins/_css3-support.sass +36 -0
- data/lib/assets/stylesheets/semantic-mixins/_ie.sass +28 -0
- data/lib/assets/stylesheets/semantic-mixins/_image.sass +73 -0
- data/lib/assets/stylesheets/semantic-mixins/_main.sass +14 -327
- data/lib/assets/stylesheets/semantic-mixins/_responsive.sass +151 -0
- data/lib/assets/stylesheets/semantic-mixins.sass +6 -1
- data/semantic-mixins.gemspec +1 -1
- metadata +6 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// Accessibility
|
|
2
|
+
= for-blind-people($can-focus: true)
|
|
3
|
+
border: 0
|
|
4
|
+
clip: rect(0 0 0 0)
|
|
5
|
+
height: 1px
|
|
6
|
+
margin: -1px
|
|
7
|
+
overflow: hidden
|
|
8
|
+
padding: 0
|
|
9
|
+
position: absolute
|
|
10
|
+
width: 1px
|
|
11
|
+
@if $can-focus
|
|
12
|
+
&:active, &:focus
|
|
13
|
+
clip: auto
|
|
14
|
+
height: auto
|
|
15
|
+
margin: 0
|
|
16
|
+
overflow: visible
|
|
17
|
+
position: static
|
|
18
|
+
width: auto
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// ANIMATION
|
|
2
|
+
= keyframes($animation-name)
|
|
3
|
+
@-webkit-keyframes #{$animation-name}
|
|
4
|
+
@content
|
|
5
|
+
@-moz-keyframes #{$animation-name}
|
|
6
|
+
@content
|
|
7
|
+
@-o-keyframes #{$animation-name}
|
|
8
|
+
@content
|
|
9
|
+
@keyframes #{$animation-name}
|
|
10
|
+
@content
|
|
11
|
+
|
|
12
|
+
// Use it to set the color, background and text-shadow of selected areas of page
|
|
13
|
+
= selection($no-shadow: true)
|
|
14
|
+
::selection
|
|
15
|
+
@if $no-shadow
|
|
16
|
+
text-shadow: none
|
|
17
|
+
@content
|
|
18
|
+
::-moz-selection
|
|
19
|
+
@if $no-shadow
|
|
20
|
+
text-shadow: none
|
|
21
|
+
@content
|
|
22
|
+
|
|
23
|
+
// Set a color for the inputs placeholders. Compass doesn't have it =P
|
|
24
|
+
= placeholder-color($color)
|
|
25
|
+
&::-webkit-input-placeholder
|
|
26
|
+
color: $color
|
|
27
|
+
&:-moz-placeholder
|
|
28
|
+
color: $color
|
|
29
|
+
&:-ms-input-placeholder
|
|
30
|
+
color: $color
|
|
31
|
+
&:input-placeholder
|
|
32
|
+
color: $color
|
|
33
|
+
|
|
34
|
+
= rgba($property, $color, $alpha: 1)
|
|
35
|
+
#{$property}: $color
|
|
36
|
+
#{$property}: rgba($color, $alpha)
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// IE Hacks MIXINS
|
|
2
|
+
= ie6
|
|
3
|
+
+context(".ie6")
|
|
4
|
+
@content
|
|
5
|
+
|
|
6
|
+
= ie6-hack
|
|
7
|
+
+context("* html")
|
|
8
|
+
@content
|
|
9
|
+
|
|
10
|
+
= ie7
|
|
11
|
+
+context(".ie7")
|
|
12
|
+
@content
|
|
13
|
+
|
|
14
|
+
= ie7-hack
|
|
15
|
+
+context("*+html")
|
|
16
|
+
@content
|
|
17
|
+
|
|
18
|
+
= ie8
|
|
19
|
+
+context(".ie8")
|
|
20
|
+
@content
|
|
21
|
+
|
|
22
|
+
= legacy-inline-block
|
|
23
|
+
display: inline-block
|
|
24
|
+
*display: inline
|
|
25
|
+
+has-layout
|
|
26
|
+
|
|
27
|
+
= has-layout
|
|
28
|
+
zoom: 1
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
// IMAGE MIXINS
|
|
2
|
+
// Before using this mixin you should put the images in a folder called sprites
|
|
3
|
+
// and then import'em like so: @import "sprites/*.png"
|
|
4
|
+
= sprite-replace($name, $boilerplate: false)
|
|
5
|
+
+sprites-sprite($name)
|
|
6
|
+
@if $boilerplate
|
|
7
|
+
+boilerplate-image-replace
|
|
8
|
+
@else
|
|
9
|
+
+hide-text
|
|
10
|
+
display: block
|
|
11
|
+
width: sprites-sprite-width($name)
|
|
12
|
+
height: sprites-sprite-height($name)
|
|
13
|
+
|
|
14
|
+
= image-replace($img, $boilerplate: false)
|
|
15
|
+
@if $boilerplate
|
|
16
|
+
+boilerplate-image-replace
|
|
17
|
+
@else
|
|
18
|
+
+hide-text
|
|
19
|
+
display: block
|
|
20
|
+
background-repeat: no-repeat
|
|
21
|
+
height: image-height($img)
|
|
22
|
+
width: image-width($img)
|
|
23
|
+
background-image: image-url($img)
|
|
24
|
+
|
|
25
|
+
// Don't use this technique if you are stylizing an pseudo element (e.g. decorative-content)
|
|
26
|
+
= boilerplate-image-replace
|
|
27
|
+
background-color: transparent
|
|
28
|
+
border: 0
|
|
29
|
+
overflow: hidden
|
|
30
|
+
+decorative-content(before, false)
|
|
31
|
+
width: 0
|
|
32
|
+
height: 100%
|
|
33
|
+
// IE 6/7 fallback
|
|
34
|
+
+ie6-hack
|
|
35
|
+
text-indent: -9999px
|
|
36
|
+
|
|
37
|
+
= inline-icon($img, $gap:5px, $pos: left, $padding: 0)
|
|
38
|
+
background-image: image-url($img)
|
|
39
|
+
background-repeat: no-repeat
|
|
40
|
+
@if $pos == right
|
|
41
|
+
background-position: right top
|
|
42
|
+
text-align: right
|
|
43
|
+
@else
|
|
44
|
+
background-position: left top
|
|
45
|
+
text-align: left
|
|
46
|
+
line-height: image-height($img)
|
|
47
|
+
padding: $padding
|
|
48
|
+
padding-#{$pos}: image-width($img) + $gap
|
|
49
|
+
|
|
50
|
+
// COLOR MIXINS
|
|
51
|
+
// Use this mixin instead of default compass +background-image mixin.
|
|
52
|
+
// Use the first argument is the same as you use in the compass mixin
|
|
53
|
+
// The second and third arguments are colors (probably the colors that you use at the end and start of tha gradient),
|
|
54
|
+
// then compass is gonna mix the colors and support the old f***ing browsers.
|
|
55
|
+
// If you use just one color it'll be the solid color
|
|
56
|
+
= legacy-background-image($options, $color1, $color2: false)
|
|
57
|
+
@if $color2
|
|
58
|
+
background-color: mix($color1, $color2)
|
|
59
|
+
@else
|
|
60
|
+
background-color: $color1
|
|
61
|
+
+background-image($options)
|
|
62
|
+
|
|
63
|
+
= vertical-gradient($color1, $color2, $legacy-mix-color: true)
|
|
64
|
+
@if $legacy-mix-color
|
|
65
|
+
+legacy-background-image(linear-gradient(top bottom, $color1, $color2), $color1, $color2)
|
|
66
|
+
@else
|
|
67
|
+
+legacy-background-image(linear-gradient(top bottom, $color1, $color2), $color1)
|
|
68
|
+
|
|
69
|
+
= horizontal-gradient($color1, $color2, $legacy-mix-color: true)
|
|
70
|
+
@if $legacy-mix-color
|
|
71
|
+
+legacy-background-image(linear-gradient(left right, $color1, $color2), $color1, $color2)
|
|
72
|
+
@else
|
|
73
|
+
+legacy-background-image(linear-gradient(left right, $color1, $color2), $color1)
|
|
@@ -48,93 +48,6 @@ html
|
|
|
48
48
|
#{$selector} &
|
|
49
49
|
@content
|
|
50
50
|
|
|
51
|
-
// IMAGE MIXINS
|
|
52
|
-
// Before using this mixin you should put the images in a folder called sprites
|
|
53
|
-
// and then import'em like so: @import "sprites/*.png"
|
|
54
|
-
= sprite-replace($name, $boilerplate: false)
|
|
55
|
-
+sprites-sprite($name)
|
|
56
|
-
@if $boilerplate
|
|
57
|
-
+boilerplate-image-replace
|
|
58
|
-
@else
|
|
59
|
-
+hide-text
|
|
60
|
-
display: block
|
|
61
|
-
width: sprites-sprite-width($name)
|
|
62
|
-
height: sprites-sprite-height($name)
|
|
63
|
-
|
|
64
|
-
= image-replace($img, $boilerplate: false)
|
|
65
|
-
@if $boilerplate
|
|
66
|
-
+boilerplate-image-replace
|
|
67
|
-
@else
|
|
68
|
-
+hide-text
|
|
69
|
-
display: block
|
|
70
|
-
background-repeat: no-repeat
|
|
71
|
-
height: image-height($img)
|
|
72
|
-
width: image-width($img)
|
|
73
|
-
background-image: image-url($img)
|
|
74
|
-
|
|
75
|
-
// Don't use this technique if you are stylizing an pseudo element (e.g. decorative-content)
|
|
76
|
-
= boilerplate-image-replace
|
|
77
|
-
background-color: transparent
|
|
78
|
-
border: 0
|
|
79
|
-
overflow: hidden
|
|
80
|
-
+decorative-content(before, false)
|
|
81
|
-
width: 0
|
|
82
|
-
height: 100%
|
|
83
|
-
// IE 6/7 fallback
|
|
84
|
-
+ie6-hack
|
|
85
|
-
text-indent: -9999px
|
|
86
|
-
|
|
87
|
-
= inline-icon($img, $gap:5px, $pos: left, $padding: 0)
|
|
88
|
-
background-image: image-url($img)
|
|
89
|
-
background-repeat: no-repeat
|
|
90
|
-
@if $pos == right
|
|
91
|
-
background-position: right top
|
|
92
|
-
text-align: right
|
|
93
|
-
@else
|
|
94
|
-
background-position: left top
|
|
95
|
-
text-align: left
|
|
96
|
-
line-height: image-height($img)
|
|
97
|
-
padding: $padding
|
|
98
|
-
padding-#{$pos}: image-width($img) + $gap
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
// TEXT MIXIS
|
|
102
|
-
// Use it to set the color, background and text-shadow of selected areas of page
|
|
103
|
-
= selection($no-shadow: true)
|
|
104
|
-
::selection
|
|
105
|
-
@if $no-shadow
|
|
106
|
-
text-shadow: none
|
|
107
|
-
@content
|
|
108
|
-
::-moz-selection
|
|
109
|
-
@if $no-shadow
|
|
110
|
-
text-shadow: none
|
|
111
|
-
@content
|
|
112
|
-
|
|
113
|
-
// Set a color for the inputs placeholders. Compass doesn't have it =P
|
|
114
|
-
= placeholder-color($color)
|
|
115
|
-
&::-webkit-input-placeholder
|
|
116
|
-
color: $color
|
|
117
|
-
&:-moz-placeholder
|
|
118
|
-
color: $color
|
|
119
|
-
&:-ms-input-placeholder
|
|
120
|
-
color: $color
|
|
121
|
-
&:input-placeholder
|
|
122
|
-
color: $color
|
|
123
|
-
|
|
124
|
-
@function relative-size($size,$context)
|
|
125
|
-
@return #{$size/$context}em
|
|
126
|
-
|
|
127
|
-
= justify($characters-after: 1, $characters-before: 2)
|
|
128
|
-
hyphens: auto
|
|
129
|
-
text-align: justify
|
|
130
|
-
overflow-wrap: hyphenate
|
|
131
|
-
-webkit-hyphens: auto
|
|
132
|
-
-webkit-hyphenate-character: "\2010"
|
|
133
|
-
-webkit-hyphenate-limit-after: $characters-after
|
|
134
|
-
-webkit-hyphenate-limit-before: $characters-before
|
|
135
|
-
-moz-hyphens: auto
|
|
136
|
-
|
|
137
|
-
// POSITIONING MIXINS
|
|
138
51
|
// Call this mixin to place a decorative content around an element, e.g a tape holding a post it.
|
|
139
52
|
// When using the default configurations, you just need to set the dimensions, position and a background
|
|
140
53
|
= decorative-content($position: after, $absolute: true)
|
|
@@ -148,7 +61,11 @@ html
|
|
|
148
61
|
position: absolute
|
|
149
62
|
@content
|
|
150
63
|
|
|
64
|
+
@function relative-size($size,$context)
|
|
65
|
+
@return #{$size/$context}em
|
|
66
|
+
|
|
151
67
|
|
|
68
|
+
// POSITIONING MIXINS
|
|
152
69
|
= absolute-centering($width: 0, $direction: left, $offset: 0)
|
|
153
70
|
#{$direction}: 50%
|
|
154
71
|
margin-#{$direction}: - ($width / 2) - $offset
|
|
@@ -158,243 +75,13 @@ html
|
|
|
158
75
|
#{$direction}: - $distance
|
|
159
76
|
|
|
160
77
|
|
|
161
|
-
//
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
background-color: $color1
|
|
172
|
-
+background-image($options)
|
|
173
|
-
|
|
174
|
-
= vertical-gradient($color1, $color2, $legacy-mix-color: true)
|
|
175
|
-
@if $legacy-mix-color
|
|
176
|
-
+legacy-background-image(linear-gradient(top bottom, $color1, $color2), $color1, $color2)
|
|
177
|
-
@else
|
|
178
|
-
+legacy-background-image(linear-gradient(top bottom, $color1, $color2), $color1)
|
|
179
|
-
|
|
180
|
-
= horizontal-gradient($color1, $color2, $legacy-mix-color: true)
|
|
181
|
-
@if $legacy-mix-color
|
|
182
|
-
+legacy-background-image(linear-gradient(left right, $color1, $color2), $color1, $color2)
|
|
183
|
-
@else
|
|
184
|
-
+legacy-background-image(linear-gradient(left right, $color1, $color2), $color1)
|
|
185
|
-
|
|
186
|
-
= rgba($property, $color, $alpha: 1)
|
|
187
|
-
#{$property}: $color
|
|
188
|
-
#{$property}: rgba($color, $alpha)
|
|
189
|
-
|
|
190
|
-
// Accessibility
|
|
191
|
-
= for-blind-people($can-focus: true)
|
|
192
|
-
border: 0
|
|
193
|
-
clip: rect(0 0 0 0)
|
|
194
|
-
height: 1px
|
|
195
|
-
margin: -1px
|
|
196
|
-
overflow: hidden
|
|
197
|
-
padding: 0
|
|
198
|
-
position: absolute
|
|
199
|
-
width: 1px
|
|
200
|
-
@if $can-focus
|
|
201
|
-
&:active, &:focus
|
|
202
|
-
clip: auto
|
|
203
|
-
height: auto
|
|
204
|
-
margin: 0
|
|
205
|
-
overflow: visible
|
|
206
|
-
position: static
|
|
207
|
-
width: auto
|
|
208
|
-
|
|
209
|
-
// IE Hacks MIXINS
|
|
210
|
-
= ie6
|
|
211
|
-
+context(".ie6")
|
|
212
|
-
@content
|
|
213
|
-
|
|
214
|
-
= ie6-hack
|
|
215
|
-
+context("* html")
|
|
216
|
-
@content
|
|
217
|
-
|
|
218
|
-
= ie7
|
|
219
|
-
+context(".ie7")
|
|
220
|
-
@content
|
|
221
|
-
|
|
222
|
-
= ie7-hack
|
|
223
|
-
+context("*+html")
|
|
224
|
-
@content
|
|
225
|
-
|
|
226
|
-
= ie8
|
|
227
|
-
+context(".ie8")
|
|
228
|
-
@content
|
|
229
|
-
|
|
230
|
-
= legacy-inline-block
|
|
231
|
-
display: inline-block
|
|
232
|
-
*display: inline
|
|
233
|
-
+has-layout
|
|
234
|
-
|
|
235
|
-
= has-layout
|
|
236
|
-
zoom: 1
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
// ANIMATION
|
|
240
|
-
= keyframes($animation-name)
|
|
241
|
-
@-webkit-keyframes #{$animation-name}
|
|
242
|
-
@content
|
|
243
|
-
@-moz-keyframes #{$animation-name}
|
|
244
|
-
@content
|
|
245
|
-
@-o-keyframes #{$animation-name}
|
|
246
|
-
@content
|
|
247
|
-
@keyframes #{$animation-name}
|
|
248
|
-
@content
|
|
249
|
-
|
|
250
|
-
// MEDIA QUERIES MIXINS
|
|
251
|
-
// For the following mixins you can pass ipad, iphone, desktop, desktop-large, ipad-portrait, ipad-landscape,
|
|
252
|
-
// iphone-portrait, iphone-landscape or retina-display as arguments to the $device variable.
|
|
253
|
-
|
|
254
|
-
// Screen size variables
|
|
255
|
-
$iphone-portrait: 320px
|
|
256
|
-
$iphone-landscape: 480px
|
|
257
|
-
$ipad-portrait: 768px
|
|
258
|
-
$ipad-landscape: 980px
|
|
259
|
-
$desktop: 1224px
|
|
260
|
-
$desktop-large: 1824px
|
|
261
|
-
|
|
262
|
-
// Hides the element only in the device you choose
|
|
263
|
-
= hide-on($device)
|
|
264
|
-
+respond-to($device)
|
|
265
|
-
display: none
|
|
266
|
-
|
|
267
|
-
= hide-below($device)
|
|
268
|
-
+apply-to(less-than, $device)
|
|
269
|
-
display: none
|
|
270
|
-
|
|
271
|
-
= hide-above($device)
|
|
272
|
-
+apply-to(more-than, $device)
|
|
273
|
-
display: none
|
|
274
|
-
|
|
275
|
-
// Shows the element only in the device you choose
|
|
276
|
-
= show-on($device)
|
|
277
|
-
+apply-to(not-on, $device)
|
|
278
|
-
display: none
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
// The mixins below were inspired from here: https://gist.github.com/3931614 and a bit modified
|
|
282
|
-
// Specific device targeting
|
|
283
|
-
// Use: Only use if you want the style to respond to one device
|
|
284
|
-
// Example:
|
|
285
|
-
// +respond_to(ipad-landscape)
|
|
286
|
-
// will apply CSS only to an iPad at landscape rotation
|
|
287
|
-
= respond-to($device)
|
|
288
|
-
|
|
289
|
-
@if $device == retina-display
|
|
290
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5)
|
|
291
|
-
@content
|
|
292
|
-
|
|
293
|
-
@if $device == iphone
|
|
294
|
-
@media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape)
|
|
295
|
-
@content
|
|
296
|
-
|
|
297
|
-
@if $device == iphone-landscape
|
|
298
|
-
@media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: landscape)
|
|
299
|
-
@content
|
|
300
|
-
|
|
301
|
-
@if $device == iphone-portrait
|
|
302
|
-
@media only screen and (max-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: portrait)
|
|
303
|
-
@content
|
|
304
|
-
|
|
305
|
-
@if $device == ipad
|
|
306
|
-
@media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape)
|
|
307
|
-
@content
|
|
308
|
-
|
|
309
|
-
@if $device == ipad-landscape
|
|
310
|
-
@media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: landscape)
|
|
311
|
-
@content
|
|
312
|
-
|
|
313
|
-
@if $device == ipad-portrait
|
|
314
|
-
@media only screen and (max-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: portrait)
|
|
315
|
-
@content
|
|
316
|
-
|
|
317
|
-
@if $device == desktop
|
|
318
|
-
@media only screen and (min-width: $desktop) and (max-width: $desktop-large)
|
|
319
|
-
@content
|
|
320
|
-
|
|
321
|
-
@if $device == desktop-large
|
|
322
|
-
@media only screen and (min-width: $desktop-large)
|
|
323
|
-
@content
|
|
324
|
-
|
|
325
|
-
// General device targeting
|
|
326
|
-
// Use: Only use if you want the style to apply to many devices
|
|
327
|
-
// Example:
|
|
328
|
-
// +apply-to(smaller-than, iphone-portrait)
|
|
329
|
-
// will apply CSS to anything smaller than an iphone-portrait
|
|
330
|
-
// Example 2:
|
|
331
|
-
// +apply-to(not-on, retina-display)
|
|
332
|
-
// will apply CSS to anything but retina-display devices
|
|
333
|
-
= apply-to($filter, $device)
|
|
334
|
-
|
|
335
|
-
$extrema: null
|
|
336
|
-
@if $filter == less-than
|
|
337
|
-
$extrema: max
|
|
338
|
-
@if $filter == more-than
|
|
339
|
-
$extrema: min
|
|
340
|
-
|
|
341
|
-
@if $filter != not-on
|
|
342
|
-
@if $device == iphone-landscape
|
|
343
|
-
@media only screen and (#{$extrema}-width: $iphone-landscape)
|
|
344
|
-
@content
|
|
345
|
-
|
|
346
|
-
@if $device == iphone-portrait
|
|
347
|
-
@media only screen and (#{$extrema}-width: $iphone-portrait)
|
|
348
|
-
@content
|
|
349
|
-
|
|
350
|
-
@if $device == ipad-landscape
|
|
351
|
-
@media only screen and (#{$extrema}-width: $ipad-landscape)
|
|
352
|
-
@content
|
|
353
|
-
|
|
354
|
-
@if $device == ipad-portrait
|
|
355
|
-
@media only screen and (#{$extrema}-width: $ipad-portrait)
|
|
356
|
-
@content
|
|
357
|
-
|
|
358
|
-
@if $device == desktop
|
|
359
|
-
@media only screen and (#{$extrema}-width: $desktop)
|
|
360
|
-
@content
|
|
361
|
-
|
|
362
|
-
@if $device == desktop-large
|
|
363
|
-
@media only screen and (#{$extrema}-width: $desktop-large)
|
|
364
|
-
@content
|
|
365
|
-
@else
|
|
366
|
-
@if $device == retina-display
|
|
367
|
-
@media only screen and (-webkit-max-device-pixel-ratio: 1.1), (max--moz-device-pixel-ratio: 1.1), (-o-max-device-pixel-ratio: 1.1), (max-device-pixel-ratio: 1.1)
|
|
368
|
-
@content
|
|
369
|
-
|
|
370
|
-
@if $device == iphone
|
|
371
|
-
@media only screen and (max-width: $iphone-portrait - 1), (min-width: $iphone-landscape + 1)
|
|
372
|
-
@content
|
|
373
|
-
|
|
374
|
-
@if $device == iphone-landscape
|
|
375
|
-
@media only screen and (max-width: $iphone-landscape - 1), (min-width: $iphone-landscape + 1)
|
|
376
|
-
@content
|
|
377
|
-
|
|
378
|
-
@if $device == iphone-portrait
|
|
379
|
-
@media only screen and (max-width: $iphone-portrait - 1), (min-width: $iphone-portrait + 1)
|
|
380
|
-
@content
|
|
381
|
-
|
|
382
|
-
@if $device == ipad
|
|
383
|
-
@media only screen and (max-width: $ipad-portrait - 1), (min-width: $ipad-landscape + 1)
|
|
384
|
-
@content
|
|
385
|
-
|
|
386
|
-
@if $device == ipad-landscape
|
|
387
|
-
@media only screen and (max-width: $ipad-landscape - 1), (min-width: $ipad-landscape + 1)
|
|
388
|
-
@content
|
|
389
|
-
|
|
390
|
-
@if $device == ipad-portrait
|
|
391
|
-
@media only screen and (max-width: $ipad-portrait - 1), (min-width: $ipad-portrait + 1)
|
|
392
|
-
@content
|
|
393
|
-
|
|
394
|
-
@if $device == desktop
|
|
395
|
-
@media only screen and (max-width: $desktop - 1) and (min-width: $desktop-large)
|
|
396
|
-
@content
|
|
397
|
-
|
|
398
|
-
@if $device == desktop-large
|
|
399
|
-
@media only screen and (max-width: $desktop-large - 1)
|
|
400
|
-
@content
|
|
78
|
+
// TEXT MIXIS
|
|
79
|
+
= justify($characters-after: 1, $characters-before: 2)
|
|
80
|
+
hyphens: auto
|
|
81
|
+
text-align: justify
|
|
82
|
+
overflow-wrap: hyphenate
|
|
83
|
+
-webkit-hyphens: auto
|
|
84
|
+
-webkit-hyphenate-character: "\2010"
|
|
85
|
+
-webkit-hyphenate-limit-after: $characters-after
|
|
86
|
+
-webkit-hyphenate-limit-before: $characters-before
|
|
87
|
+
-moz-hyphens: auto
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
// MEDIA QUERIES MIXINS
|
|
2
|
+
// For the following mixins you can pass ipad, iphone, desktop, desktop-large, ipad-portrait, ipad-landscape,
|
|
3
|
+
// iphone-portrait, iphone-landscape or retina-display as arguments to the $device variable.
|
|
4
|
+
|
|
5
|
+
// Screen size variables
|
|
6
|
+
$iphone-portrait: 320px
|
|
7
|
+
$iphone-landscape: 480px
|
|
8
|
+
$ipad-portrait: 768px
|
|
9
|
+
$ipad-landscape: 980px
|
|
10
|
+
$desktop: 1224px
|
|
11
|
+
$desktop-large: 1824px
|
|
12
|
+
|
|
13
|
+
// Hides the element only in the device you choose
|
|
14
|
+
= hide-on($device)
|
|
15
|
+
+respond-to($device)
|
|
16
|
+
display: none
|
|
17
|
+
|
|
18
|
+
= hide-below($device)
|
|
19
|
+
+apply-to(less-than, $device)
|
|
20
|
+
display: none
|
|
21
|
+
|
|
22
|
+
= hide-above($device)
|
|
23
|
+
+apply-to(more-than, $device)
|
|
24
|
+
display: none
|
|
25
|
+
|
|
26
|
+
// Shows the element only in the device you choose
|
|
27
|
+
= show-on($device)
|
|
28
|
+
+apply-to(not-on, $device)
|
|
29
|
+
display: none
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
// The mixins below were inspired from here: https://gist.github.com/3931614 and a bit modified
|
|
33
|
+
// Specific device targeting
|
|
34
|
+
// Use: Only use if you want the style to respond to one device
|
|
35
|
+
// Example:
|
|
36
|
+
// +respond_to(ipad-landscape)
|
|
37
|
+
// will apply CSS only to an iPad at landscape rotation
|
|
38
|
+
= respond-to($device)
|
|
39
|
+
|
|
40
|
+
@if $device == retina-display
|
|
41
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5)
|
|
42
|
+
@content
|
|
43
|
+
|
|
44
|
+
@if $device == iphone
|
|
45
|
+
@media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape)
|
|
46
|
+
@content
|
|
47
|
+
|
|
48
|
+
@if $device == iphone-landscape
|
|
49
|
+
@media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: landscape)
|
|
50
|
+
@content
|
|
51
|
+
|
|
52
|
+
@if $device == iphone-portrait
|
|
53
|
+
@media only screen and (max-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: portrait)
|
|
54
|
+
@content
|
|
55
|
+
|
|
56
|
+
@if $device == ipad
|
|
57
|
+
@media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape)
|
|
58
|
+
@content
|
|
59
|
+
|
|
60
|
+
@if $device == ipad-landscape
|
|
61
|
+
@media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: landscape)
|
|
62
|
+
@content
|
|
63
|
+
|
|
64
|
+
@if $device == ipad-portrait
|
|
65
|
+
@media only screen and (max-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: portrait)
|
|
66
|
+
@content
|
|
67
|
+
|
|
68
|
+
@if $device == desktop
|
|
69
|
+
@media only screen and (min-width: $desktop) and (max-width: $desktop-large)
|
|
70
|
+
@content
|
|
71
|
+
|
|
72
|
+
@if $device == desktop-large
|
|
73
|
+
@media only screen and (min-width: $desktop-large)
|
|
74
|
+
@content
|
|
75
|
+
|
|
76
|
+
// General device targeting
|
|
77
|
+
// Use: Only use if you want the style to apply to many devices
|
|
78
|
+
// Example:
|
|
79
|
+
// +apply-to(smaller-than, iphone-portrait)
|
|
80
|
+
// will apply CSS to anything smaller than an iphone-portrait
|
|
81
|
+
// Example 2:
|
|
82
|
+
// +apply-to(not-on, retina-display)
|
|
83
|
+
// will apply CSS to anything but retina-display devices
|
|
84
|
+
= apply-to($filter, $device)
|
|
85
|
+
|
|
86
|
+
$extrema: null
|
|
87
|
+
@if $filter == less-than
|
|
88
|
+
$extrema: max
|
|
89
|
+
@if $filter == more-than
|
|
90
|
+
$extrema: min
|
|
91
|
+
|
|
92
|
+
@if $filter != not-on
|
|
93
|
+
@if $device == iphone-landscape
|
|
94
|
+
@media only screen and (#{$extrema}-width: $iphone-landscape)
|
|
95
|
+
@content
|
|
96
|
+
|
|
97
|
+
@if $device == iphone-portrait
|
|
98
|
+
@media only screen and (#{$extrema}-width: $iphone-portrait)
|
|
99
|
+
@content
|
|
100
|
+
|
|
101
|
+
@if $device == ipad-landscape
|
|
102
|
+
@media only screen and (#{$extrema}-width: $ipad-landscape)
|
|
103
|
+
@content
|
|
104
|
+
|
|
105
|
+
@if $device == ipad-portrait
|
|
106
|
+
@media only screen and (#{$extrema}-width: $ipad-portrait)
|
|
107
|
+
@content
|
|
108
|
+
|
|
109
|
+
@if $device == desktop
|
|
110
|
+
@media only screen and (#{$extrema}-width: $desktop)
|
|
111
|
+
@content
|
|
112
|
+
|
|
113
|
+
@if $device == desktop-large
|
|
114
|
+
@media only screen and (#{$extrema}-width: $desktop-large)
|
|
115
|
+
@content
|
|
116
|
+
@else
|
|
117
|
+
@if $device == retina-display
|
|
118
|
+
@media only screen and (-webkit-max-device-pixel-ratio: 1.1), (max--moz-device-pixel-ratio: 1.1), (-o-max-device-pixel-ratio: 1.1), (max-device-pixel-ratio: 1.1)
|
|
119
|
+
@content
|
|
120
|
+
|
|
121
|
+
@if $device == iphone
|
|
122
|
+
@media only screen and (max-width: $iphone-portrait - 1), (min-width: $iphone-landscape + 1)
|
|
123
|
+
@content
|
|
124
|
+
|
|
125
|
+
@if $device == iphone-landscape
|
|
126
|
+
@media only screen and (max-width: $iphone-landscape - 1), (min-width: $iphone-landscape + 1)
|
|
127
|
+
@content
|
|
128
|
+
|
|
129
|
+
@if $device == iphone-portrait
|
|
130
|
+
@media only screen and (max-width: $iphone-portrait - 1), (min-width: $iphone-portrait + 1)
|
|
131
|
+
@content
|
|
132
|
+
|
|
133
|
+
@if $device == ipad
|
|
134
|
+
@media only screen and (max-width: $ipad-portrait - 1), (min-width: $ipad-landscape + 1)
|
|
135
|
+
@content
|
|
136
|
+
|
|
137
|
+
@if $device == ipad-landscape
|
|
138
|
+
@media only screen and (max-width: $ipad-landscape - 1), (min-width: $ipad-landscape + 1)
|
|
139
|
+
@content
|
|
140
|
+
|
|
141
|
+
@if $device == ipad-portrait
|
|
142
|
+
@media only screen and (max-width: $ipad-portrait - 1), (min-width: $ipad-portrait + 1)
|
|
143
|
+
@content
|
|
144
|
+
|
|
145
|
+
@if $device == desktop
|
|
146
|
+
@media only screen and (max-width: $desktop - 1) and (min-width: $desktop-large)
|
|
147
|
+
@content
|
|
148
|
+
|
|
149
|
+
@if $device == desktop-large
|
|
150
|
+
@media only screen and (max-width: $desktop-large - 1)
|
|
151
|
+
@content
|
data/semantic-mixins.gemspec
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: semantic-mixins
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.1
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -57,7 +57,12 @@ files:
|
|
|
57
57
|
- LICENSE.md
|
|
58
58
|
- README.md
|
|
59
59
|
- lib/assets/stylesheets/semantic-mixins.sass
|
|
60
|
+
- lib/assets/stylesheets/semantic-mixins/_accessibility.sass
|
|
61
|
+
- lib/assets/stylesheets/semantic-mixins/_css3-support.sass
|
|
62
|
+
- lib/assets/stylesheets/semantic-mixins/_ie.sass
|
|
63
|
+
- lib/assets/stylesheets/semantic-mixins/_image.sass
|
|
60
64
|
- lib/assets/stylesheets/semantic-mixins/_main.sass
|
|
65
|
+
- lib/assets/stylesheets/semantic-mixins/_responsive.sass
|
|
61
66
|
- lib/semantic-mixins.rb
|
|
62
67
|
- semantic-mixins.gemspec
|
|
63
68
|
homepage: https://github.com/gustavoguichard/semantic-mixins
|