baseline-scss 0.6.0 → 1.0.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/LICENSE +1 -1
- data/lib/baseline_scss/version.rb +1 -1
- data/src/baseline-scss/_helpers.scss +23 -7
- data/src/baseline-scss/_mixins.scss +65 -7
- data/src/baseline-scss/_reboot.scss +16 -172
- data/src/baseline-scss/_variables.scss +63 -127
- data/src/baseline-scss/content/_buttons.scss +77 -24
- data/src/baseline-scss/content/_code.scss +23 -10
- data/src/baseline-scss/content/_forms.scss +167 -53
- data/src/baseline-scss/content/_index.scss +8 -0
- data/src/baseline-scss/content/_lists.scss +4 -3
- data/src/baseline-scss/content/_multimedia.scss +13 -0
- data/src/baseline-scss/content/_tables.scss +21 -1
- data/src/baseline-scss/content/_typography.scss +68 -41
- data/src/baseline-scss.scss +5 -11
- metadata +4 -59
- data/src/_baseline.scss +0 -5
- data/src/baseline-scss/_content.scss +0 -7
- data/src/baseline-scss/mixins/_.scss +0 -4
- data/src/baseline-scss/mixins/_after_border.scss +0 -12
- data/src/baseline-scss/mixins/_clearfix.scss +0 -7
- data/src/baseline-scss/mixins/_font_awesome.scss +0 -12
- data/src/baseline-scss/mixins/_max_width_container.scss +0 -15
- data/src/baseline-scss/mixins/_outline.scss +0 -5
- data/src/baseline-scss/mixins/_sr_only.scss +0 -17
- data/src/vendors/_bourbon.scss +0 -54
- data/src/vendors/_include-media.scss +0 -591
- data/src/vendors/bourbon/helpers/_buttons-list.scss +0 -14
- data/src/vendors/bourbon/helpers/_scales.scss +0 -27
- data/src/vendors/bourbon/helpers/_text-inputs-list.scss +0 -26
- data/src/vendors/bourbon/library/_border-color.scss +0 -26
- data/src/vendors/bourbon/library/_border-radius.scss +0 -85
- data/src/vendors/bourbon/library/_border-style.scss +0 -25
- data/src/vendors/bourbon/library/_border-width.scss +0 -25
- data/src/vendors/bourbon/library/_buttons.scss +0 -84
- data/src/vendors/bourbon/library/_clearfix.scss +0 -25
- data/src/vendors/bourbon/library/_contrast-switch.scss +0 -81
- data/src/vendors/bourbon/library/_ellipsis.scss +0 -36
- data/src/vendors/bourbon/library/_font-face.scss +0 -65
- data/src/vendors/bourbon/library/_font-stacks.scss +0 -248
- data/src/vendors/bourbon/library/_hide-text.scss +0 -24
- data/src/vendors/bourbon/library/_hide-visually.scss +0 -70
- data/src/vendors/bourbon/library/_margin.scss +0 -37
- data/src/vendors/bourbon/library/_modular-scale.scss +0 -120
- data/src/vendors/bourbon/library/_overflow-wrap.scss +0 -25
- data/src/vendors/bourbon/library/_padding.scss +0 -36
- data/src/vendors/bourbon/library/_position.scss +0 -62
- data/src/vendors/bourbon/library/_prefixer.scss +0 -37
- data/src/vendors/bourbon/library/_shade.scss +0 -32
- data/src/vendors/bourbon/library/_size.scss +0 -50
- data/src/vendors/bourbon/library/_strip-unit.scss +0 -17
- data/src/vendors/bourbon/library/_text-inputs.scss +0 -163
- data/src/vendors/bourbon/library/_timing-functions.scss +0 -36
- data/src/vendors/bourbon/library/_tint.scss +0 -32
- data/src/vendors/bourbon/library/_triangle.scss +0 -82
- data/src/vendors/bourbon/library/_value-prefixer.scss +0 -37
- data/src/vendors/bourbon/settings/_settings.scss +0 -75
- data/src/vendors/bourbon/utilities/_assign-inputs.scss +0 -28
- data/src/vendors/bourbon/utilities/_compact-shorthand.scss +0 -42
- data/src/vendors/bourbon/utilities/_contrast-ratio.scss +0 -31
- data/src/vendors/bourbon/utilities/_directional-property.scss +0 -68
- data/src/vendors/bourbon/utilities/_fetch-bourbon-setting.scss +0 -16
- data/src/vendors/bourbon/utilities/_font-source-declaration.scss +0 -52
- data/src/vendors/bourbon/utilities/_gamma.scss +0 -24
- data/src/vendors/bourbon/utilities/_lightness.scss +0 -24
- data/src/vendors/bourbon/utilities/_unpack-shorthand.scss +0 -29
- data/src/vendors/bourbon/validators/_contains-falsy.scss +0 -20
- data/src/vendors/bourbon/validators/_contains.scss +0 -26
- data/src/vendors/bourbon/validators/_is-color.scss +0 -13
- data/src/vendors/bourbon/validators/_is-length.scss +0 -20
- data/src/vendors/bourbon/validators/_is-number.scss +0 -15
- data/src/vendors/bourbon/validators/_is-size.scss +0 -18
@@ -1,591 +0,0 @@
|
|
1
|
-
// _ _ _ _ _
|
2
|
-
// (_) | | | | | (_)
|
3
|
-
// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _
|
4
|
-
// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
|
5
|
-
// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| |
|
6
|
-
// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
|
7
|
-
//
|
8
|
-
// Simple, elegant and maintainable media queries in Sass
|
9
|
-
// v2.0.0
|
10
|
-
//
|
11
|
-
// https://eduardoboucas.github.io/include-media
|
12
|
-
//
|
13
|
-
// Authors: Eduardo Boucas (@eduardoboucas)
|
14
|
-
// Kitty Giraudel (@kittygiraudel)
|
15
|
-
//
|
16
|
-
// This project is licensed under the terms of the MIT license
|
17
|
-
@charset "UTF-8";
|
18
|
-
|
19
|
-
////
|
20
|
-
/// include-media library public configuration
|
21
|
-
/// @author Eduardo Boucas
|
22
|
-
/// @access public
|
23
|
-
////
|
24
|
-
@use 'sass:math';
|
25
|
-
@use 'sass:map';
|
26
|
-
@use 'sass:list';
|
27
|
-
@use 'sass:string';
|
28
|
-
@use 'sass:meta';
|
29
|
-
|
30
|
-
///
|
31
|
-
/// Creates a list of global breakpoints
|
32
|
-
///
|
33
|
-
/// @example scss - Creates a single breakpoint with the label `phone`
|
34
|
-
/// $breakpoints: ('phone': 320px);
|
35
|
-
///
|
36
|
-
$breakpoints: (
|
37
|
-
'phone': 320px,
|
38
|
-
'tablet': 768px,
|
39
|
-
'desktop': 1024px,
|
40
|
-
) !default;
|
41
|
-
|
42
|
-
///
|
43
|
-
/// Creates a list of static expressions or media types
|
44
|
-
///
|
45
|
-
/// @example scss - Creates a single media type (screen)
|
46
|
-
/// $media-expressions: ('screen': 'screen');
|
47
|
-
///
|
48
|
-
/// @example scss - Creates a static expression with logical disjunction (OR operator)
|
49
|
-
/// $media-expressions: (
|
50
|
-
/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
|
51
|
-
/// );
|
52
|
-
///
|
53
|
-
$media-expressions: (
|
54
|
-
'screen': 'screen',
|
55
|
-
'print': 'print',
|
56
|
-
'handheld': 'handheld',
|
57
|
-
'landscape': '(orientation: landscape)',
|
58
|
-
'portrait': '(orientation: portrait)',
|
59
|
-
'retina2x':
|
60
|
-
'(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
|
61
|
-
'retina3x':
|
62
|
-
'(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)',
|
63
|
-
) !default;
|
64
|
-
|
65
|
-
///
|
66
|
-
/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
|
67
|
-
///
|
68
|
-
/// @example scss - Interval for pixels is defined as `1` by default
|
69
|
-
/// @include media('>128px') {}
|
70
|
-
///
|
71
|
-
/// /* Generates: */
|
72
|
-
/// @media (min-width: 129px) {}
|
73
|
-
///
|
74
|
-
/// @example scss - Interval for ems is defined as `0.01` by default
|
75
|
-
/// @include media('>20em') {}
|
76
|
-
///
|
77
|
-
/// /* Generates: */
|
78
|
-
/// @media (min-width: 20.01em) {}
|
79
|
-
///
|
80
|
-
/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
|
81
|
-
/// @include media('>2.0rem') {}
|
82
|
-
///
|
83
|
-
/// /* Generates: */
|
84
|
-
/// @media (min-width: 2.1rem) {}
|
85
|
-
///
|
86
|
-
$unit-intervals: (
|
87
|
-
'px': 1,
|
88
|
-
'em': 0.01,
|
89
|
-
'rem': 0.1,
|
90
|
-
'': 0,
|
91
|
-
) !default;
|
92
|
-
|
93
|
-
///
|
94
|
-
/// Defines whether support for media queries is available, useful for creating separate stylesheets
|
95
|
-
/// for browsers that don't support media queries.
|
96
|
-
///
|
97
|
-
/// @example scss - Disables support for media queries
|
98
|
-
/// $im-media-support: false;
|
99
|
-
/// @include media('>=tablet') {
|
100
|
-
/// .foo {
|
101
|
-
/// color: tomato;
|
102
|
-
/// }
|
103
|
-
/// }
|
104
|
-
///
|
105
|
-
/// /* Generates: */
|
106
|
-
/// .foo {
|
107
|
-
/// color: tomato;
|
108
|
-
/// }
|
109
|
-
///
|
110
|
-
$im-media-support: true !default;
|
111
|
-
|
112
|
-
///
|
113
|
-
/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
|
114
|
-
/// intercept the breakpoint will be displayed, any others will be ignored.
|
115
|
-
///
|
116
|
-
/// @example scss - This media query will show because it intercepts the static breakpoint
|
117
|
-
/// $im-media-support: false;
|
118
|
-
/// $im-no-media-breakpoint: 'desktop';
|
119
|
-
/// @include media('>=tablet') {
|
120
|
-
/// .foo {
|
121
|
-
/// color: tomato;
|
122
|
-
/// }
|
123
|
-
/// }
|
124
|
-
///
|
125
|
-
/// /* Generates: */
|
126
|
-
/// .foo {
|
127
|
-
/// color: tomato;
|
128
|
-
/// }
|
129
|
-
///
|
130
|
-
/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
|
131
|
-
/// $im-media-support: false;
|
132
|
-
/// $im-no-media-breakpoint: 'tablet';
|
133
|
-
/// @include media('>=desktop') {
|
134
|
-
/// .foo {
|
135
|
-
/// color: tomato;
|
136
|
-
/// }
|
137
|
-
/// }
|
138
|
-
///
|
139
|
-
/// /* No output */
|
140
|
-
///
|
141
|
-
$im-no-media-breakpoint: 'desktop' !default;
|
142
|
-
|
143
|
-
///
|
144
|
-
/// Selects which media expressions are allowed in an expression for it to be used when media queries
|
145
|
-
/// are not supported.
|
146
|
-
///
|
147
|
-
/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
|
148
|
-
/// $im-media-support: false;
|
149
|
-
/// $im-no-media-breakpoint: 'desktop';
|
150
|
-
/// $im-no-media-expressions: ('screen');
|
151
|
-
/// @include media('>=tablet', 'screen') {
|
152
|
-
/// .foo {
|
153
|
-
/// color: tomato;
|
154
|
-
/// }
|
155
|
-
/// }
|
156
|
-
///
|
157
|
-
/// /* Generates: */
|
158
|
-
/// .foo {
|
159
|
-
/// color: tomato;
|
160
|
-
/// }
|
161
|
-
///
|
162
|
-
/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
|
163
|
-
/// $im-media-support: false;
|
164
|
-
/// $im-no-media-breakpoint: 'desktop';
|
165
|
-
/// $im-no-media-expressions: ('screen');
|
166
|
-
/// @include media('>=tablet', 'retina2x') {
|
167
|
-
/// .foo {
|
168
|
-
/// color: tomato;
|
169
|
-
/// }
|
170
|
-
/// }
|
171
|
-
///
|
172
|
-
/// /* No output */
|
173
|
-
///
|
174
|
-
$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
|
175
|
-
|
176
|
-
////
|
177
|
-
/// Cross-engine logging engine
|
178
|
-
/// @author Kitty Giraudel
|
179
|
-
/// @access private
|
180
|
-
////
|
181
|
-
|
182
|
-
///
|
183
|
-
/// Log a message either with `@error` if supported
|
184
|
-
/// else with `@warn`, using `feature-exists('at-error')`
|
185
|
-
/// to detect support.
|
186
|
-
///
|
187
|
-
/// @param {String} $message - Message to log
|
188
|
-
///
|
189
|
-
@function im-log($message) {
|
190
|
-
@if meta.feature-exists('at-error') {
|
191
|
-
@error $message;
|
192
|
-
} @else {
|
193
|
-
@warn $message;
|
194
|
-
$_: noop();
|
195
|
-
}
|
196
|
-
|
197
|
-
@return $message;
|
198
|
-
}
|
199
|
-
|
200
|
-
///
|
201
|
-
/// Wrapper mixin for the log function so it can be used with a more friendly
|
202
|
-
/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function
|
203
|
-
/// within functions because it is not possible to include a mixin in a function
|
204
|
-
/// and use the mixin everywhere else because it's much more elegant.
|
205
|
-
///
|
206
|
-
/// @param {String} $message - Message to log
|
207
|
-
///
|
208
|
-
@mixin log($message) {
|
209
|
-
@if im-log($message) {
|
210
|
-
}
|
211
|
-
}
|
212
|
-
|
213
|
-
///
|
214
|
-
/// Function with no `@return` called next to `@warn` in Sass 3.3
|
215
|
-
/// to trigger a compiling error and stop the process.
|
216
|
-
///
|
217
|
-
@function noop() {
|
218
|
-
}
|
219
|
-
|
220
|
-
///
|
221
|
-
/// Determines whether a list of conditions is intercepted by the static breakpoint.
|
222
|
-
///
|
223
|
-
/// @param {Arglist} $conditions - Media query conditions
|
224
|
-
///
|
225
|
-
/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
|
226
|
-
///
|
227
|
-
@function im-intercepts-static-breakpoint($conditions...) {
|
228
|
-
$no-media-breakpoint-value: map.get($breakpoints, $im-no-media-breakpoint);
|
229
|
-
|
230
|
-
@if not $no-media-breakpoint-value {
|
231
|
-
@if im-log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {
|
232
|
-
}
|
233
|
-
}
|
234
|
-
|
235
|
-
@each $condition in $conditions {
|
236
|
-
@if not map.has-key($media-expressions, $condition) {
|
237
|
-
$operator: get-expression-operator($condition);
|
238
|
-
$prefix: get-expression-prefix($operator);
|
239
|
-
$value: get-expression-value($condition, $operator);
|
240
|
-
|
241
|
-
@if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
|
242
|
-
($prefix == 'min' and $value > $no-media-breakpoint-value)
|
243
|
-
{
|
244
|
-
@return false;
|
245
|
-
}
|
246
|
-
} @else if not list.index($im-no-media-expressions, $condition) {
|
247
|
-
@return false;
|
248
|
-
}
|
249
|
-
}
|
250
|
-
|
251
|
-
@return true;
|
252
|
-
}
|
253
|
-
|
254
|
-
////
|
255
|
-
/// Parsing engine
|
256
|
-
/// @author Kitty Giraudel
|
257
|
-
/// @access private
|
258
|
-
////
|
259
|
-
|
260
|
-
///
|
261
|
-
/// Get operator of an expression
|
262
|
-
///
|
263
|
-
/// @param {String} $expression - Expression to extract operator from
|
264
|
-
///
|
265
|
-
/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
|
266
|
-
///
|
267
|
-
@function get-expression-operator($expression) {
|
268
|
-
@each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
|
269
|
-
@if string.index($expression, $operator) {
|
270
|
-
@return $operator;
|
271
|
-
}
|
272
|
-
}
|
273
|
-
|
274
|
-
// It is not possible to include a mixin inside a function, so we have to
|
275
|
-
// rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
|
276
|
-
// functions cannot be called anywhere in Sass, we need to hack the call in
|
277
|
-
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
|
278
|
-
// Sass 3.3, change this line in `@if im-log(..) {}` instead.
|
279
|
-
$_: im-log('No operator found in `#{$expression}`.');
|
280
|
-
}
|
281
|
-
|
282
|
-
///
|
283
|
-
/// Get dimension of an expression, based on a found operator
|
284
|
-
///
|
285
|
-
/// @param {String} $expression - Expression to extract dimension from
|
286
|
-
/// @param {String} $operator - Operator from `$expression`
|
287
|
-
///
|
288
|
-
/// @return {String} - `width` or `height` (or potentially anything else)
|
289
|
-
///
|
290
|
-
@function get-expression-dimension($expression, $operator) {
|
291
|
-
$operator-index: string.index($expression, $operator);
|
292
|
-
$parsed-dimension: string.slice($expression, 0, $operator-index - 1);
|
293
|
-
$dimension: 'width';
|
294
|
-
|
295
|
-
@if string.length($parsed-dimension) > 0 {
|
296
|
-
$dimension: $parsed-dimension;
|
297
|
-
}
|
298
|
-
|
299
|
-
@return $dimension;
|
300
|
-
}
|
301
|
-
|
302
|
-
///
|
303
|
-
/// Get dimension prefix based on an operator
|
304
|
-
///
|
305
|
-
/// @param {String} $operator - Operator
|
306
|
-
///
|
307
|
-
/// @return {String} - `min` or `max`
|
308
|
-
///
|
309
|
-
@function get-expression-prefix($operator) {
|
310
|
-
@return if(list.index(('<', '<=', '≤'), $operator), 'max', 'min');
|
311
|
-
}
|
312
|
-
|
313
|
-
///
|
314
|
-
/// Get value of an expression, based on a found operator
|
315
|
-
///
|
316
|
-
/// @param {String} $expression - Expression to extract value from
|
317
|
-
/// @param {String} $operator - Operator from `$expression`
|
318
|
-
///
|
319
|
-
/// @return {Number} - A numeric value
|
320
|
-
///
|
321
|
-
@function get-expression-value($expression, $operator) {
|
322
|
-
$operator-index: string.index($expression, $operator);
|
323
|
-
$value: string.slice($expression, $operator-index + string.length($operator));
|
324
|
-
|
325
|
-
@if map.has-key($breakpoints, $value) {
|
326
|
-
$value: map.get($breakpoints, $value);
|
327
|
-
} @else {
|
328
|
-
$value: to-number($value);
|
329
|
-
}
|
330
|
-
|
331
|
-
$interval: map.get($unit-intervals, math.unit($value));
|
332
|
-
|
333
|
-
@if not $interval {
|
334
|
-
// It is not possible to include a mixin inside a function, so we have to
|
335
|
-
// rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
|
336
|
-
// functions cannot be called anywhere in Sass, we need to hack the call in
|
337
|
-
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
|
338
|
-
// Sass 3.3, change this line in `@if im-log(..) {}` instead.
|
339
|
-
$_: im-log('Unknown unit `#{math.unit($value)}`.');
|
340
|
-
}
|
341
|
-
|
342
|
-
@if $operator == '>' {
|
343
|
-
$value: $value + $interval;
|
344
|
-
} @else if $operator == '<' {
|
345
|
-
$value: $value - $interval;
|
346
|
-
}
|
347
|
-
|
348
|
-
@return $value;
|
349
|
-
}
|
350
|
-
|
351
|
-
///
|
352
|
-
/// Parse an expression to return a valid media-query expression
|
353
|
-
///
|
354
|
-
/// @param {String} $expression - Expression to parse
|
355
|
-
///
|
356
|
-
/// @return {String} - Valid media query
|
357
|
-
///
|
358
|
-
@function parse-expression($expression) {
|
359
|
-
// If it is part of $media-expressions, it has no operator
|
360
|
-
// then there is no need to go any further, just return the value
|
361
|
-
@if map.has-key($media-expressions, $expression) {
|
362
|
-
@return map.get($media-expressions, $expression);
|
363
|
-
}
|
364
|
-
|
365
|
-
$operator: get-expression-operator($expression);
|
366
|
-
$dimension: get-expression-dimension($expression, $operator);
|
367
|
-
$prefix: get-expression-prefix($operator);
|
368
|
-
$value: get-expression-value($expression, $operator);
|
369
|
-
|
370
|
-
@return '(#{$prefix}-#{$dimension}: #{$value})';
|
371
|
-
}
|
372
|
-
|
373
|
-
///
|
374
|
-
/// Slice `$list` between `$start` and `$end` indexes
|
375
|
-
///
|
376
|
-
/// @access private
|
377
|
-
///
|
378
|
-
/// @param {List} $list - List to slice
|
379
|
-
/// @param {Number} $start [1] - Start index
|
380
|
-
/// @param {Number} $end [length($list)] - End index
|
381
|
-
///
|
382
|
-
/// @return {List} Sliced list
|
383
|
-
///
|
384
|
-
@function slice($list, $start: 1, $end: list.length($list)) {
|
385
|
-
@if list.length($list) < 1 or $start > $end {
|
386
|
-
@return ();
|
387
|
-
}
|
388
|
-
|
389
|
-
$result: ();
|
390
|
-
|
391
|
-
@for $i from $start through $end {
|
392
|
-
$result: list.append($result, list.nth($list, $i), comma);
|
393
|
-
}
|
394
|
-
|
395
|
-
@return $result;
|
396
|
-
}
|
397
|
-
|
398
|
-
////
|
399
|
-
/// String to number converter
|
400
|
-
/// @author Kitty Giraudel
|
401
|
-
/// @access private
|
402
|
-
////
|
403
|
-
|
404
|
-
///
|
405
|
-
/// Casts a string into a number
|
406
|
-
///
|
407
|
-
/// @param {String | Number} $value - Value to be parsed
|
408
|
-
///
|
409
|
-
/// @return {Number}
|
410
|
-
///
|
411
|
-
|
412
|
-
@function to-number($value) {
|
413
|
-
@if meta.type-of($value) == 'number' {
|
414
|
-
@return $value;
|
415
|
-
} @else if meta.type-of($value) != 'string' {
|
416
|
-
$_: im-log('Value for `to-number` should be a number or a string.');
|
417
|
-
}
|
418
|
-
|
419
|
-
$first-character: string.slice($value, 1, 1);
|
420
|
-
$result: 0;
|
421
|
-
$digits: 0;
|
422
|
-
$minus: ($first-character == '-');
|
423
|
-
$numbers: (
|
424
|
-
'0': 0,
|
425
|
-
'1': 1,
|
426
|
-
'2': 2,
|
427
|
-
'3': 3,
|
428
|
-
'4': 4,
|
429
|
-
'5': 5,
|
430
|
-
'6': 6,
|
431
|
-
'7': 7,
|
432
|
-
'8': 8,
|
433
|
-
'9': 9,
|
434
|
-
);
|
435
|
-
|
436
|
-
// Remove +/- sign if present at first character
|
437
|
-
@if ($first-character == '+' or $first-character == '-') {
|
438
|
-
$value: string.slice($value, 2);
|
439
|
-
}
|
440
|
-
|
441
|
-
@for $i from 1 through string.length($value) {
|
442
|
-
$character: string.slice($value, $i, $i);
|
443
|
-
|
444
|
-
@if not(list.index(map.keys($numbers), $character) or $character == '.') {
|
445
|
-
@return to-length(if($minus, -$result, $result), string.slice($value, $i));
|
446
|
-
}
|
447
|
-
|
448
|
-
@if $character == '.' {
|
449
|
-
$digits: 1;
|
450
|
-
} @else if $digits == 0 {
|
451
|
-
$result: $result * 10 + map.get($numbers, $character);
|
452
|
-
} @else {
|
453
|
-
$digits: $digits * 10;
|
454
|
-
$result: $result + math.div(map.get($numbers, $character), $digits);
|
455
|
-
}
|
456
|
-
}
|
457
|
-
|
458
|
-
@return if($minus, -$result, $result);
|
459
|
-
}
|
460
|
-
|
461
|
-
///
|
462
|
-
/// Add `$unit` to `$value`
|
463
|
-
///
|
464
|
-
/// @param {Number} $value - Value to add unit to
|
465
|
-
/// @param {String} $unit - String representation of the unit
|
466
|
-
///
|
467
|
-
/// @return {Number} - `$value` expressed in `$unit`
|
468
|
-
///
|
469
|
-
@function to-length($value, $unit) {
|
470
|
-
$units: (
|
471
|
-
'px': 1px,
|
472
|
-
'cm': 1cm,
|
473
|
-
'mm': 1mm,
|
474
|
-
'%': 1%,
|
475
|
-
'ch': 1ch,
|
476
|
-
'pc': 1pc,
|
477
|
-
'in': 1in,
|
478
|
-
'em': 1em,
|
479
|
-
'rem': 1rem,
|
480
|
-
'pt': 1pt,
|
481
|
-
'ex': 1ex,
|
482
|
-
'vw': 1vw,
|
483
|
-
'vh': 1vh,
|
484
|
-
'vmin': 1vmin,
|
485
|
-
'vmax': 1vmax,
|
486
|
-
);
|
487
|
-
|
488
|
-
@if not list.index(map.keys($units), $unit) {
|
489
|
-
$_: im-log('Invalid unit `#{$unit}`.');
|
490
|
-
}
|
491
|
-
|
492
|
-
@return $value * map.get($units, $unit);
|
493
|
-
}
|
494
|
-
|
495
|
-
///
|
496
|
-
/// This mixin aims at redefining the configuration just for the scope of
|
497
|
-
/// the call. It is helpful when having a component needing an extended
|
498
|
-
/// configuration such as custom breakpoints (referred to as tweakpoints)
|
499
|
-
/// for instance.
|
500
|
-
///
|
501
|
-
/// @author Kitty Giraudel
|
502
|
-
///
|
503
|
-
/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
|
504
|
-
/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
|
505
|
-
///
|
506
|
-
/// @example scss - Extend the global breakpoints with a tweakpoint
|
507
|
-
/// @include media-context(('custom': 678px)) {
|
508
|
-
/// .foo {
|
509
|
-
/// @include media('>phone', '<=custom') {
|
510
|
-
/// // ...
|
511
|
-
/// }
|
512
|
-
/// }
|
513
|
-
/// }
|
514
|
-
///
|
515
|
-
/// @example scss - Extend the global media expressions with a custom one
|
516
|
-
/// @include media-context($tweak-media-expressions: ('all': 'all')) {
|
517
|
-
/// .foo {
|
518
|
-
/// @include media('all', '>phone') {
|
519
|
-
/// // ...
|
520
|
-
/// }
|
521
|
-
/// }
|
522
|
-
/// }
|
523
|
-
///
|
524
|
-
/// @example scss - Extend both configuration maps
|
525
|
-
/// @include media-context(('custom': 678px), ('all': 'all')) {
|
526
|
-
/// .foo {
|
527
|
-
/// @include media('all', '>phone', '<=custom') {
|
528
|
-
/// // ...
|
529
|
-
/// }
|
530
|
-
/// }
|
531
|
-
/// }
|
532
|
-
///
|
533
|
-
@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
|
534
|
-
// Save global configuration
|
535
|
-
$global-breakpoints: $breakpoints;
|
536
|
-
$global-media-expressions: $media-expressions;
|
537
|
-
|
538
|
-
// Update global configuration
|
539
|
-
$breakpoints: map.merge($breakpoints, $tweakpoints) !global;
|
540
|
-
$media-expressions: map.merge($media-expressions, $tweak-media-expressions) !global;
|
541
|
-
|
542
|
-
@content;
|
543
|
-
|
544
|
-
// Restore global configuration
|
545
|
-
$breakpoints: $global-breakpoints !global;
|
546
|
-
$media-expressions: $global-media-expressions !global;
|
547
|
-
}
|
548
|
-
|
549
|
-
////
|
550
|
-
/// include-media public exposed API
|
551
|
-
/// @author Eduardo Boucas
|
552
|
-
/// @access public
|
553
|
-
////
|
554
|
-
|
555
|
-
///
|
556
|
-
/// Generates a media query based on a list of conditions
|
557
|
-
///
|
558
|
-
/// @param {Arglist} $conditions - Media query conditions
|
559
|
-
///
|
560
|
-
/// @example scss - With a single set breakpoint
|
561
|
-
/// @include media('>phone') { }
|
562
|
-
///
|
563
|
-
/// @example scss - With two set breakpoints
|
564
|
-
/// @include media('>phone', '<=tablet') { }
|
565
|
-
///
|
566
|
-
/// @example scss - With custom values
|
567
|
-
/// @include media('>=358px', '<850px') { }
|
568
|
-
///
|
569
|
-
/// @example scss - With set breakpoints with custom values
|
570
|
-
/// @include media('>desktop', '<=1350px') { }
|
571
|
-
///
|
572
|
-
/// @example scss - With a static expression
|
573
|
-
/// @include media('retina2x') { }
|
574
|
-
///
|
575
|
-
/// @example scss - Mixing everything
|
576
|
-
/// @include media('>=350px', '<tablet', 'retina3x') { }
|
577
|
-
///
|
578
|
-
@mixin media($conditions...) {
|
579
|
-
@if ($im-media-support and list.length($conditions) == 0) or
|
580
|
-
(not $im-media-support and im-intercepts-static-breakpoint($conditions...))
|
581
|
-
{
|
582
|
-
@content;
|
583
|
-
} @else if ($im-media-support and list.length($conditions) > 0) {
|
584
|
-
@media #{string.unquote(parse-expression(list.nth($conditions, 1)))} {
|
585
|
-
// Recursive call
|
586
|
-
@include media(slice($conditions, 2)...) {
|
587
|
-
@content;
|
588
|
-
}
|
589
|
-
}
|
590
|
-
}
|
591
|
-
}
|
@@ -1,27 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
////
|
4
|
-
/// Pre-defined scales for use with the `modular-scale` function.
|
5
|
-
///
|
6
|
-
/// @type number (unitless)
|
7
|
-
///
|
8
|
-
/// @see {function} modular-scale
|
9
|
-
////
|
10
|
-
|
11
|
-
$minor-second: 1.067;
|
12
|
-
$major-second: 1.125;
|
13
|
-
$minor-third: 1.2;
|
14
|
-
$major-third: 1.25;
|
15
|
-
$perfect-fourth: 1.333;
|
16
|
-
$augmented-fourth: 1.414;
|
17
|
-
$perfect-fifth: 1.5;
|
18
|
-
$minor-sixth: 1.6;
|
19
|
-
$golden: 1.618;
|
20
|
-
$major-sixth: 1.667;
|
21
|
-
$minor-seventh: 1.778;
|
22
|
-
$major-seventh: 1.875;
|
23
|
-
$octave: 2;
|
24
|
-
$major-tenth: 2.5;
|
25
|
-
$major-eleventh: 2.667;
|
26
|
-
$major-twelfth: 3;
|
27
|
-
$double-octave: 4;
|
@@ -1,26 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// A list of all _text-based_ HTML inputs.
|
4
|
-
///
|
5
|
-
/// @type list
|
6
|
-
///
|
7
|
-
/// @access private
|
8
|
-
|
9
|
-
$_text-inputs-list: (
|
10
|
-
"[type='color']",
|
11
|
-
"[type='date']",
|
12
|
-
"[type='datetime']",
|
13
|
-
"[type='datetime-local']",
|
14
|
-
"[type='email']",
|
15
|
-
"[type='month']",
|
16
|
-
"[type='number']",
|
17
|
-
"[type='password']",
|
18
|
-
"[type='search']",
|
19
|
-
"[type='tel']",
|
20
|
-
"[type='text']",
|
21
|
-
"[type='time']",
|
22
|
-
"[type='url']",
|
23
|
-
"[type='week']",
|
24
|
-
"input:not([type])",
|
25
|
-
"textarea",
|
26
|
-
);
|
@@ -1,26 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// Provides a concise, one-line method for setting `border-color` on specific
|
4
|
-
/// edges of a box. Use a `null` value to “skip” edges of the box with standard
|
5
|
-
/// CSS shorthand.
|
6
|
-
///
|
7
|
-
/// @argument {list} $values
|
8
|
-
/// List of colors; accepts CSS shorthand.
|
9
|
-
///
|
10
|
-
/// @example scss
|
11
|
-
/// .element {
|
12
|
-
/// @include border-color(#a60b55 #76cd9c null #e8ae1a);
|
13
|
-
/// }
|
14
|
-
///
|
15
|
-
/// // CSS Output
|
16
|
-
/// .element {
|
17
|
-
/// border-left-color: #e8ae1a;
|
18
|
-
/// border-right-color: #76cd9c;
|
19
|
-
/// border-top-color: #a60b55;
|
20
|
-
/// }
|
21
|
-
///
|
22
|
-
/// @require {mixin} _directional-property
|
23
|
-
|
24
|
-
@mixin border-color($values) {
|
25
|
-
@include _directional-property(border, color, $values);
|
26
|
-
}
|