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.
Files changed (73) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE +1 -1
  3. data/lib/baseline_scss/version.rb +1 -1
  4. data/src/baseline-scss/_helpers.scss +23 -7
  5. data/src/baseline-scss/_mixins.scss +65 -7
  6. data/src/baseline-scss/_reboot.scss +16 -172
  7. data/src/baseline-scss/_variables.scss +63 -127
  8. data/src/baseline-scss/content/_buttons.scss +77 -24
  9. data/src/baseline-scss/content/_code.scss +23 -10
  10. data/src/baseline-scss/content/_forms.scss +167 -53
  11. data/src/baseline-scss/content/_index.scss +8 -0
  12. data/src/baseline-scss/content/_lists.scss +4 -3
  13. data/src/baseline-scss/content/_multimedia.scss +13 -0
  14. data/src/baseline-scss/content/_tables.scss +21 -1
  15. data/src/baseline-scss/content/_typography.scss +68 -41
  16. data/src/baseline-scss.scss +5 -11
  17. metadata +4 -59
  18. data/src/_baseline.scss +0 -5
  19. data/src/baseline-scss/_content.scss +0 -7
  20. data/src/baseline-scss/mixins/_.scss +0 -4
  21. data/src/baseline-scss/mixins/_after_border.scss +0 -12
  22. data/src/baseline-scss/mixins/_clearfix.scss +0 -7
  23. data/src/baseline-scss/mixins/_font_awesome.scss +0 -12
  24. data/src/baseline-scss/mixins/_max_width_container.scss +0 -15
  25. data/src/baseline-scss/mixins/_outline.scss +0 -5
  26. data/src/baseline-scss/mixins/_sr_only.scss +0 -17
  27. data/src/vendors/_bourbon.scss +0 -54
  28. data/src/vendors/_include-media.scss +0 -591
  29. data/src/vendors/bourbon/helpers/_buttons-list.scss +0 -14
  30. data/src/vendors/bourbon/helpers/_scales.scss +0 -27
  31. data/src/vendors/bourbon/helpers/_text-inputs-list.scss +0 -26
  32. data/src/vendors/bourbon/library/_border-color.scss +0 -26
  33. data/src/vendors/bourbon/library/_border-radius.scss +0 -85
  34. data/src/vendors/bourbon/library/_border-style.scss +0 -25
  35. data/src/vendors/bourbon/library/_border-width.scss +0 -25
  36. data/src/vendors/bourbon/library/_buttons.scss +0 -84
  37. data/src/vendors/bourbon/library/_clearfix.scss +0 -25
  38. data/src/vendors/bourbon/library/_contrast-switch.scss +0 -81
  39. data/src/vendors/bourbon/library/_ellipsis.scss +0 -36
  40. data/src/vendors/bourbon/library/_font-face.scss +0 -65
  41. data/src/vendors/bourbon/library/_font-stacks.scss +0 -248
  42. data/src/vendors/bourbon/library/_hide-text.scss +0 -24
  43. data/src/vendors/bourbon/library/_hide-visually.scss +0 -70
  44. data/src/vendors/bourbon/library/_margin.scss +0 -37
  45. data/src/vendors/bourbon/library/_modular-scale.scss +0 -120
  46. data/src/vendors/bourbon/library/_overflow-wrap.scss +0 -25
  47. data/src/vendors/bourbon/library/_padding.scss +0 -36
  48. data/src/vendors/bourbon/library/_position.scss +0 -62
  49. data/src/vendors/bourbon/library/_prefixer.scss +0 -37
  50. data/src/vendors/bourbon/library/_shade.scss +0 -32
  51. data/src/vendors/bourbon/library/_size.scss +0 -50
  52. data/src/vendors/bourbon/library/_strip-unit.scss +0 -17
  53. data/src/vendors/bourbon/library/_text-inputs.scss +0 -163
  54. data/src/vendors/bourbon/library/_timing-functions.scss +0 -36
  55. data/src/vendors/bourbon/library/_tint.scss +0 -32
  56. data/src/vendors/bourbon/library/_triangle.scss +0 -82
  57. data/src/vendors/bourbon/library/_value-prefixer.scss +0 -37
  58. data/src/vendors/bourbon/settings/_settings.scss +0 -75
  59. data/src/vendors/bourbon/utilities/_assign-inputs.scss +0 -28
  60. data/src/vendors/bourbon/utilities/_compact-shorthand.scss +0 -42
  61. data/src/vendors/bourbon/utilities/_contrast-ratio.scss +0 -31
  62. data/src/vendors/bourbon/utilities/_directional-property.scss +0 -68
  63. data/src/vendors/bourbon/utilities/_fetch-bourbon-setting.scss +0 -16
  64. data/src/vendors/bourbon/utilities/_font-source-declaration.scss +0 -52
  65. data/src/vendors/bourbon/utilities/_gamma.scss +0 -24
  66. data/src/vendors/bourbon/utilities/_lightness.scss +0 -24
  67. data/src/vendors/bourbon/utilities/_unpack-shorthand.scss +0 -29
  68. data/src/vendors/bourbon/validators/_contains-falsy.scss +0 -20
  69. data/src/vendors/bourbon/validators/_contains.scss +0 -26
  70. data/src/vendors/bourbon/validators/_is-color.scss +0 -13
  71. data/src/vendors/bourbon/validators/_is-length.scss +0 -20
  72. data/src/vendors/bourbon/validators/_is-number.scss +0 -15
  73. 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
- );