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,85 +0,0 @@
|
|
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
|
-
}
|
@@ -1,25 +0,0 @@
|
|
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
|
-
}
|
@@ -1,25 +0,0 @@
|
|
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
|
-
}
|
@@ -1,84 +0,0 @@
|
|
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);
|
@@ -1,25 +0,0 @@
|
|
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
|
-
}
|
@@ -1,81 +0,0 @@
|
|
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
|
-
}
|
@@ -1,36 +0,0 @@
|
|
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
|
-
}
|
@@ -1,65 +0,0 @@
|
|
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
|
-
}
|
@@ -1,248 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// A variable that outputs a Helvetica font stack.
|
4
|
-
///
|
5
|
-
/// @link https://goo.gl/uSJvZe
|
6
|
-
///
|
7
|
-
/// @type list
|
8
|
-
///
|
9
|
-
/// @example scss
|
10
|
-
/// .element {
|
11
|
-
/// font-family: $font-stack-helvetica;
|
12
|
-
/// }
|
13
|
-
///
|
14
|
-
/// // CSS Output
|
15
|
-
/// .element {
|
16
|
-
/// font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
17
|
-
/// }
|
18
|
-
|
19
|
-
$font-stack-helvetica: (
|
20
|
-
"Helvetica Neue",
|
21
|
-
"Helvetica",
|
22
|
-
"Arial",
|
23
|
-
sans-serif,
|
24
|
-
);
|
25
|
-
|
26
|
-
/// A variable that outputs a Lucida Grande font stack.
|
27
|
-
///
|
28
|
-
/// @link https://goo.gl/R5UyYE
|
29
|
-
///
|
30
|
-
/// @type list
|
31
|
-
///
|
32
|
-
/// @example scss
|
33
|
-
/// .element {
|
34
|
-
/// font-family: $font-stack-lucida-grande;
|
35
|
-
/// }
|
36
|
-
///
|
37
|
-
/// // CSS Output
|
38
|
-
/// .element {
|
39
|
-
/// font-family: "Lucida Grande", "Lucida Sans Unicode", "Geneva", "Verdana", sans-serif;
|
40
|
-
/// }
|
41
|
-
|
42
|
-
$font-stack-lucida-grande: (
|
43
|
-
"Lucida Grande",
|
44
|
-
"Lucida Sans Unicode",
|
45
|
-
"Geneva",
|
46
|
-
"Verdana",
|
47
|
-
sans-serif,
|
48
|
-
);
|
49
|
-
|
50
|
-
/// A variable that outputs a Verdana font stack.
|
51
|
-
///
|
52
|
-
/// @link https://goo.gl/yGXWSS
|
53
|
-
///
|
54
|
-
/// @type list
|
55
|
-
///
|
56
|
-
/// @example scss
|
57
|
-
/// .element {
|
58
|
-
/// font-family: $font-stack-verdana;
|
59
|
-
/// }
|
60
|
-
///
|
61
|
-
/// // CSS Output
|
62
|
-
/// .element {
|
63
|
-
/// font-family: "Verdana", "Geneva", sans-serif;
|
64
|
-
/// }
|
65
|
-
|
66
|
-
$font-stack-verdana: (
|
67
|
-
"Verdana",
|
68
|
-
"Geneva",
|
69
|
-
sans-serif,
|
70
|
-
);
|
71
|
-
|
72
|
-
/// A variable that outputs a system font stack.
|
73
|
-
///
|
74
|
-
/// @type list
|
75
|
-
///
|
76
|
-
/// @example scss
|
77
|
-
/// .element {
|
78
|
-
/// font-family: $font-stack-system;
|
79
|
-
/// }
|
80
|
-
///
|
81
|
-
/// // CSS Output
|
82
|
-
/// .element {
|
83
|
-
/// font-family: system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
|
84
|
-
/// }
|
85
|
-
|
86
|
-
$font-stack-system: (
|
87
|
-
system-ui,
|
88
|
-
-apple-system,
|
89
|
-
BlinkMacSystemFont,
|
90
|
-
"Avenir Next",
|
91
|
-
"Avenir",
|
92
|
-
"Segoe UI",
|
93
|
-
"Lucida Grande",
|
94
|
-
"Helvetica Neue",
|
95
|
-
"Helvetica",
|
96
|
-
"Fira Sans",
|
97
|
-
"Roboto",
|
98
|
-
"Noto",
|
99
|
-
"Droid Sans",
|
100
|
-
"Cantarell",
|
101
|
-
"Oxygen",
|
102
|
-
"Ubuntu",
|
103
|
-
"Franklin Gothic Medium",
|
104
|
-
"Century Gothic",
|
105
|
-
"Liberation Sans",
|
106
|
-
sans-serif,
|
107
|
-
);
|
108
|
-
|
109
|
-
/// A variable that outputs a Garamond font stack.
|
110
|
-
///
|
111
|
-
/// @link https://goo.gl/QQFEkV
|
112
|
-
///
|
113
|
-
/// @type list
|
114
|
-
///
|
115
|
-
/// @example scss
|
116
|
-
/// .element {
|
117
|
-
/// font-family: $font-stack-garamond;
|
118
|
-
/// }
|
119
|
-
///
|
120
|
-
/// // CSS Output
|
121
|
-
/// .element {
|
122
|
-
/// font-family: "Garamond", "Baskerville", "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
|
123
|
-
/// }
|
124
|
-
|
125
|
-
$font-stack-garamond: (
|
126
|
-
"Garamond",
|
127
|
-
"Baskerville",
|
128
|
-
"Baskerville Old Face",
|
129
|
-
"Hoefler Text",
|
130
|
-
"Times New Roman",
|
131
|
-
serif,
|
132
|
-
);
|
133
|
-
|
134
|
-
/// A variable that outputs a Georgia font stack.
|
135
|
-
///
|
136
|
-
/// @link https://goo.gl/wtzVPy
|
137
|
-
///
|
138
|
-
/// @type list
|
139
|
-
///
|
140
|
-
/// @example scss
|
141
|
-
/// .element {
|
142
|
-
/// font-family: $font-stack-georgia;
|
143
|
-
/// }
|
144
|
-
///
|
145
|
-
/// // CSS Output
|
146
|
-
/// .element {
|
147
|
-
/// font-family: "Georgia", "Times", "Times New Roman", serif;
|
148
|
-
/// }
|
149
|
-
|
150
|
-
$font-stack-georgia: (
|
151
|
-
"Georgia",
|
152
|
-
"Times",
|
153
|
-
"Times New Roman",
|
154
|
-
serif,
|
155
|
-
);
|
156
|
-
|
157
|
-
/// A variable that outputs a Hoefler Text font stack.
|
158
|
-
///
|
159
|
-
/// @link https://goo.gl/n7U7zx
|
160
|
-
///
|
161
|
-
/// @type list
|
162
|
-
///
|
163
|
-
/// @example scss
|
164
|
-
/// .element {
|
165
|
-
/// font-family: $font-stack-hoefler-text;
|
166
|
-
/// }
|
167
|
-
///
|
168
|
-
/// // CSS Output
|
169
|
-
/// .element {
|
170
|
-
/// font-family: "Hoefler Text", "Baskerville Old Face", "Garamond", "Times New Roman", serif;
|
171
|
-
/// }
|
172
|
-
|
173
|
-
$font-stack-hoefler-text: (
|
174
|
-
"Hoefler Text",
|
175
|
-
"Baskerville Old Face",
|
176
|
-
"Garamond",
|
177
|
-
"Times New Roman",
|
178
|
-
serif,
|
179
|
-
);
|
180
|
-
|
181
|
-
/// A variable that outputs a Consolas font stack.
|
182
|
-
///
|
183
|
-
/// @link https://goo.gl/iKrtqv
|
184
|
-
///
|
185
|
-
/// @type list
|
186
|
-
///
|
187
|
-
/// @example scss
|
188
|
-
/// .element {
|
189
|
-
/// font-family: $font-stack-consolas;
|
190
|
-
/// }
|
191
|
-
///
|
192
|
-
/// // CSS Output
|
193
|
-
/// .element {
|
194
|
-
/// font-family: "Consolas", "monaco", monospace;
|
195
|
-
/// }
|
196
|
-
|
197
|
-
$font-stack-consolas: (
|
198
|
-
"Consolas",
|
199
|
-
"monaco",
|
200
|
-
monospace,
|
201
|
-
);
|
202
|
-
|
203
|
-
/// A variable that outputs a Courier New font stack.
|
204
|
-
///
|
205
|
-
/// @link https://goo.gl/bHfWMP
|
206
|
-
///
|
207
|
-
/// @type list
|
208
|
-
///
|
209
|
-
/// @example scss
|
210
|
-
/// .element {
|
211
|
-
/// font-family: $font-stack-courier-new;
|
212
|
-
/// }
|
213
|
-
///
|
214
|
-
/// // CSS Output
|
215
|
-
/// .element {
|
216
|
-
/// font-family: "Courier New", "Courier", "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
|
217
|
-
/// }
|
218
|
-
|
219
|
-
$font-stack-courier-new: (
|
220
|
-
"Courier New",
|
221
|
-
"Courier",
|
222
|
-
"Lucida Sans Typewriter",
|
223
|
-
"Lucida Typewriter",
|
224
|
-
monospace,
|
225
|
-
);
|
226
|
-
|
227
|
-
/// A variable that outputs a Monaco font stack.
|
228
|
-
///
|
229
|
-
/// @link https://goo.gl/9PgKDO
|
230
|
-
///
|
231
|
-
/// @type list
|
232
|
-
///
|
233
|
-
/// @example scss
|
234
|
-
/// .element {
|
235
|
-
/// font-family: $font-stack-monaco;
|
236
|
-
/// }
|
237
|
-
///
|
238
|
-
/// // CSS Output
|
239
|
-
/// .element {
|
240
|
-
/// font-family: "Monaco", "Consolas", "Lucida Console", monospace;
|
241
|
-
/// }
|
242
|
-
|
243
|
-
$font-stack-monaco: (
|
244
|
-
"Monaco",
|
245
|
-
"Consolas",
|
246
|
-
"Lucida Console",
|
247
|
-
monospace,
|
248
|
-
);
|