compass-inuit 4.3.3 → 4.3.4.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -33,6 +33,9 @@ img{
33
33
 
34
34
  /**
35
35
  * Keep your images on your baseline.
36
+ *
37
+ * Please note, these will not work too nicely with fluid images and will
38
+ * distort when resized below a certain width. Use with caution.
36
39
  */
37
40
  .img--short{
38
41
  height:5 * $base-spacing-unit;
@@ -23,7 +23,7 @@
23
23
  `@include vendor(border-radius, 4px);`
24
24
  *
25
25
  */
26
- @mixin vendor($property, $value){
26
+ @mixin vendor($property, $value...){
27
27
  -webkit-#{$property}:$value;
28
28
  -moz-#{$property}:$value;
29
29
  -ms-#{$property}:$value;
@@ -5,335 +5,135 @@
5
5
  * Sizes in human readable format. These are used in conjunction with other
6
6
  * objects and abstractions found in inuit.css, most commonly the grid system
7
7
  * and faux flexbox.
8
+ *
9
+ * We have a mixin to generate our widths and their breakpoint-specific
10
+ * variations.
8
11
  */
9
12
 
10
- /**
11
- * Whole
12
- */
13
- .one-whole { width:100%; }
14
-
13
+ @mixin grid-setup($namespace: "") {
14
+ /**
15
+ * Whole
16
+ */
17
+ .#{$namespace}one-whole { width:100%; }
18
+
19
+
20
+ /**
21
+ * Halves
22
+ */
23
+ .#{$namespace}one-half { width:50%; }
24
+
25
+
26
+ /**
27
+ * Thirds
28
+ */
29
+ .#{$namespace}one-third { width:33.333%; }
30
+ .#{$namespace}two-thirds { width:66.666%; }
31
+
32
+
33
+ /**
34
+ * Quarters
35
+ */
36
+ .#{$namespace}one-quarter { width:25%; }
37
+ .#{$namespace}two-quarters { @extend .#{$namespace}one-half; }
38
+ .#{$namespace}three-quarters { width:75%; }
39
+
40
+
41
+ /**
42
+ * Fifths
43
+ */
44
+ .#{$namespace}one-fifth { width:20%; }
45
+ .#{$namespace}two-fifths { width:40%; }
46
+ .#{$namespace}three-fifths { width:60%; }
47
+ .#{$namespace}four-fifths { width:80%; }
48
+
49
+
50
+ /**
51
+ * Sixths
52
+ */
53
+ .#{$namespace}one-sixth { width:16.666%; }
54
+ .#{$namespace}two-sixths { @extend .#{$namespace}one-third; }
55
+ .#{$namespace}three-sixths { @extend .#{$namespace}one-half; }
56
+ .#{$namespace}four-sixths { @extend .#{$namespace}two-thirds; }
57
+ .#{$namespace}five-sixths { width:83.333%; }
58
+
59
+
60
+ /**
61
+ * Eighths
62
+ */
63
+ .#{$namespace}one-eighth { width:12.5%; }
64
+ .#{$namespace}two-eighths { @extend .#{$namespace}one-quarter; }
65
+ .#{$namespace}three-eighths { width:37.5%; }
66
+ .#{$namespace}four-eighths { @extend .#{$namespace}one-half; }
67
+ .#{$namespace}five-eighths { width:62.5%; }
68
+ .#{$namespace}six-eighths { @extend .#{$namespace}three-quarters; }
69
+ .#{$namespace}seven-eighths { width:87.5%; }
70
+
71
+
72
+ /**
73
+ * Tenths
74
+ */
75
+ .#{$namespace}one-tenth { width:10%; }
76
+ .#{$namespace}two-tenths { @extend .#{$namespace}one-fifth; }
77
+ .#{$namespace}three-tenths { width:30%; }
78
+ .#{$namespace}four-tenths { @extend .#{$namespace}two-fifths; }
79
+ .#{$namespace}five-tenths { @extend .#{$namespace}one-half; }
80
+ .#{$namespace}six-tenths { @extend .#{$namespace}three-fifths; }
81
+ .#{$namespace}seven-tenths { width:70%; }
82
+ .#{$namespace}eight-tenths { @extend .#{$namespace}four-fifths; }
83
+ .#{$namespace}nine-tenths { width:90%; }
84
+
85
+
86
+ /**
87
+ * Twelfths
88
+ */
89
+ .#{$namespace}one-twelfth { width:8.333%; }
90
+ .#{$namespace}two-twelfths { @extend .#{$namespace}one-sixth; }
91
+ .#{$namespace}three-twelfths { @extend .#{$namespace}one-quarter; }
92
+ .#{$namespace}four-twelfths { @extend .#{$namespace}one-third; }
93
+ .#{$namespace}five-twelfths { width:41.666% }
94
+ .#{$namespace}six-twelfths { @extend .#{$namespace}one-half; }
95
+ .#{$namespace}seven-twelfths { width:58.333%; }
96
+ .#{$namespace}eight-twelfths { @extend .#{$namespace}two-thirds; }
97
+ .#{$namespace}nine-twelfths { @extend .#{$namespace}three-quarters; }
98
+ .#{$namespace}ten-twelfths { @extend .#{$namespace}five-sixths; }
99
+ .#{$namespace}eleven-twelfths { width:91.666%; }
100
+ }
101
+
102
+ @include grid-setup();
15
103
 
16
- /**
17
- * Halves
18
- */
19
- .one-half { width:50%; }
20
-
21
-
22
- /**
23
- * Thirds
24
- */
25
- .one-third { width:33.333%; }
26
- .two-thirds { width:66.666%; }
27
-
28
-
29
- /**
30
- * Quarters
31
- */
32
- .one-quarter { width:25%; }
33
- .two-quarters { @extend .one-half; }
34
- .three-quarters { width:75%; }
35
-
36
-
37
- /**
38
- * Fifths
39
- */
40
- .one-fifth { width:20%; }
41
- .two-fifths { width:40%; }
42
- .three-fifths { width:60%; }
43
- .four-fifths { width:80%; }
44
-
45
-
46
- /**
47
- * Sixths
48
- */
49
- .one-sixth { width:16.666%; }
50
- .two-sixths { @extend .one-third; }
51
- .three-sixths { @extend .one-half; }
52
- .four-sixths { @extend .two-thirds; }
53
- .five-sixths { width:83.333%; }
54
-
55
-
56
- /**
57
- * Eighths
58
- */
59
- .one-eighth { width:12.5%; }
60
- .two-eighths { @extend .one-quarter; }
61
- .three-eighths { width:37.5%; }
62
- .four-eighths { @extend .one-half; }
63
- .five-eighths { width:62.5%; }
64
- .six-eighths { @extend .three-quarters; }
65
- .seven-eighths { width:87.5%; }
66
-
67
-
68
- /**
69
- * Tenths
70
- */
71
- .one-tenth { width:10%; }
72
- .two-tenths { @extend .one-fifth; }
73
- .three-tenths { width:30%; }
74
- .four-tenths { @extend .two-fifths; }
75
- .five-tenths { @extend .one-half; }
76
- .six-tenths { @extend .three-fifths; }
77
- .seven-tenths { width:70%; }
78
- .eight-tenths { @extend .four-fifths; }
79
- .nine-tenths { width:90%; }
80
-
81
-
82
- /**
83
- * Twelfths
84
- */
85
- .one-twelfth { width:8.333%; }
86
- .two-twelfths { @extend .one-sixth; }
87
- .three-twelfths { @extend .one-quarter; }
88
- .four-twelfths { @extend .one-third; }
89
- .five-twelfths { width:41.666% }
90
- .six-twelfths { @extend .one-half; }
91
- .seven-twelfths { width:58.333%; }
92
- .eight-twelfths { @extend .two-thirds; }
93
- .nine-twelfths { @extend .three-quarters; }
94
- .ten-twelfths { @extend .five-sixths; }
95
- .eleven-twelfths { width:91.666%; }
96
104
 
97
105
 
98
106
  /**
99
107
  * If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
100
108
  * access to these classes. You can define at which breakpoing you’d like an
101
109
  * element to be a certain size, e.g.:
102
- *
110
+ *
103
111
  * `<div class="g one-quarter lap-one-half palm-one-whole"> ... </div>`
104
- *
112
+ *
105
113
  * This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
106
114
  * horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
107
115
  * at ‘mobile’ sizes.
108
- *
116
+ *
109
117
  * Demo: jsfiddle.net/inuitcss/WS4Ge
110
- *
118
+ *
111
119
  */
112
120
 
113
121
  @if $responsive == true{
114
122
 
115
123
  @include media-query(palm){
116
-
117
- .palm-one-whole { width:100%; }
118
-
119
- .palm-one-half { width:50%; }
120
-
121
- .palm-one-third { width:33.333%; }
122
- .palm-two-thirds { width:66.666%; }
123
-
124
- .palm-one-quarter { width:25%; }
125
- .palm-two-quarters { @extend .palm-one-half; }
126
- .palm-three-quarters { width:75%; }
127
-
128
- .palm-one-fifth { width:20%; }
129
- .palm-two-fifths { width:40%; }
130
- .palm-three-fifths { width:60%; }
131
- .palm-four-fifths { width:80%; }
132
-
133
- .palm-one-sixth { width:16.666%; }
134
- .palm-two-sixths { @extend .palm-one-third; }
135
- .palm-three-sixths { @extend .palm-one-half; }
136
- .palm-four-sixths { @extend .palm-two-thirds; }
137
- .palm-five-sixths { width:83.333%; }
138
-
139
- .palm-one-eighth { width:12.5%; }
140
- .palm-two-eighths { @extend .palm-one-quarter; }
141
- .palm-three-eighths { width:37.5%; }
142
- .palm-four-eighths { @extend .palm-one-half; }
143
- .palm-five-eighths { width:62.5%; }
144
- .palm-six-eighths { @extend .palm-three-quarters; }
145
- .palm-seven-eighths { width:87.5%; }
146
-
147
- .palm-one-tenth { width:10%; }
148
- .palm-two-tenths { @extend .palm-one-fifth; }
149
- .palm-three-tenths { width:30%; }
150
- .palm-four-tenths { @extend .palm-two-fifths; }
151
- .palm-five-tenths { @extend .palm-one-half; }
152
- .palm-six-tenths { @extend .palm-three-fifths; }
153
- .palm-seven-tenths { width:70%; }
154
- .palm-eight-tenths { @extend .palm-four-fifths; }
155
- .palm-nine-tenths { width:90%; }
156
-
157
- .palm-one-twelfth { width:8.333%; }
158
- .palm-two-twelfths { @extend .palm-one-sixth; }
159
- .palm-three-twelfths { @extend .palm-one-quarter; }
160
- .palm-four-twelfths { @extend .palm-one-third; }
161
- .palm-five-twelfths { width:41.666% }
162
- .palm-six-twelfths { @extend .palm-one-half; }
163
- .palm-seven-twelfths { width:58.333%; }
164
- .palm-eight-twelfths { @extend .palm-two-thirds; }
165
- .palm-nine-twelfths { @extend .palm-three-quarters; }
166
- .palm-ten-twelfths { @extend .palm-five-sixths; }
167
- .palm-eleven-twelfths { width:91.666%; }
168
-
169
- }/* end palm */
124
+ @include grid-setup("palm-");
125
+ }
170
126
 
171
127
  @include media-query(lap){
172
-
173
- .lap-one-whole { width:100%; }
174
-
175
- .lap-one-half { width:50%; }
176
-
177
- .lap-one-third { width:33.333%; }
178
- .lap-two-thirds { width:66.666%; }
179
-
180
- .lap-one-quarter { width:25%; }
181
- .lap-two-quarters { @extend .lap-one-half; }
182
- .lap-three-quarters { width:75%; }
183
-
184
- .lap-one-fifth { width:20%; }
185
- .lap-two-fifths { width:40%; }
186
- .lap-three-fifths { width:60%; }
187
- .lap-four-fifths { width:80%; }
188
-
189
- .lap-one-sixth { width:16.666%; }
190
- .lap-two-sixths { @extend .lap-one-third; }
191
- .lap-three-sixths { @extend .lap-one-half; }
192
- .lap-four-sixths { @extend .lap-two-thirds; }
193
- .lap-five-sixths { width:83.333%; }
194
-
195
- .lap-one-eighth { width:12.5%; }
196
- .lap-two-eighths { @extend .lap-one-quarter; }
197
- .lap-three-eighths { width:37.5%; }
198
- .lap-four-eighths { @extend .lap-one-half; }
199
- .lap-five-eighths { width:62.5%; }
200
- .lap-six-eighths { @extend .lap-three-quarters; }
201
- .lap-seven-eighths { width:87.5%; }
202
-
203
- .lap-one-tenth { width:10%; }
204
- .lap-two-tenths { @extend .lap-one-fifth; }
205
- .lap-three-tenths { width:30%; }
206
- .lap-four-tenths { @extend .lap-two-fifths; }
207
- .lap-five-tenths { @extend .lap-one-half; }
208
- .lap-six-tenths { @extend .lap-three-fifths; }
209
- .lap-seven-tenths { width:70%; }
210
- .lap-eight-tenths { @extend .lap-four-fifths; }
211
- .lap-nine-tenths { width:90%; }
212
-
213
- .lap-one-twelfth { width:8.333%; }
214
- .lap-two-twelfths { @extend .lap-one-sixth; }
215
- .lap-three-twelfths { @extend .lap-one-quarter; }
216
- .lap-four-twelfths { @extend .lap-one-third; }
217
- .lap-five-twelfths { width:41.666% }
218
- .lap-six-twelfths { @extend .lap-one-half; }
219
- .lap-seven-twelfths { width:58.333%; }
220
- .lap-eight-twelfths { @extend .lap-two-thirds; }
221
- .lap-nine-twelfths { @extend .lap-three-quarters; }
222
- .lap-ten-twelfths { @extend .lap-five-sixths; }
223
- .lap-eleven-twelfths { width:91.666%; }
224
-
225
- }/* end lap */
128
+ @include grid-setup("lap-");
129
+ }
226
130
 
227
131
  @include media-query(portable){
228
-
229
- .portable-one-whole { width:100%; }
230
-
231
- .portable-one-half { width:50%; }
232
-
233
- .portable-one-third { width:33.333%; }
234
- .portable-two-thirds { width:66.666%; }
235
-
236
- .portable-one-quarter { width:25%; }
237
- .portable-two-quarters { @extend .portable-one-half; }
238
- .portable-three-quarters { width:75%; }
239
-
240
- .portable-one-fifth { width:20%; }
241
- .portable-two-fifths { width:40%; }
242
- .portable-three-fifths { width:60%; }
243
- .portable-four-fifths { width:80%; }
244
-
245
- .portable-one-sixth { width:16.666%; }
246
- .portable-two-sixths { @extend .portable-one-third; }
247
- .portable-three-sixths { @extend .portable-one-half; }
248
- .portable-four-sixths { @extend .portable-two-thirds; }
249
- .portable-five-sixths { width:83.333%; }
250
-
251
- .portable-one-eighth { width:12.5%; }
252
- .portable-two-eighths { @extend .portable-one-quarter; }
253
- .portable-three-eighths { width:37.5%; }
254
- .portable-four-eighths { @extend .portable-one-half; }
255
- .portable-five-eighths { width:62.5%; }
256
- .portable-six-eighths { @extend .portable-three-quarters; }
257
- .portable-seven-eighths { width:87.5%; }
258
-
259
- .portable-one-tenth { width:10%; }
260
- .portable-two-tenths { @extend .portable-one-fifth; }
261
- .portable-three-tenths { width:30%; }
262
- .portable-four-tenths { @extend .portable-two-fifths; }
263
- .portable-five-tenths { @extend .portable-one-half; }
264
- .portable-six-tenths { @extend .portable-three-fifths; }
265
- .portable-seven-tenths { width:70%; }
266
- .portable-eight-tenths { @extend .portable-four-fifths; }
267
- .portable-nine-tenths { width:90%; }
268
-
269
- .portable-one-twelfth { width:8.333%; }
270
- .portable-two-twelfths { @extend .portable-one-sixth; }
271
- .portable-three-twelfths { @extend .portable-one-quarter; }
272
- .portable-four-twelfths { @extend .portable-one-third; }
273
- .portable-five-twelfths { width:41.666% }
274
- .portable-six-twelfths { @extend .portable-one-half; }
275
- .portable-seven-twelfths { width:58.333%; }
276
- .portable-eight-twelfths { @extend .portable-two-thirds; }
277
- .portable-nine-twelfths { @extend .portable-three-quarters; }
278
- .portable-ten-twelfths { @extend .portable-five-sixths; }
279
- .portable-eleven-twelfths { width:91.666%; }
280
-
281
- }/* end portable */
132
+ @include grid-setup("portable-");
133
+ }
282
134
 
283
135
  @include media-query(desk){
284
-
285
- .desk-one-whole { width:100%; }
286
-
287
- .desk-one-half { width:50%; }
288
-
289
- .desk-one-third { width:33.333%; }
290
- .desk-two-thirds { width:66.666%; }
291
-
292
- .desk-one-quarter { width:25%; }
293
- .desk-two-quarters { @extend .desk-one-half; }
294
- .desk-three-quarters { width:75%; }
295
-
296
- .desk-one-fifth { width:20%; }
297
- .desk-two-fifths { width:40%; }
298
- .desk-three-fifths { width:60%; }
299
- .desk-four-fifths { width:80%; }
300
-
301
- .desk-one-sixth { width:16.666%; }
302
- .desk-two-sixths { @extend .desk-one-third; }
303
- .desk-three-sixths { @extend .desk-one-half; }
304
- .desk-four-sixths { @extend .desk-two-thirds; }
305
- .desk-five-sixths { width:83.333%; }
306
-
307
- .desk-one-eighth { width:12.5%; }
308
- .desk-two-eighths { @extend .desk-one-quarter; }
309
- .desk-three-eighths { width:37.5%; }
310
- .desk-four-eighths { @extend .desk-one-half; }
311
- .desk-five-eighths { width:62.5%; }
312
- .desk-six-eighths { @extend .desk-three-quarters; }
313
- .desk-seven-eighths { width:87.5%; }
314
-
315
- .desk-one-tenth { width:10%; }
316
- .desk-two-tenths { @extend .desk-one-fifth; }
317
- .desk-three-tenths { width:30%; }
318
- .desk-four-tenths { @extend .desk-two-fifths; }
319
- .desk-five-tenths { @extend .desk-one-half; }
320
- .desk-six-tenths { @extend .desk-three-fifths; }
321
- .desk-seven-tenths { width:70%; }
322
- .desk-eight-tenths { @extend .desk-four-fifths; }
323
- .desk-nine-tenths { width:90%; }
324
-
325
- .desk-one-twelfth { width:8.333%; }
326
- .desk-two-twelfths { @extend .desk-one-sixth; }
327
- .desk-three-twelfths { @extend .desk-one-quarter; }
328
- .desk-four-twelfths { @extend .desk-one-third; }
329
- .desk-five-twelfths { width:41.666% }
330
- .desk-six-twelfths { @extend .desk-one-half; }
331
- .desk-seven-twelfths { width:58.333%; }
332
- .desk-eight-twelfths { @extend .desk-two-thirds; }
333
- .desk-nine-twelfths { @extend .desk-three-quarters; }
334
- .desk-ten-twelfths { @extend .desk-five-sixths; }
335
- .desk-eleven-twelfths { width:91.666%; }
336
-
337
- }/* end desk */
136
+ @include grid-setup("desk-");
137
+ }
338
138
 
339
139
  } /* endif */
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: compass-inuit
3
3
  version: !ruby/object:Gem::Version
4
- version: 4.3.3
4
+ version: 4.3.4.1
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors: