piecss 0.6.0 → 0.7.0
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.
- checksums.yaml +4 -4
- data/sass/piecss/_behavior.scss +5 -0
- data/sass/piecss/_settings.scss +2 -2
- data/sass/piecss/_utilities.scss +2 -4
- data/sass/piecss/behavior/anchor/_anchor.scss +7 -21
- data/sass/piecss/behavior/anchor/_settings.scss +11 -0
- data/sass/piecss/behavior/base/_base.scss +0 -1
- data/sass/piecss/behavior/base/_collection.scss +3 -3
- data/sass/piecss/behavior/base/_settings.scss +1 -1
- data/sass/piecss/behavior/debug/_behavior.scss +22 -0
- data/sass/piecss/behavior/debug/_mixins.scss +127 -0
- data/sass/piecss/behavior/debug/_settings.scss +81 -0
- data/sass/piecss/behavior/is/_collection.scss +57 -0
- data/sass/piecss/behavior/is/_settings.scss +12 -0
- data/sass/piecss/behavior/layout/_bleed.scss +23 -0
- data/sass/piecss/behavior/layout/_chain.scss +45 -0
- data/sass/piecss/behavior/layout/_column.scss +14 -0
- data/sass/piecss/behavior/layout/_grid.scss +13 -3
- data/sass/piecss/behavior/layout/_gutters.scss +32 -0
- data/sass/piecss/behavior/layout/_layout.scss +29 -29
- data/sass/piecss/behavior/layout/_leader.scss +57 -0
- data/sass/piecss/behavior/layout/_trailer.scss +57 -0
- data/sass/piecss/behavior/layout/_wings.scss +122 -0
- data/sass/piecss/behavior/list/_list.scss +134 -175
- data/sass/piecss/behavior/list/_settings.scss +9 -31
- data/sass/piecss/settings/_colour.scss +10 -1
- data/sass/piecss/settings/_font.scss +0 -1
- data/sass/piecss/settings/_grid.scss +119 -0
- data/sass/piecss/settings/_legacy.scss +24 -0
- data/sass/piecss/settings/_rhythm.scss +0 -10
- data/sass/piecss/utilities/_collection.scss +5 -1
- data/sass/piecss/utilities/_colour.scss +3 -3
- data/sass/piecss/utilities/_grid.scss +355 -0
- data/sass/piecss/utilities/_legacy.scss +42 -0
- data/sass/piecss/utilities/_miscellaneous.scss +8 -82
- data/sass/piecss/utilities/_rhythm.scss +7 -36
- data/sass/piecss/utilities/_typography.scss +8 -98
- data/templates/project/_sets.scss +2 -3
- data/templates/project/_settings.scss +26 -27
- data/{sass/piecss/_behavior.css → templates/project/assets/css/screen.css} +100 -5
- data/templates/project/assets/images/piecss.png +0 -0
- data/templates/project/assets/images/piecss.svg +25 -0
- data/templates/project/examples.html +2 -2
- data/templates/project/screen.scss +8 -11
- metadata +21 -61
- data/sass/piecss/_behavior.css.map +0 -7
- data/sass/piecss/_settings.css +0 -2
- data/sass/piecss/_settings.css.map +0 -7
- data/sass/piecss/_utilities.css +0 -3
- data/sass/piecss/_utilities.css.map +0 -7
- data/sass/piecss/behavior/layout/_rhythm.scss +0 -21
- data/sass/piecss/settings/_breakpoint.css +0 -70
- data/sass/piecss/settings/_colour.css +0 -2
- data/sass/piecss/settings/_colour.css.map +0 -7
- data/sass/piecss/settings/_constants.css +0 -2
- data/sass/piecss/settings/_constants.css.map +0 -7
- data/sass/piecss/settings/_fallback.css +0 -2
- data/sass/piecss/settings/_fallback.css.map +0 -7
- data/sass/piecss/settings/_fallback.scss +0 -15
- data/sass/piecss/settings/_font.css +0 -2
- data/sass/piecss/settings/_font.css.map +0 -7
- data/sass/piecss/settings/_layout.css +0 -60
- data/sass/piecss/settings/_layout.scss +0 -168
- data/sass/piecss/settings/_miscellaneous.css +0 -2
- data/sass/piecss/settings/_miscellaneous.css.map +0 -7
- data/sass/piecss/settings/_rhythm.css +0 -2
- data/sass/piecss/settings/_rhythm.css.map +0 -7
- data/sass/piecss/settings/_typography.css +0 -2
- data/sass/piecss/settings/_typography.css.map +0 -7
- data/sass/piecss/settings/_unit.css +0 -2
- data/sass/piecss/settings/_unit.css.map +0 -7
- data/sass/piecss/settings/fonts/_verdana.scss +0 -40
- data/sass/piecss/utilities/_breakpoint.css +0 -2
- data/sass/piecss/utilities/_breakpoint.css.map +0 -7
- data/sass/piecss/utilities/_cache.css +0 -2
- data/sass/piecss/utilities/_cache.css.map +0 -7
- data/sass/piecss/utilities/_cache.scss +0 -78
- data/sass/piecss/utilities/_colour.css +0 -2
- data/sass/piecss/utilities/_colour.css.map +0 -7
- data/sass/piecss/utilities/_element.css +0 -2
- data/sass/piecss/utilities/_element.css.map +0 -7
- data/sass/piecss/utilities/_image.css +0 -2
- data/sass/piecss/utilities/_image.css.map +0 -7
- data/sass/piecss/utilities/_layout.css +0 -2
- data/sass/piecss/utilities/_layout.css.map +0 -7
- data/sass/piecss/utilities/_layout.scss +0 -570
- data/sass/piecss/utilities/_list.css +0 -2
- data/sass/piecss/utilities/_list.css.map +0 -7
- data/sass/piecss/utilities/_list.scss +0 -26
- data/sass/piecss/utilities/_miscellaneous.css +0 -2
- data/sass/piecss/utilities/_miscellaneous.css.map +0 -7
- data/sass/piecss/utilities/_rhythm.css +0 -2
- data/sass/piecss/utilities/_rhythm.css.map +0 -7
- data/sass/piecss/utilities/_side.css +0 -2
- data/sass/piecss/utilities/_side.css.map +0 -7
- data/sass/piecss/utilities/_side.scss +0 -370
- data/sass/piecss/utilities/_string.css +0 -2
- data/sass/piecss/utilities/_string.css.map +0 -7
- data/sass/piecss/utilities/_svg.css +0 -2
- data/sass/piecss/utilities/_svg.css.map +0 -7
- data/sass/piecss/utilities/_typography.css +0 -2
- data/sass/piecss/utilities/_typography.css.map +0 -7
- data/sass/piecss/utilities/_unit.css +0 -2
- data/sass/piecss/utilities/_unit.css.map +0 -7
@@ -1,570 +0,0 @@
|
|
1
|
-
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
2
|
-
|
3
|
-
|
4
|
-
// Content
|
5
|
-
//
|
6
|
-
// 1. Functions
|
7
|
-
// percentage
|
8
|
-
// fraction-to-text
|
9
|
-
// gutters
|
10
|
-
// get-layout
|
11
|
-
// get-layout-property
|
12
|
-
// get-layout-columns
|
13
|
-
// get-layout-gutter-width
|
14
|
-
// get-layout-rhythm
|
15
|
-
// get-layout-debug-color
|
16
|
-
|
17
|
-
// 2. Mixins
|
18
|
-
// 2a. Columns
|
19
|
-
// column
|
20
|
-
// column-behavior
|
21
|
-
// column-width
|
22
|
-
// gutters
|
23
|
-
// 2b. Containers
|
24
|
-
// root
|
25
|
-
// bleed
|
26
|
-
// container-behavior
|
27
|
-
// 2c. Source Ordering
|
28
|
-
// move
|
29
|
-
// pull
|
30
|
-
// push
|
31
|
-
// reset-source-order
|
32
|
-
|
33
|
-
|
34
|
-
// 1. FUNCTIONS
|
35
|
-
|
36
|
-
|
37
|
-
///
|
38
|
-
/// Convert a fraction to a percentage.
|
39
|
-
///
|
40
|
-
/// @deprecated
|
41
|
-
///
|
42
|
-
/// @param {Number} $fraction (1/3) - A fraction, e.g. 1/2
|
43
|
-
///
|
44
|
-
/// @return {Number} - The resulting percentage value
|
45
|
-
///
|
46
|
-
|
47
|
-
@function fraction-to-percentage($fraction: 1/3) {
|
48
|
-
@return percentage($fraction);
|
49
|
-
}
|
50
|
-
|
51
|
-
|
52
|
-
///
|
53
|
-
/// Convert a fraction to a word.
|
54
|
-
/// Used to build style rules based on column widths.
|
55
|
-
/// For values up to #/16.
|
56
|
-
///
|
57
|
-
/// @example scss
|
58
|
-
/// .#{fraction-to-text(1/2)} {
|
59
|
-
/// // Column properties }
|
60
|
-
/// // Output:
|
61
|
-
/// .half {
|
62
|
-
/// // Column properties }
|
63
|
-
///
|
64
|
-
/// @since 0.1
|
65
|
-
///
|
66
|
-
/// @param {Number} $fraction - A fraction, e.g. 1/2
|
67
|
-
///
|
68
|
-
/// @return {String}
|
69
|
-
///
|
70
|
-
|
71
|
-
@function fraction-to-text($fraction) {
|
72
|
-
|
73
|
-
@if $fraction == 1/1 { @return "full"; }
|
74
|
-
@if $fraction == 1/2 { @return "half"; }
|
75
|
-
@if $fraction == 1/3 { @return "third"; }
|
76
|
-
@if $fraction == 1/4 { @return "fourth"; }
|
77
|
-
@if $fraction == 1/5 { @return "fifth"; }
|
78
|
-
@if $fraction == 1/6 { @return "sixth"; }
|
79
|
-
@if $fraction == 1/7 { @return "seventh"; }
|
80
|
-
@if $fraction == 1/8 { @return "eighth"; }
|
81
|
-
@if $fraction == 1/9 { @return "ninth"; }
|
82
|
-
@if $fraction == 1/10 { @return "tenth"; }
|
83
|
-
@if $fraction == 1/11 { @return "eleventh"; }
|
84
|
-
@if $fraction == 1/12 { @return "twelfth"; }
|
85
|
-
@if $fraction == 1/13 { @return "thirteenth"; }
|
86
|
-
@if $fraction == 1/14 { @return "fourteenth"; }
|
87
|
-
@if $fraction == 1/15 { @return "fifteenth"; }
|
88
|
-
@if $fraction == 1/16 { @return "sixteenth"; }
|
89
|
-
@if $fraction == 2/3 { @return "two-third"; }
|
90
|
-
@if $fraction == 3/4 { @return "three-fourth"; }
|
91
|
-
@if $fraction == 2/5 { @return "two-fifth"; }
|
92
|
-
@if $fraction == 3/5 { @return "three-fifth"; }
|
93
|
-
@if $fraction == 4/5 { @return "four-fifth"; }
|
94
|
-
@if $fraction == 5/6 { @return "five-sixth"; }
|
95
|
-
@if $fraction == 2/7 { @return "two-seventh"; }
|
96
|
-
@if $fraction == 3/7 { @return "three-seventh"; }
|
97
|
-
@if $fraction == 4/7 { @return "four-seventh"; }
|
98
|
-
@if $fraction == 5/7 { @return "five-seventh"; }
|
99
|
-
@if $fraction == 6/7 { @return "six-seventh"; }
|
100
|
-
@if $fraction == 3/8 { @return "three-eighth"; }
|
101
|
-
@if $fraction == 5/8 { @return "five-eighth"; }
|
102
|
-
@if $fraction == 7/8 { @return "seven-eighth"; }
|
103
|
-
@if $fraction == 2/9 { @return "two-ninth"; }
|
104
|
-
@if $fraction == 4/9 { @return "four-ninth"; }
|
105
|
-
@if $fraction == 5/9 { @return "five-ninth"; }
|
106
|
-
@if $fraction == 7/9 { @return "seven-ninth"; }
|
107
|
-
@if $fraction == 8/9 { @return "eight-ninth"; }
|
108
|
-
@if $fraction == 3/10 { @return "three-tenth"; }
|
109
|
-
@if $fraction == 7/10 { @return "seven-tenth"; }
|
110
|
-
@if $fraction == 9/10 { @return "nine-tenth"; }
|
111
|
-
@if $fraction == 2/11 { @return "two-eleventh"; }
|
112
|
-
@if $fraction == 3/11 { @return "three-eleventh"; }
|
113
|
-
@if $fraction == 4/11 { @return "four-eleventh"; }
|
114
|
-
@if $fraction == 5/11 { @return "five-eleventh"; }
|
115
|
-
@if $fraction == 6/11 { @return "six-eleventh"; }
|
116
|
-
@if $fraction == 7/11 { @return "seven-eleventh"; }
|
117
|
-
@if $fraction == 8/11 { @return "eight-eleventh"; }
|
118
|
-
@if $fraction == 9/11 { @return "nine-eleventh"; }
|
119
|
-
@if $fraction == 10/11 { @return "ten-eleventh"; }
|
120
|
-
@if $fraction == 5/12 { @return "five-twelfth"; }
|
121
|
-
@if $fraction == 7/12 { @return "seven-twelfth"; }
|
122
|
-
@if $fraction == 9/12 { @return "nine-twelfth"; }
|
123
|
-
@if $fraction == 11/12 { @return "eleven-twelfth"; }
|
124
|
-
@if $fraction == 2/13 { @return "two-thirteenth"; }
|
125
|
-
@if $fraction == 3/13 { @return "three-thirteenth"; }
|
126
|
-
@if $fraction == 4/13 { @return "four-thirteenth"; }
|
127
|
-
@if $fraction == 5/13 { @return "five-thirteenth"; }
|
128
|
-
@if $fraction == 6/13 { @return "six-thirteenth"; }
|
129
|
-
@if $fraction == 7/13 { @return "seven-thirteenth"; }
|
130
|
-
@if $fraction == 8/13 { @return "eight-thirteenth"; }
|
131
|
-
@if $fraction == 9/13 { @return "nine-thirteenth"; }
|
132
|
-
@if $fraction == 10/13 { @return "ten-thirteenth"; }
|
133
|
-
@if $fraction == 11/13 { @return "twelve-thirteenth"; }
|
134
|
-
@if $fraction == 12/13 { @return "thirteen-thirteenth"; }
|
135
|
-
@if $fraction == 3/14 { @return "three-fourteenth"; }
|
136
|
-
@if $fraction == 5/14 { @return "five-fourteenth"; }
|
137
|
-
@if $fraction == 9/14 { @return "nine-fourteenth"; }
|
138
|
-
@if $fraction == 11/14 { @return "eleven-fourteenth"; }
|
139
|
-
@if $fraction == 13/14 { @return "thirteen-fourteenth"; }
|
140
|
-
@if $fraction == 2/15 { @return "two-fifteenth"; }
|
141
|
-
@if $fraction == 4/15 { @return "four-fifteenth"; }
|
142
|
-
@if $fraction == 7/15 { @return "seven-fifteenth"; }
|
143
|
-
@if $fraction == 8/15 { @return "eight-fifteenth"; }
|
144
|
-
@if $fraction == 11/15 { @return "eleven-fifteenth"; }
|
145
|
-
@if $fraction == 13/15 { @return "thirteen-fifteenth"; }
|
146
|
-
@if $fraction == 14/15 { @return "fourteen-fifteenth"; }
|
147
|
-
@if $fraction == 3/16 { @return "three-sixteenth"; }
|
148
|
-
@if $fraction == 5/16 { @return "five-sixteenth"; }
|
149
|
-
@if $fraction == 7/16 { @return "seven-sixteenth"; }
|
150
|
-
@if $fraction == 9/16 { @return "nine-sixteenth"; }
|
151
|
-
@if $fraction == 11/16 { @return "eleven-sixteenth"; }
|
152
|
-
@if $fraction == 13/16 { @return "thirteen-sixteenth"; }
|
153
|
-
@if $fraction == 15/16 { @return "sixteen-sixteenth"; }
|
154
|
-
|
155
|
-
@return "full";
|
156
|
-
}
|
157
|
-
|
158
|
-
///
|
159
|
-
/// Return a value based on the gutter-width. The gutter width is set as a property of the layouts map.
|
160
|
-
/// If no breakpoint is set, the function will return the default gutter width.
|
161
|
-
///
|
162
|
-
/// @param {Arglist} $args - An argument list, may contain 2 values (a fraction and/or a valid breakpoint)
|
163
|
-
///
|
164
|
-
/// @return {Number} - The resulting value in px
|
165
|
-
///
|
166
|
-
|
167
|
-
@function gutter($args...) {
|
168
|
-
|
169
|
-
$_fraction: 1/2;
|
170
|
-
$_breakpoint: false;
|
171
|
-
|
172
|
-
// Process arguments
|
173
|
-
@if length($args) {
|
174
|
-
@each $var in $args {
|
175
|
-
@if type-of($var) == number {
|
176
|
-
$_fraction: $var;
|
177
|
-
}
|
178
|
-
@if type-of($var) == list {
|
179
|
-
$_breakpoint: $var;
|
180
|
-
}
|
181
|
-
}
|
182
|
-
}
|
183
|
-
|
184
|
-
// Retrieve the gutter-width from the settings, but check if one is set in layouts and take that in stead
|
185
|
-
$_gutter-width: $gutter-width;
|
186
|
-
@if $_breakpoint {
|
187
|
-
$_gutter-width: if(get-layout-gutter-width(get-layout($_breakpoint)), get-layout-gutter-width(get-layout($_breakpoint)), $_gutter-width);
|
188
|
-
}
|
189
|
-
|
190
|
-
|
191
|
-
@return $_fraction * $gutter-width;
|
192
|
-
}
|
193
|
-
|
194
|
-
///
|
195
|
-
/// Get layout settings from a layout map
|
196
|
-
///
|
197
|
-
///
|
198
|
-
/// @param {String} $breakpoints - A valid breakpoint
|
199
|
-
/// @param {Map} $layouts ($layouts) - A layout map
|
200
|
-
///
|
201
|
-
/// @return {Map} - A breakpoint global layout, or a breakpoint nested page layout from [$layouts map](./#variable-layouts)
|
202
|
-
///
|
203
|
-
|
204
|
-
@function get-layout($breakpoint, $layouts: $layouts) {
|
205
|
-
|
206
|
-
@if not( map-has-key($layouts, $breakpoint) ) {
|
207
|
-
@error "Unknown breakpoint: #{$breakpoint}";
|
208
|
-
}
|
209
|
-
|
210
|
-
@return map-get($layouts, $breakpoint);
|
211
|
-
}
|
212
|
-
|
213
|
-
///
|
214
|
-
/// Retrieves a property setting for a specific breakpoint
|
215
|
-
///
|
216
|
-
/// @since 1.0
|
217
|
-
///
|
218
|
-
/// @example
|
219
|
-
/// $columns: get-layout-property($columns);
|
220
|
-
///
|
221
|
-
/// @param {String} $property - The layout-map property to retrieve
|
222
|
-
/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
|
223
|
-
/// @param {Map} $layouts ($layouts) - A layout map
|
224
|
-
///
|
225
|
-
/// @return {*}
|
226
|
-
///
|
227
|
-
|
228
|
-
@function get-layout-property($property, $breakpoint: false, $layouts: $layouts) {
|
229
|
-
|
230
|
-
$_value: null;
|
231
|
-
|
232
|
-
// Retrieve the layout – default values are not nested in a breakpoint
|
233
|
-
$_layout: $layouts;
|
234
|
-
|
235
|
-
@if $breakpoint and map-has-key($layouts, $breakpoint) {
|
236
|
-
$_layout: get-layout($breakpoint);
|
237
|
-
}
|
238
|
-
|
239
|
-
@if map-has-key($_layout, $property) {
|
240
|
-
$_value: map-get($_layout, $property);
|
241
|
-
}
|
242
|
-
@else {
|
243
|
-
@error "Unknown layout property: #{$property}";
|
244
|
-
}
|
245
|
-
|
246
|
-
@return $_value;
|
247
|
-
}
|
248
|
-
|
249
|
-
///
|
250
|
-
/// Retrieves the column setting for a specific breakpoint
|
251
|
-
///
|
252
|
-
/// @since 1.0
|
253
|
-
///
|
254
|
-
/// @example
|
255
|
-
/// $columns: get-layout-columns();
|
256
|
-
///
|
257
|
-
/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
|
258
|
-
/// @param {Map} $layouts ($layouts) - A layout map
|
259
|
-
///
|
260
|
-
/// @since 1.0
|
261
|
-
///
|
262
|
-
|
263
|
-
@function get-layout-columns($breakpoint: false, $layouts: $layouts) {
|
264
|
-
@return get-layout-property("columns", $breakpoint);
|
265
|
-
}
|
266
|
-
|
267
|
-
///
|
268
|
-
/// Retrieves the gutter-width setting for a specific breakpoint
|
269
|
-
///
|
270
|
-
/// @since 1.0
|
271
|
-
///
|
272
|
-
/// @example
|
273
|
-
/// $gutter-width: get-layout-gutter-width();
|
274
|
-
///
|
275
|
-
/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
|
276
|
-
/// @param {Map} $layouts ($layouts) - A layout map
|
277
|
-
///
|
278
|
-
/// @since 1.0
|
279
|
-
///
|
280
|
-
|
281
|
-
@function get-layout-gutter-width($breakpoint: false, $layouts: $layouts) {
|
282
|
-
@return get-layout-property("gutter-width", $breakpoint);
|
283
|
-
}
|
284
|
-
|
285
|
-
|
286
|
-
///
|
287
|
-
/// Retrieves the rhythm settings for a specific breakpoint
|
288
|
-
///
|
289
|
-
/// @since 1.0
|
290
|
-
///
|
291
|
-
/// @example
|
292
|
-
/// $rhythm: get-layout-rhythm();
|
293
|
-
///
|
294
|
-
/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
|
295
|
-
/// @param {Map} $layouts ($layouts) - A layout map
|
296
|
-
///
|
297
|
-
/// @since 1.0
|
298
|
-
///
|
299
|
-
|
300
|
-
@function get-layout-rhythm($breakpoint: false, $layouts: $layouts) {
|
301
|
-
@return get-layout-property("rhythm", $breakpoint);
|
302
|
-
}
|
303
|
-
|
304
|
-
|
305
|
-
///
|
306
|
-
/// Retrieves the debug colour settings for a specific breakpoint
|
307
|
-
///
|
308
|
-
/// @since 1.0
|
309
|
-
///
|
310
|
-
/// @example
|
311
|
-
/// $debug-color: get-layout-debug-color();
|
312
|
-
///
|
313
|
-
/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
|
314
|
-
/// @param {Map} $layouts ($layouts) - A layout map
|
315
|
-
///
|
316
|
-
/// @since 1.0
|
317
|
-
///
|
318
|
-
|
319
|
-
@function get-layout-debug-color($breakpoint: false, $layouts: $layouts) {
|
320
|
-
@return get-layout-property("debug-color", $breakpoint);
|
321
|
-
}
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
// 2. MIXINS
|
326
|
-
|
327
|
-
|
328
|
-
///
|
329
|
-
/// Shorthand mixin for column.
|
330
|
-
/// Uses padding by default, can be overridden to use margins instead which is especially helpful when assigning backgrounds or borders.
|
331
|
-
///
|
332
|
-
/// @since 0.1
|
333
|
-
///
|
334
|
-
/// @param {Number} $fraction (1/1) - A fraction, e.g. 1/2
|
335
|
-
/// @param {Number | Bool} $apply-padding (1/2) - A fraction, e.g. 1/2, or false
|
336
|
-
/// @param {Number | Bool} $apply-margin (false) - A fraction, e.g. 1/2, or false
|
337
|
-
///
|
338
|
-
|
339
|
-
@mixin column($fraction: 1/1, $apply-padding: 1/2, $apply-margin: false) {
|
340
|
-
|
341
|
-
@include column-behavior();
|
342
|
-
@include column-width($fraction);
|
343
|
-
|
344
|
-
@if $apply-padding {
|
345
|
-
@include gutters($apply-padding);
|
346
|
-
}
|
347
|
-
|
348
|
-
@if $apply-margin {
|
349
|
-
@include gutters($apply-margin, true);
|
350
|
-
}
|
351
|
-
}
|
352
|
-
|
353
|
-
|
354
|
-
///
|
355
|
-
/// Mixin column-behavior: prepares an element to behave as a column. Widths must be set separately with [column-width](./#mixin-column-width).
|
356
|
-
///
|
357
|
-
/// @since 0.1
|
358
|
-
///
|
359
|
-
/// @param {Bool} $column-float (false) - If true, render columns as left floated block element. If false, render as inline-blocks.
|
360
|
-
/// @param {Bool | Number} $negative-right-margin (false) - If set, applies a negative right margin to force inline-blocks to render without gaps. Only use this if you cannot minify your markup.
|
361
|
-
///
|
362
|
-
|
363
|
-
@mixin column-behavior($column-float: $column-float, $negative-right-margin: $negative-right-margin) {
|
364
|
-
|
365
|
-
@if $column-float {
|
366
|
-
display: block;
|
367
|
-
float: left;
|
368
|
-
}
|
369
|
-
@else {
|
370
|
-
@include inline-block(top);
|
371
|
-
@if $negative-right-margin {
|
372
|
-
// scss-lint:disable ImportantRule
|
373
|
-
margin-right: $negative-right-margin !important;
|
374
|
-
// scss-lint:enable ImportantRule
|
375
|
-
}
|
376
|
-
}
|
377
|
-
}
|
378
|
-
|
379
|
-
|
380
|
-
///
|
381
|
-
/// Mixin column-width. If [$negative-right-margin]() is set, it will automatically remove if from columns that span the full width of their containers.
|
382
|
-
///
|
383
|
-
/// @since 0.1
|
384
|
-
///
|
385
|
-
/// @param {Number} $fraction (1/1) - A fraction, e.g. 1/2
|
386
|
-
///
|
387
|
-
|
388
|
-
@mixin column-width($fraction: $column-width-default) {
|
389
|
-
|
390
|
-
width: percentage($fraction);
|
391
|
-
|
392
|
-
// Remove negative margin on elements that span full width of their container
|
393
|
-
@if $fraction == 1/1 and $negative-right-margin {
|
394
|
-
margin-right: 0;
|
395
|
-
}
|
396
|
-
}
|
397
|
-
|
398
|
-
|
399
|
-
///
|
400
|
-
/// Mixes in gutter properties. Gutters are declared inside the column (padding) by default, on both sides. Can be overridden to use margins instead, which is helpful when assigning backgrounds or borders
|
401
|
-
///
|
402
|
-
/// @since 0.1
|
403
|
-
///
|
404
|
-
/// @param {Number} $fraction (1/2) - A fraction, e.g. 1/2
|
405
|
-
/// @param {Bool} $use-margin (false) - If true, will render gutters outside the column using margins
|
406
|
-
///
|
407
|
-
|
408
|
-
@mixin gutters($fraction: 1/2, $use-margin: false) {
|
409
|
-
|
410
|
-
$both: length($fraction);
|
411
|
-
|
412
|
-
$left: $fraction;
|
413
|
-
$right: $fraction;
|
414
|
-
|
415
|
-
@if $both > 1 {
|
416
|
-
$left: nth($fraction, 1);
|
417
|
-
$right: nth($fraction, 2);
|
418
|
-
}
|
419
|
-
|
420
|
-
@if ($use-margin) {
|
421
|
-
@if $left != false {
|
422
|
-
margin-left: $gutter-width * $left;
|
423
|
-
}
|
424
|
-
@if $right != false {
|
425
|
-
margin-right: $gutter-width * $right;
|
426
|
-
}
|
427
|
-
}
|
428
|
-
@else {
|
429
|
-
@if $left != false {
|
430
|
-
padding-left: $gutter-width * $left;
|
431
|
-
}
|
432
|
-
@if $right != false {
|
433
|
-
padding-right: $gutter-width * $right;
|
434
|
-
}
|
435
|
-
}
|
436
|
-
}
|
437
|
-
|
438
|
-
|
439
|
-
///
|
440
|
-
/// Fixes content width and aligns in viewport. [$root-position](./#variable-root-position) is defind in grid settings. Centers content inside the viewport by default.
|
441
|
-
///
|
442
|
-
/// @since 0.1
|
443
|
-
///
|
444
|
-
/// @param {Number} $root-max-width (72em) - The maximum width of your content
|
445
|
-
///
|
446
|
-
|
447
|
-
@mixin root($root-max-width: $root-max-width, $set-display: false) {
|
448
|
-
|
449
|
-
@if $root-position == center {
|
450
|
-
margin: 0 auto;
|
451
|
-
}
|
452
|
-
|
453
|
-
max-width: $root-max-width;
|
454
|
-
}
|
455
|
-
|
456
|
-
|
457
|
-
///
|
458
|
-
/// Use it to remove column spacing on columns
|
459
|
-
///
|
460
|
-
/// @since 0.1
|
461
|
-
///
|
462
|
-
/// @param {Bool} $use-margin (false)
|
463
|
-
///
|
464
|
-
|
465
|
-
@mixin container-behavior($use-margin: false) {
|
466
|
-
|
467
|
-
@if $use-margin {
|
468
|
-
margin-left: 0;
|
469
|
-
margin-right: 0;
|
470
|
-
}
|
471
|
-
@else {
|
472
|
-
padding-left: 0;
|
473
|
-
padding-right: 0;
|
474
|
-
}
|
475
|
-
}
|
476
|
-
|
477
|
-
|
478
|
-
///
|
479
|
-
/// Mixin to reverse padding on a container.
|
480
|
-
/// Use it to remove padded column spacing on columns, helpful when nesting columns and when applying backgrounds.
|
481
|
-
///
|
482
|
-
/// @since 0.1
|
483
|
-
///
|
484
|
-
/// @param {Number} $fraction (1/2) - A fraction, e.g. 1/2
|
485
|
-
///
|
486
|
-
|
487
|
-
@mixin bleed($fraction: -1/2) {
|
488
|
-
@include gutters($fraction, true);
|
489
|
-
}
|
490
|
-
|
491
|
-
|
492
|
-
///
|
493
|
-
/// Mixin for soure ordering
|
494
|
-
///
|
495
|
-
/// @since 0.1
|
496
|
-
///
|
497
|
-
/// @param {Number} $fraction (1/2) - A fraction, e.g. 1/2
|
498
|
-
///
|
499
|
-
|
500
|
-
@mixin move($fraction) {
|
501
|
-
left: percentage($fraction);
|
502
|
-
}
|
503
|
-
|
504
|
-
|
505
|
-
///
|
506
|
-
/// @alias move
|
507
|
-
///
|
508
|
-
|
509
|
-
@mixin push($fraction) {
|
510
|
-
@include move($fraction);
|
511
|
-
}
|
512
|
-
|
513
|
-
|
514
|
-
///
|
515
|
-
/// @alias move
|
516
|
-
///
|
517
|
-
|
518
|
-
@mixin pull($fraction) {
|
519
|
-
@include move(-1 * $fraction);
|
520
|
-
}
|
521
|
-
|
522
|
-
|
523
|
-
///
|
524
|
-
/// Mixin for soure ordering.
|
525
|
-
/// Will reset positioning for smallest breakpoint.
|
526
|
-
///
|
527
|
-
/// @since 0.1
|
528
|
-
///
|
529
|
-
|
530
|
-
@mixin reset-source-order() {
|
531
|
-
|
532
|
-
@if $column-breakpoint {
|
533
|
-
@include breakpoint($column-breakpoint) {
|
534
|
-
position: static;
|
535
|
-
position: initial;
|
536
|
-
}
|
537
|
-
}
|
538
|
-
}
|
539
|
-
|
540
|
-
|
541
|
-
///
|
542
|
-
/// Reveals the document's horizontal rhythm. Will automatically be mixed in when [$debug-layout](./#variable-debug-layout) is set to true.
|
543
|
-
///
|
544
|
-
/// @since 0.1
|
545
|
-
///
|
546
|
-
|
547
|
-
@mixin debug-layout($columns: $columns, $color: $black, $gutter-width: $gutter-width) {
|
548
|
-
background-size: percentage(1 / $columns) 100%;
|
549
|
-
// scss-lint:disable TrailingWhitespace SpaceAfterPropertyColon
|
550
|
-
background-image:
|
551
|
-
linear-gradient(to right,
|
552
|
-
rgba($color, .1) 0,
|
553
|
-
rgba($color, .1) $gutter-width / 2,
|
554
|
-
transparent $gutter-width / 2,
|
555
|
-
transparent percentage($columns / $columns)
|
556
|
-
),
|
557
|
-
linear-gradient(to left,
|
558
|
-
rgba($color, .1) 0,
|
559
|
-
rgba($color, .1) $gutter-width / 2,
|
560
|
-
transparent $gutter-width / 2,
|
561
|
-
transparent percentage($columns / $columns)
|
562
|
-
),
|
563
|
-
linear-gradient(to left,
|
564
|
-
transparent 0%,
|
565
|
-
rgba($black, .5) 1px,
|
566
|
-
transparent 1px,
|
567
|
-
transparent percentage($columns / $columns)
|
568
|
-
);
|
569
|
-
// scss-lint:enable TrailingWhitespace SpaceAfterPropertyColon
|
570
|
-
}
|
@@ -1,26 +0,0 @@
|
|
1
|
-
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
2
|
-
|
3
|
-
|
4
|
-
// Content:
|
5
|
-
// 1. Mixins
|
6
|
-
// list-style-type
|
7
|
-
|
8
|
-
|
9
|
-
// 1. Mixins
|
10
|
-
|
11
|
-
|
12
|
-
///
|
13
|
-
/// Mixin a list-style-type
|
14
|
-
/// @example scss
|
15
|
-
/// @include list-style-type(bullet);
|
16
|
-
///
|
17
|
-
/// @since 0.1
|
18
|
-
///
|
19
|
-
/// @param {String} $type
|
20
|
-
///
|
21
|
-
|
22
|
-
@mixin list-style-type($type) {
|
23
|
-
%list--#{$type} {
|
24
|
-
list-style-type: $type;
|
25
|
-
}
|
26
|
-
}
|