baseline-scss 0.3.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 +7 -0
- data/LICENSE +15 -0
- data/lib/baseline-scss.rb +1 -0
- data/lib/baseline_scss/version.rb +3 -0
- data/lib/baseline_scss.rb +41 -0
- data/src/_content.scss +7 -0
- data/src/_helpers.scss +49 -0
- data/src/_mixins.scss +7 -0
- data/src/_reboot.scss +227 -0
- data/src/_variables.scss +149 -0
- data/src/_vendors.scss +3 -0
- data/src/baseline.scss +8 -0
- data/src/content/_buttons.scss +37 -0
- data/src/content/_code.scss +15 -0
- data/src/content/_forms.scss +88 -0
- data/src/content/_lists.scss +15 -0
- data/src/content/_multimedia.scss +8 -0
- data/src/content/_tables.scss +27 -0
- data/src/content/_typography.scss +99 -0
- data/src/mixins/_.scss +4 -0
- data/src/mixins/_after_border.scss +12 -0
- data/src/mixins/_clearfix.scss +7 -0
- data/src/mixins/_font_awesome.scss +12 -0
- data/src/mixins/_max_width_container.scss +15 -0
- data/src/mixins/_outline.scss +5 -0
- data/src/mixins/_sr_only.scss +17 -0
- data/src/vendors/_bourbon.scss +54 -0
- data/src/vendors/_include-media.scss +591 -0
- data/src/vendors/animate.css +4072 -0
- data/src/vendors/bourbon/helpers/_buttons-list.scss +14 -0
- data/src/vendors/bourbon/helpers/_scales.scss +27 -0
- data/src/vendors/bourbon/helpers/_text-inputs-list.scss +26 -0
- data/src/vendors/bourbon/library/_border-color.scss +26 -0
- data/src/vendors/bourbon/library/_border-radius.scss +85 -0
- data/src/vendors/bourbon/library/_border-style.scss +25 -0
- data/src/vendors/bourbon/library/_border-width.scss +25 -0
- data/src/vendors/bourbon/library/_buttons.scss +84 -0
- data/src/vendors/bourbon/library/_clearfix.scss +25 -0
- data/src/vendors/bourbon/library/_contrast-switch.scss +81 -0
- data/src/vendors/bourbon/library/_ellipsis.scss +36 -0
- data/src/vendors/bourbon/library/_font-face.scss +65 -0
- data/src/vendors/bourbon/library/_font-stacks.scss +248 -0
- data/src/vendors/bourbon/library/_hide-text.scss +24 -0
- data/src/vendors/bourbon/library/_hide-visually.scss +70 -0
- data/src/vendors/bourbon/library/_margin.scss +37 -0
- data/src/vendors/bourbon/library/_modular-scale.scss +120 -0
- data/src/vendors/bourbon/library/_overflow-wrap.scss +25 -0
- data/src/vendors/bourbon/library/_padding.scss +36 -0
- data/src/vendors/bourbon/library/_position.scss +62 -0
- data/src/vendors/bourbon/library/_prefixer.scss +37 -0
- data/src/vendors/bourbon/library/_shade.scss +32 -0
- data/src/vendors/bourbon/library/_size.scss +50 -0
- data/src/vendors/bourbon/library/_strip-unit.scss +17 -0
- data/src/vendors/bourbon/library/_text-inputs.scss +163 -0
- data/src/vendors/bourbon/library/_timing-functions.scss +36 -0
- data/src/vendors/bourbon/library/_tint.scss +32 -0
- data/src/vendors/bourbon/library/_triangle.scss +82 -0
- data/src/vendors/bourbon/library/_value-prefixer.scss +37 -0
- data/src/vendors/bourbon/settings/_settings.scss +75 -0
- data/src/vendors/bourbon/utilities/_assign-inputs.scss +28 -0
- data/src/vendors/bourbon/utilities/_compact-shorthand.scss +42 -0
- data/src/vendors/bourbon/utilities/_contrast-ratio.scss +31 -0
- data/src/vendors/bourbon/utilities/_directional-property.scss +68 -0
- data/src/vendors/bourbon/utilities/_fetch-bourbon-setting.scss +16 -0
- data/src/vendors/bourbon/utilities/_font-source-declaration.scss +52 -0
- data/src/vendors/bourbon/utilities/_gamma.scss +24 -0
- data/src/vendors/bourbon/utilities/_lightness.scss +24 -0
- data/src/vendors/bourbon/utilities/_unpack-shorthand.scss +29 -0
- data/src/vendors/bourbon/validators/_contains-falsy.scss +20 -0
- data/src/vendors/bourbon/validators/_contains.scss +26 -0
- data/src/vendors/bourbon/validators/_is-color.scss +13 -0
- data/src/vendors/bourbon/validators/_is-length.scss +20 -0
- data/src/vendors/bourbon/validators/_is-number.scss +15 -0
- data/src/vendors/bourbon/validators/_is-size.scss +18 -0
- data/src/vendors/normalize.css +349 -0
- metadata +130 -0
@@ -0,0 +1,27 @@
|
|
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;
|
@@ -0,0 +1,26 @@
|
|
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
|
+
);
|
@@ -0,0 +1,26 @@
|
|
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
|
+
}
|
@@ -0,0 +1,85 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides a concise, one-line method for setting `border-radius` on both the
|
4
|
+
/// top-left and top-right of a box.
|
5
|
+
///
|
6
|
+
/// @argument {number (with unit)} $radii
|
7
|
+
///
|
8
|
+
/// @example scss
|
9
|
+
/// .element {
|
10
|
+
/// @include border-top-radius(4px);
|
11
|
+
/// }
|
12
|
+
///
|
13
|
+
/// // CSS Output
|
14
|
+
/// .element {
|
15
|
+
/// border-top-left-radius: 4px;
|
16
|
+
/// border-top-right-radius: 4px;
|
17
|
+
/// }
|
18
|
+
|
19
|
+
@mixin border-top-radius($radii) {
|
20
|
+
border-top-left-radius: $radii;
|
21
|
+
border-top-right-radius: $radii;
|
22
|
+
}
|
23
|
+
|
24
|
+
/// Provides a concise, one-line method for setting `border-radius` on both the
|
25
|
+
/// top-right and bottom-right of a box.
|
26
|
+
///
|
27
|
+
/// @argument {number (with unit)} $radii
|
28
|
+
///
|
29
|
+
/// @example scss
|
30
|
+
/// .element {
|
31
|
+
/// @include border-right-radius(3px);
|
32
|
+
/// }
|
33
|
+
///
|
34
|
+
/// // CSS Output
|
35
|
+
/// .element {
|
36
|
+
/// border-bottom-right-radius: 3px;
|
37
|
+
/// border-top-right-radius: 3px;
|
38
|
+
/// }
|
39
|
+
|
40
|
+
@mixin border-right-radius($radii) {
|
41
|
+
border-bottom-right-radius: $radii;
|
42
|
+
border-top-right-radius: $radii;
|
43
|
+
}
|
44
|
+
|
45
|
+
/// Provides a concise, one-line method for setting `border-radius` on both the
|
46
|
+
/// bottom-left and bottom-right of a box.
|
47
|
+
///
|
48
|
+
/// @argument {number (with unit)} $radii
|
49
|
+
///
|
50
|
+
/// @example scss
|
51
|
+
/// .element {
|
52
|
+
/// @include border-bottom-radius(2px);
|
53
|
+
/// }
|
54
|
+
///
|
55
|
+
/// // CSS Output
|
56
|
+
/// .element {
|
57
|
+
/// border-bottom-left-radius: 2px;
|
58
|
+
/// border-bottom-right-radius: 2px;
|
59
|
+
/// }
|
60
|
+
|
61
|
+
@mixin border-bottom-radius($radii) {
|
62
|
+
border-bottom-left-radius: $radii;
|
63
|
+
border-bottom-right-radius: $radii;
|
64
|
+
}
|
65
|
+
|
66
|
+
/// Provides a concise, one-line method for setting `border-radius` on both the
|
67
|
+
/// top-left and bottom-left of a box.
|
68
|
+
///
|
69
|
+
/// @argument {number (with unit)} $radii
|
70
|
+
///
|
71
|
+
/// @example scss
|
72
|
+
/// .element {
|
73
|
+
/// @include border-left-radius(1px);
|
74
|
+
/// }
|
75
|
+
///
|
76
|
+
/// // CSS Output
|
77
|
+
/// .element {
|
78
|
+
/// border-bottom-left-radius: 1px;
|
79
|
+
/// border-top-left-radius: 1px;
|
80
|
+
/// }
|
81
|
+
|
82
|
+
@mixin border-left-radius($radii) {
|
83
|
+
border-bottom-left-radius: $radii;
|
84
|
+
border-top-left-radius: $radii;
|
85
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides a concise, one-line method for setting `border-style` 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 border styles; accepts CSS shorthand.
|
9
|
+
///
|
10
|
+
/// @example scss
|
11
|
+
/// .element {
|
12
|
+
/// @include border-style(dashed null solid);
|
13
|
+
/// }
|
14
|
+
///
|
15
|
+
/// // CSS Output
|
16
|
+
/// .element {
|
17
|
+
/// border-bottom-style: solid;
|
18
|
+
/// border-top-style: dashed;
|
19
|
+
/// }
|
20
|
+
///
|
21
|
+
/// @require {mixin} _directional-property
|
22
|
+
|
23
|
+
@mixin border-style($values) {
|
24
|
+
@include _directional-property(border, style, $values);
|
25
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides a concise, one-line method for setting `border-width` 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 border widths; accepts CSS shorthand.
|
9
|
+
///
|
10
|
+
/// @example scss
|
11
|
+
/// .element {
|
12
|
+
/// @include border-width(1em null 20px);
|
13
|
+
/// }
|
14
|
+
///
|
15
|
+
/// // CSS Output
|
16
|
+
/// .element {
|
17
|
+
/// border-bottom-width: 20px;
|
18
|
+
/// border-top-width: 1em;
|
19
|
+
/// }
|
20
|
+
///
|
21
|
+
/// @require {mixin} _directional-property
|
22
|
+
|
23
|
+
@mixin border-width($values) {
|
24
|
+
@include _directional-property(border, width, $values);
|
25
|
+
}
|
@@ -0,0 +1,84 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
////
|
4
|
+
/// @type list
|
5
|
+
///
|
6
|
+
/// @require {function} _assign-inputs
|
7
|
+
///
|
8
|
+
/// @require {variable} $_buttons-list
|
9
|
+
////
|
10
|
+
|
11
|
+
/// A list of all HTML button elements. Please note that you must interpolate
|
12
|
+
/// the variable (`#{}`) to use it as a selector.
|
13
|
+
///
|
14
|
+
/// @example scss
|
15
|
+
/// #{$all-buttons} {
|
16
|
+
/// background-color: #f00;
|
17
|
+
/// }
|
18
|
+
///
|
19
|
+
/// // CSS Output
|
20
|
+
/// button,
|
21
|
+
/// [type='button'],
|
22
|
+
/// [type='reset'],
|
23
|
+
/// [type='submit'] {
|
24
|
+
/// background-color: #f00;
|
25
|
+
/// }
|
26
|
+
|
27
|
+
$all-buttons: _assign-inputs($_buttons-list);
|
28
|
+
|
29
|
+
/// A list of all HTML button elements with the `:active` pseudo-class applied.
|
30
|
+
/// Please note that you must interpolate the variable (`#{}`) to use it as a
|
31
|
+
/// selector.
|
32
|
+
///
|
33
|
+
/// @example scss
|
34
|
+
/// #{$all-buttons-active} {
|
35
|
+
/// background-color: #00f;
|
36
|
+
/// }
|
37
|
+
///
|
38
|
+
/// // CSS Output
|
39
|
+
/// button:active,
|
40
|
+
/// [type='button']:active,
|
41
|
+
/// [type='reset']:active,
|
42
|
+
/// [type='submit']:active {
|
43
|
+
/// background-color: #00f;
|
44
|
+
/// }
|
45
|
+
|
46
|
+
$all-buttons-active: _assign-inputs($_buttons-list, active);
|
47
|
+
|
48
|
+
/// A list of all HTML button elements with the `:focus` pseudo-class applied.
|
49
|
+
/// Please note that you must interpolate the variable (`#{}`) to use it as a
|
50
|
+
/// selector.
|
51
|
+
///
|
52
|
+
/// @example scss
|
53
|
+
/// #{$all-buttons-focus} {
|
54
|
+
/// background-color: #0f0;
|
55
|
+
/// }
|
56
|
+
///
|
57
|
+
/// // CSS Output
|
58
|
+
/// button:focus,
|
59
|
+
/// [type='button']:focus,
|
60
|
+
/// [type='reset']:focus,
|
61
|
+
/// [type='submit']:focus {
|
62
|
+
/// background-color: #0f0;
|
63
|
+
/// }
|
64
|
+
|
65
|
+
$all-buttons-focus: _assign-inputs($_buttons-list, focus);
|
66
|
+
|
67
|
+
/// A list of all HTML button elements with the `:hover` pseudo-class applied.
|
68
|
+
/// Please note that you must interpolate the variable (`#{}`) to use it as a
|
69
|
+
/// selector.
|
70
|
+
///
|
71
|
+
/// @example scss
|
72
|
+
/// #{$all-buttons-hover} {
|
73
|
+
/// background-color: #0f0;
|
74
|
+
/// }
|
75
|
+
///
|
76
|
+
/// // CSS Output
|
77
|
+
/// button:hover,
|
78
|
+
/// [type='button']:hover,
|
79
|
+
/// [type='reset']:hover,
|
80
|
+
/// [type='submit']:hover {
|
81
|
+
/// background-color: #0f0;
|
82
|
+
/// }
|
83
|
+
|
84
|
+
$all-buttons-hover: _assign-inputs($_buttons-list, hover);
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides an easy way to include a clearfix for containing floats.
|
4
|
+
///
|
5
|
+
/// @link https://goo.gl/yP5hiZ
|
6
|
+
///
|
7
|
+
/// @example scss
|
8
|
+
/// .element {
|
9
|
+
/// @include clearfix;
|
10
|
+
/// }
|
11
|
+
///
|
12
|
+
/// // CSS Output
|
13
|
+
/// .element::after {
|
14
|
+
/// clear: both;
|
15
|
+
/// content: "";
|
16
|
+
/// display: block;
|
17
|
+
/// }
|
18
|
+
|
19
|
+
@mixin clearfix {
|
20
|
+
&::after {
|
21
|
+
clear: both;
|
22
|
+
content: "";
|
23
|
+
display: block;
|
24
|
+
}
|
25
|
+
}
|
@@ -0,0 +1,81 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Switches between two colors based on the contrast to another color. It’s
|
4
|
+
/// like a [ternary operator] for color contrast and can be useful for building
|
5
|
+
/// a button system.
|
6
|
+
///
|
7
|
+
/// The calculation of the contrast ratio is based on the [WCAG 2.0
|
8
|
+
/// specification]. However, we cannot guarantee full compliance, though all of
|
9
|
+
/// our manual testing passed.
|
10
|
+
///
|
11
|
+
/// [ternary operator]: https://goo.gl/ccfLqi
|
12
|
+
/// [WCAG 2.0 specification]: https://goo.gl/zhQuYA
|
13
|
+
///
|
14
|
+
/// @argument {color} $base-color
|
15
|
+
/// The color to evaluate lightness against.
|
16
|
+
///
|
17
|
+
/// @argument {color} $dark-color [#000]
|
18
|
+
/// The color to be output when `$base-color` is light. Can also be set
|
19
|
+
/// globally using the `contrast-switch-dark-color` key in the
|
20
|
+
/// Bourbon settings.
|
21
|
+
///
|
22
|
+
/// @argument {color} $light-color [#fff]
|
23
|
+
/// The color to be output when `$base-color` is dark. Can also be set
|
24
|
+
/// globally using the `contrast-switch-light-color` key in the
|
25
|
+
/// Bourbon settings.
|
26
|
+
///
|
27
|
+
/// @return {color}
|
28
|
+
///
|
29
|
+
/// @example scss
|
30
|
+
/// .element {
|
31
|
+
/// color: contrast-switch(#bae6e6);
|
32
|
+
/// }
|
33
|
+
///
|
34
|
+
/// // CSS Output
|
35
|
+
/// .element {
|
36
|
+
/// color: #000;
|
37
|
+
/// }
|
38
|
+
///
|
39
|
+
/// @example scss
|
40
|
+
/// .element {
|
41
|
+
/// $button-color: #2d72d9;
|
42
|
+
/// background-color: $button-color;
|
43
|
+
/// color: contrast-switch($button-color, #222, #eee);
|
44
|
+
/// }
|
45
|
+
///
|
46
|
+
/// // CSS Output
|
47
|
+
/// .element {
|
48
|
+
/// background-color: #2d72d9;
|
49
|
+
/// color: #eee;
|
50
|
+
/// }
|
51
|
+
///
|
52
|
+
/// @require {function} _fetch-bourbon-setting
|
53
|
+
///
|
54
|
+
/// @require {function} _is-color
|
55
|
+
///
|
56
|
+
/// @require {function} _contrast-ratio
|
57
|
+
///
|
58
|
+
/// @since 5.0.0
|
59
|
+
|
60
|
+
@function contrast-switch(
|
61
|
+
$base-color,
|
62
|
+
$dark-color: _fetch-bourbon-setting("contrast-switch-dark-color"),
|
63
|
+
$light-color: _fetch-bourbon-setting("contrast-switch-light-color")
|
64
|
+
) {
|
65
|
+
@if not _is-color($base-color) {
|
66
|
+
@error "`#{$base-color}` is not a valid color for the `$base-color` " +
|
67
|
+
"argument in the `contrast-switch` function.";
|
68
|
+
} @else if not _is-color($dark-color) {
|
69
|
+
@error "`#{$dark-color}` is not a valid color for the `$dark-color` " +
|
70
|
+
"argument in the `contrast-switch` function.";
|
71
|
+
} @else if not _is-color($light-color) {
|
72
|
+
@error "`#{$light-color}` is not a valid color for the `$light-color` " +
|
73
|
+
"argument in the `contrast-switch` function.";
|
74
|
+
} @else {
|
75
|
+
$-contrast-to-dark: _contrast-ratio($base-color, $dark-color);
|
76
|
+
$-contrast-to-light: _contrast-ratio($base-color, $light-color);
|
77
|
+
$-prefer-dark: $-contrast-to-dark >= $-contrast-to-light;
|
78
|
+
|
79
|
+
@return if($-prefer-dark, $dark-color, $light-color);
|
80
|
+
}
|
81
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Truncates text and adds an ellipsis to represent overflow.
|
4
|
+
///
|
5
|
+
/// @argument {number} $width [100%]
|
6
|
+
/// The `max-width` for the string to respect before being truncated.
|
7
|
+
///
|
8
|
+
/// @argument {string} $display [inline-block]
|
9
|
+
/// Sets the display-value of the element.
|
10
|
+
///
|
11
|
+
/// @example scss
|
12
|
+
/// .element {
|
13
|
+
/// @include ellipsis;
|
14
|
+
/// }
|
15
|
+
///
|
16
|
+
/// // CSS Output
|
17
|
+
/// .element {
|
18
|
+
/// display: inline-block;
|
19
|
+
/// max-width: 100%;
|
20
|
+
/// overflow: hidden;
|
21
|
+
/// text-overflow: ellipsis;
|
22
|
+
/// white-space: nowrap;
|
23
|
+
/// word-wrap: normal;
|
24
|
+
/// }
|
25
|
+
|
26
|
+
@mixin ellipsis(
|
27
|
+
$width: 100%,
|
28
|
+
$display: inline-block
|
29
|
+
) {
|
30
|
+
display: $display;
|
31
|
+
max-width: $width;
|
32
|
+
overflow: hidden;
|
33
|
+
text-overflow: ellipsis;
|
34
|
+
white-space: nowrap;
|
35
|
+
word-wrap: normal;
|
36
|
+
}
|
@@ -0,0 +1,65 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Generates an `@font-face` declaration. You can choose the specific file
|
4
|
+
/// formats you need to output; the mixin supports `woff2`
|
5
|
+
/// and `woff`. The mixin also supports usage with the Rails Asset Pipeline,
|
6
|
+
/// which you can enable per use, or globally in the `$bourbon()` settings.
|
7
|
+
///
|
8
|
+
/// @argument {string} $font-family
|
9
|
+
///
|
10
|
+
/// @argument {string} $file-path
|
11
|
+
///
|
12
|
+
/// @argument {string | list} $file-formats [("woff2", "woff")]
|
13
|
+
/// List of the font file formats to include. Can also be set globally using
|
14
|
+
/// the `global-font-file-formats` key in the Bourbon settings.
|
15
|
+
///
|
16
|
+
/// @argument {boolean} $asset-pipeline [false]
|
17
|
+
/// Set to `true` if you’re using the Rails Asset Pipeline (place the fonts
|
18
|
+
/// in `app/assets/fonts/`). Can also be set globally using the
|
19
|
+
/// `rails-asset-pipeline` key in the Bourbon settings.
|
20
|
+
///
|
21
|
+
/// @content
|
22
|
+
/// Any additional CSS properties that are included in the `@include`
|
23
|
+
/// directive will be output within the `@font-face` declaration, e.g. you can
|
24
|
+
/// pass in `font-weight`, `font-style` and/or `unicode-range`.
|
25
|
+
///
|
26
|
+
/// @example scss
|
27
|
+
/// @include font-face(
|
28
|
+
/// "source-sans-pro",
|
29
|
+
/// "fonts/source-sans-pro-regular",
|
30
|
+
/// ("woff2", "woff")
|
31
|
+
/// ) {
|
32
|
+
/// font-style: normal;
|
33
|
+
/// font-weight: 400;
|
34
|
+
/// }
|
35
|
+
///
|
36
|
+
/// // CSS Output
|
37
|
+
/// @font-face {
|
38
|
+
/// font-family: "source-sans-pro";
|
39
|
+
/// src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
|
40
|
+
/// url("fonts/source-sans-pro-regular.woff") format("woff");
|
41
|
+
/// font-style: normal;
|
42
|
+
/// font-weight: 400;
|
43
|
+
/// }
|
44
|
+
///
|
45
|
+
/// @require {function} _font-source-declaration
|
46
|
+
///
|
47
|
+
/// @require {function} _fetch-bourbon-setting
|
48
|
+
|
49
|
+
@mixin font-face(
|
50
|
+
$font-family,
|
51
|
+
$file-path,
|
52
|
+
$file-formats: _fetch-bourbon-setting("global-font-file-formats"),
|
53
|
+
$asset-pipeline: _fetch-bourbon-setting("rails-asset-pipeline")
|
54
|
+
) {
|
55
|
+
@font-face {
|
56
|
+
font-family: $font-family;
|
57
|
+
src: _font-source-declaration(
|
58
|
+
$font-family,
|
59
|
+
$file-path,
|
60
|
+
$asset-pipeline,
|
61
|
+
$file-formats
|
62
|
+
);
|
63
|
+
@content;
|
64
|
+
}
|
65
|
+
}
|