bourbon 4.2.6 → 5.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.circleci/config.yml +34 -0
- data/.github/ISSUE_TEMPLATE.md +22 -0
- data/.github/PULL_REQUEST_TEMPLATE.md +10 -0
- data/.npmignore +6 -1
- data/.ruby-version +1 -0
- data/.scss-lint.yml +100 -8
- data/.tool-versions +1 -0
- data/CHANGELOG.md +406 -0
- data/CODE_OF_CONDUCT.md +6 -0
- data/CONTRIBUTING.md +77 -28
- data/Gemfile +1 -1
- data/LICENSE.md +1 -1
- data/README.md +161 -92
- data/RELEASING.md +34 -0
- data/Rakefile +0 -2
- data/bin/bourbon +1 -2
- data/bourbon.gemspec +32 -24
- data/bower.json +22 -19
- data/core/_bourbon.scss +54 -0
- data/core/bourbon/helpers/_buttons-list.scss +14 -0
- data/core/bourbon/helpers/_scales.scss +27 -0
- data/core/bourbon/helpers/_text-inputs-list.scss +26 -0
- data/core/bourbon/library/_border-color.scss +26 -0
- data/core/bourbon/library/_border-radius.scss +85 -0
- data/core/bourbon/library/_border-style.scss +25 -0
- data/core/bourbon/library/_border-width.scss +25 -0
- data/core/bourbon/library/_buttons.scss +84 -0
- data/{app/assets/stylesheets/addons → core/bourbon/library}/_clearfix.scss +5 -5
- data/core/bourbon/library/_contrast-switch.scss +81 -0
- data/{app/assets/stylesheets/addons → core/bourbon/library}/_ellipsis.scss +12 -6
- data/core/bourbon/library/_font-face.scss +65 -0
- data/core/bourbon/library/_font-stacks.scss +248 -0
- data/core/bourbon/library/_hide-text.scss +24 -0
- data/core/bourbon/library/_hide-visually.scss +70 -0
- data/core/bourbon/library/_margin.scss +37 -0
- data/core/bourbon/library/_modular-scale.scss +120 -0
- data/core/bourbon/library/_overflow-wrap.scss +24 -0
- data/core/bourbon/library/_padding.scss +36 -0
- data/core/bourbon/library/_position.scss +62 -0
- data/core/bourbon/library/_prefixer.scss +37 -0
- data/core/bourbon/library/_shade.scss +32 -0
- data/core/bourbon/library/_size.scss +50 -0
- data/core/bourbon/library/_strip-unit.scss +17 -0
- data/core/bourbon/library/_text-inputs.scss +163 -0
- data/{app/assets/stylesheets/addons → core/bourbon/library}/_timing-functions.scss +7 -3
- data/core/bourbon/library/_tint.scss +32 -0
- data/core/bourbon/library/_triangle.scss +82 -0
- data/core/bourbon/library/_value-prefixer.scss +37 -0
- data/core/bourbon/settings/_settings.scss +75 -0
- data/core/bourbon/utilities/_assign-inputs.scss +28 -0
- data/core/bourbon/utilities/_compact-shorthand.scss +39 -0
- data/core/bourbon/utilities/_contrast-ratio.scss +31 -0
- data/core/bourbon/utilities/_directional-property.scss +70 -0
- data/core/bourbon/utilities/_fetch-bourbon-setting.scss +16 -0
- data/{app/assets/stylesheets/helpers → core/bourbon/utilities}/_font-source-declaration.scss +23 -15
- data/core/bourbon/utilities/_gamma.scss +24 -0
- data/core/bourbon/utilities/_lightness.scss +24 -0
- data/{app/assets/stylesheets/functions/_unpack.scss → core/bourbon/utilities/_unpack-shorthand.scss} +8 -6
- data/{app/assets/stylesheets/functions → core/bourbon/validators}/_contains-falsy.scss +6 -6
- data/{app/assets/stylesheets/functions → core/bourbon/validators}/_contains.scss +8 -8
- data/core/bourbon/validators/_is-color.scss +13 -0
- data/{app/assets/stylesheets/functions → core/bourbon/validators}/_is-length.scss +6 -2
- data/core/bourbon/validators/_is-number.scss +15 -0
- data/core/bourbon/validators/_is-size.scss +18 -0
- data/features/install.feature +0 -1
- data/features/step_definitions/bourbon_steps.rb +13 -5
- data/features/update.feature +0 -1
- data/features/version.feature +0 -2
- data/index.js +2 -2
- data/lib/bourbon/generator.rb +11 -10
- data/lib/bourbon/version.rb +1 -1
- data/lib/bourbon.rb +3 -19
- data/package.json +18 -17
- data/spec/bourbon/{addons → library}/border_color_spec.rb +8 -8
- data/spec/bourbon/{addons → library}/border_radius_spec.rb +1 -1
- data/spec/bourbon/{addons → library}/border_style_spec.rb +1 -1
- data/spec/bourbon/{addons → library}/border_width_spec.rb +1 -1
- data/spec/bourbon/{addons → library}/buttons_spec.rb +4 -4
- data/spec/bourbon/{addons → library}/clearfix_spec.rb +3 -3
- data/spec/bourbon/library/contrast_switch_spec.rb +23 -0
- data/spec/bourbon/{addons → library}/ellipsis_spec.rb +1 -1
- data/spec/bourbon/library/font_face_spec_1.rb +16 -0
- data/spec/bourbon/library/font_face_spec_2.rb +21 -0
- data/spec/bourbon/library/font_face_spec_3.rb +16 -0
- data/spec/bourbon/library/font_face_spec_4.rb +17 -0
- data/spec/bourbon/library/font_stacks_spec.rb +42 -0
- data/spec/bourbon/{addons → library}/hide_text_spec.rb +1 -1
- data/spec/bourbon/library/hide_visually_spec.rb +37 -0
- data/spec/bourbon/{addons → library}/margin_spec.rb +1 -1
- data/spec/bourbon/{functions → library}/modular_scale_spec.rb +6 -6
- data/spec/bourbon/library/overflow_wrap_spec.rb +27 -0
- data/spec/bourbon/{addons → library}/padding_spec.rb +1 -1
- data/spec/bourbon/{addons → library}/position_spec.rb +1 -1
- data/spec/bourbon/library/prefixer_spec.rb +34 -0
- data/spec/bourbon/{functions → library}/shade_spec.rb +1 -1
- data/spec/bourbon/{addons → library}/size_spec.rb +1 -1
- data/spec/bourbon/{functions/strip_units_spec.rb → library/strip_unit_spec.rb} +2 -2
- data/spec/bourbon/{addons → library}/text_inputs_spec.rb +25 -15
- data/spec/bourbon/{functions → library}/tint_spec.rb +1 -1
- data/spec/bourbon/library/triangle_spec.rb +31 -0
- data/spec/bourbon/{functions → utilities}/assign_inputs_spec.rb +8 -8
- data/spec/bourbon/utilities/compact_shorthand_spec.rb +30 -0
- data/spec/bourbon/utilities/contrast_ratio_spec.rb +23 -0
- data/spec/bourbon/utilities/directional_property_spec.rb +28 -0
- data/spec/bourbon/utilities/fetch_bourbon_setting_spec.rb +31 -0
- data/spec/bourbon/{helpers → utilities}/font_source_declaration_spec.rb +1 -1
- data/spec/bourbon/utilities/gamma_spec.rb +23 -0
- data/spec/bourbon/utilities/lightness_spec.rb +31 -0
- data/spec/bourbon/{functions → utilities}/unpack_spec.rb +1 -1
- data/spec/bourbon/{functions → validators}/contains_spec.rb +1 -1
- data/spec/bourbon/{functions → validators}/is_length_spec.rb +1 -1
- data/spec/bourbon/{functions → validators}/is_number_spec.rb +1 -1
- data/spec/bourbon/{functions → validators}/is_size_spec.rb +1 -1
- data/spec/fixtures/_setup.scss +1 -1
- data/spec/fixtures/{addons → library}/border-color.scss +4 -4
- data/spec/fixtures/{addons → library}/border-radius.scss +0 -0
- data/spec/fixtures/{addons → library}/border-style.scss +0 -0
- data/spec/fixtures/{addons → library}/border-width.scss +0 -0
- data/spec/fixtures/{addons → library}/buttons.scss +0 -0
- data/spec/fixtures/{addons → library}/clearfix.scss +0 -0
- data/spec/fixtures/library/contrast-switch.scss +9 -0
- data/spec/fixtures/{addons → library}/ellipsis.scss +0 -0
- data/spec/fixtures/library/font-face-1.scss +6 -0
- data/spec/fixtures/library/font-face-2.scss +10 -0
- data/spec/fixtures/library/font-face-3.scss +8 -0
- data/spec/fixtures/library/font-face-4.scss +7 -0
- data/spec/fixtures/library/font-stacks.scss +41 -0
- data/spec/fixtures/{addons → library}/hide-text.scss +0 -0
- data/spec/fixtures/library/hide-visually.scss +9 -0
- data/spec/fixtures/{addons → library}/margin.scss +0 -0
- data/spec/fixtures/{functions → library}/modular-scale.scss +0 -0
- data/spec/fixtures/library/overflow-wrap.scss +9 -0
- data/spec/fixtures/{addons → library}/padding.scss +0 -0
- data/spec/fixtures/{addons → library}/position.scss +0 -4
- data/spec/fixtures/library/prefixer.scss +13 -0
- data/spec/fixtures/{functions → library}/shade.scss +1 -1
- data/spec/fixtures/{addons → library}/size.scss +2 -2
- data/spec/fixtures/library/strip-unit.scss +17 -0
- data/spec/fixtures/{addons → library}/text-inputs.scss +4 -0
- data/spec/fixtures/{functions → library}/tint.scss +1 -1
- data/spec/fixtures/library/triangle.scss +9 -0
- data/spec/fixtures/utilities/assign-inputs.scss +19 -0
- data/spec/fixtures/utilities/compact-shorthand.scss +21 -0
- data/spec/fixtures/utilities/contrast-ratio.scss +9 -0
- data/spec/fixtures/utilities/directional-property.scss +17 -0
- data/spec/fixtures/utilities/fetch-bourbon-setting.scss +16 -0
- data/spec/fixtures/utilities/font-source-declaration.scss +11 -0
- data/spec/fixtures/utilities/gamma.scss +9 -0
- data/spec/fixtures/utilities/lightness.scss +13 -0
- data/spec/fixtures/utilities/unpack.scss +17 -0
- data/spec/fixtures/{functions → validators}/contains.scss +1 -1
- data/spec/fixtures/{functions → validators}/is-length.scss +1 -1
- data/spec/fixtures/{functions → validators}/is-number.scss +1 -1
- data/spec/fixtures/{functions → validators}/is-size.scss +1 -1
- data/spec/support/matchers/have_value.rb +1 -1
- metadata +267 -272
- data/app/assets/stylesheets/_bourbon-deprecated-upcoming.scss +0 -411
- data/app/assets/stylesheets/_bourbon.scss +0 -87
- data/app/assets/stylesheets/addons/_border-color.scss +0 -26
- data/app/assets/stylesheets/addons/_border-radius.scss +0 -48
- data/app/assets/stylesheets/addons/_border-style.scss +0 -25
- data/app/assets/stylesheets/addons/_border-width.scss +0 -25
- data/app/assets/stylesheets/addons/_buttons.scss +0 -64
- data/app/assets/stylesheets/addons/_font-stacks.scss +0 -31
- data/app/assets/stylesheets/addons/_hide-text.scss +0 -27
- data/app/assets/stylesheets/addons/_margin.scss +0 -26
- data/app/assets/stylesheets/addons/_padding.scss +0 -26
- data/app/assets/stylesheets/addons/_position.scss +0 -48
- data/app/assets/stylesheets/addons/_prefixer.scss +0 -66
- data/app/assets/stylesheets/addons/_retina-image.scss +0 -25
- data/app/assets/stylesheets/addons/_size.scss +0 -51
- data/app/assets/stylesheets/addons/_text-inputs.scss +0 -113
- data/app/assets/stylesheets/addons/_triangle.scss +0 -63
- data/app/assets/stylesheets/addons/_word-wrap.scss +0 -29
- data/app/assets/stylesheets/css3/_animation.scss +0 -43
- data/app/assets/stylesheets/css3/_appearance.scss +0 -3
- data/app/assets/stylesheets/css3/_backface-visibility.scss +0 -3
- data/app/assets/stylesheets/css3/_background-image.scss +0 -42
- data/app/assets/stylesheets/css3/_background.scss +0 -55
- data/app/assets/stylesheets/css3/_border-image.scss +0 -59
- data/app/assets/stylesheets/css3/_calc.scss +0 -4
- data/app/assets/stylesheets/css3/_columns.scss +0 -47
- data/app/assets/stylesheets/css3/_filter.scss +0 -4
- data/app/assets/stylesheets/css3/_flex-box.scss +0 -287
- data/app/assets/stylesheets/css3/_font-face.scss +0 -24
- data/app/assets/stylesheets/css3/_font-feature-settings.scss +0 -4
- data/app/assets/stylesheets/css3/_hidpi-media-query.scss +0 -10
- data/app/assets/stylesheets/css3/_hyphens.scss +0 -4
- data/app/assets/stylesheets/css3/_image-rendering.scss +0 -14
- data/app/assets/stylesheets/css3/_keyframes.scss +0 -36
- data/app/assets/stylesheets/css3/_linear-gradient.scss +0 -38
- data/app/assets/stylesheets/css3/_perspective.scss +0 -8
- data/app/assets/stylesheets/css3/_placeholder.scss +0 -8
- data/app/assets/stylesheets/css3/_radial-gradient.scss +0 -39
- data/app/assets/stylesheets/css3/_selection.scss +0 -42
- data/app/assets/stylesheets/css3/_text-decoration.scss +0 -19
- data/app/assets/stylesheets/css3/_transform.scss +0 -15
- data/app/assets/stylesheets/css3/_transition.scss +0 -71
- data/app/assets/stylesheets/css3/_user-select.scss +0 -3
- data/app/assets/stylesheets/functions/_assign-inputs.scss +0 -11
- data/app/assets/stylesheets/functions/_is-light.scss +0 -21
- data/app/assets/stylesheets/functions/_is-number.scss +0 -11
- data/app/assets/stylesheets/functions/_is-size.scss +0 -13
- data/app/assets/stylesheets/functions/_modular-scale.scss +0 -69
- data/app/assets/stylesheets/functions/_px-to-em.scss +0 -13
- data/app/assets/stylesheets/functions/_px-to-rem.scss +0 -15
- data/app/assets/stylesheets/functions/_shade.scss +0 -24
- data/app/assets/stylesheets/functions/_strip-units.scss +0 -17
- data/app/assets/stylesheets/functions/_tint.scss +0 -24
- data/app/assets/stylesheets/functions/_transition-property-name.scss +0 -22
- data/app/assets/stylesheets/helpers/_convert-units.scss +0 -21
- data/app/assets/stylesheets/helpers/_directional-values.scss +0 -96
- data/app/assets/stylesheets/helpers/_gradient-positions-parser.scss +0 -13
- data/app/assets/stylesheets/helpers/_linear-angle-parser.scss +0 -25
- data/app/assets/stylesheets/helpers/_linear-gradient-parser.scss +0 -41
- data/app/assets/stylesheets/helpers/_linear-positions-parser.scss +0 -61
- data/app/assets/stylesheets/helpers/_linear-side-corner-parser.scss +0 -31
- data/app/assets/stylesheets/helpers/_radial-arg-parser.scss +0 -69
- data/app/assets/stylesheets/helpers/_radial-gradient-parser.scss +0 -50
- data/app/assets/stylesheets/helpers/_radial-positions-parser.scss +0 -18
- data/app/assets/stylesheets/helpers/_render-gradients.scss +0 -26
- data/app/assets/stylesheets/helpers/_shape-size-stripper.scss +0 -10
- data/app/assets/stylesheets/helpers/_str-to-num.scss +0 -50
- data/app/assets/stylesheets/settings/_asset-pipeline.scss +0 -7
- data/app/assets/stylesheets/settings/_prefixer.scss +0 -9
- data/app/assets/stylesheets/settings/_px-to-em.scss +0 -1
- data/lib/bourbon/engine.rb +0 -5
- data/lib/tasks/install.rake +0 -20
- data/sache.json +0 -5
- data/spec/bourbon/addons/font_stacks_spec.rb +0 -25
- data/spec/bourbon/addons/retina_image_spec.rb +0 -57
- data/spec/bourbon/addons/triangle_spec.rb +0 -32
- data/spec/bourbon/addons/word_wrap_spec.rb +0 -29
- data/spec/bourbon/css3/font_face_spec.rb +0 -45
- data/spec/bourbon/css3/hidpi_media_query_spec.rb +0 -23
- data/spec/bourbon/functions/is_light_spec.rb +0 -37
- data/spec/bourbon/functions/px_to_em_spec.rb +0 -31
- data/spec/bourbon/functions/px_to_rem_spec.rb +0 -25
- data/spec/bourbon/helpers/convert_units_spec.rb +0 -31
- data/spec/bourbon/helpers/directional_values_spec.rb +0 -39
- data/spec/bourbon/helpers/str_to_num_spec.rb +0 -25
- data/spec/fixtures/addons/font-stacks.scss +0 -21
- data/spec/fixtures/addons/retina-image.scss +0 -21
- data/spec/fixtures/addons/triangle.scss +0 -9
- data/spec/fixtures/addons/word-wrap.scss +0 -9
- data/spec/fixtures/css3/font-face.scss +0 -6
- data/spec/fixtures/css3/hidpi-media-query.scss +0 -13
- data/spec/fixtures/functions/assign-inputs.scss +0 -19
- data/spec/fixtures/functions/is-light.scss +0 -29
- data/spec/fixtures/functions/px-to-em.scss +0 -17
- data/spec/fixtures/functions/px-to-rem.scss +0 -15
- data/spec/fixtures/functions/strip-units.scss +0 -17
- data/spec/fixtures/functions/unpack.scss +0 -17
- data/spec/fixtures/helpers/convert-units.scss +0 -17
- data/spec/fixtures/helpers/directional-values.scss +0 -29
- data/spec/fixtures/helpers/font-source-declaration.scss +0 -10
- data/spec/fixtures/helpers/str-to-num.scss +0 -13
- data/spec/support/matchers/be_contained_in.rb +0 -10
@@ -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);
|
@@ -2,24 +2,24 @@
|
|
2
2
|
|
3
3
|
/// Provides an easy way to include a clearfix for containing floats.
|
4
4
|
///
|
5
|
-
/// @link
|
5
|
+
/// @link https://goo.gl/yP5hiZ
|
6
6
|
///
|
7
|
-
/// @example scss
|
7
|
+
/// @example scss
|
8
8
|
/// .element {
|
9
9
|
/// @include clearfix;
|
10
10
|
/// }
|
11
11
|
///
|
12
|
-
///
|
12
|
+
/// // CSS Output
|
13
13
|
/// .element::after {
|
14
14
|
/// clear: both;
|
15
15
|
/// content: "";
|
16
|
-
/// display:
|
16
|
+
/// display: block;
|
17
17
|
/// }
|
18
18
|
|
19
19
|
@mixin clearfix {
|
20
20
|
&::after {
|
21
21
|
clear: both;
|
22
22
|
content: "";
|
23
|
-
display:
|
23
|
+
display: block;
|
24
24
|
}
|
25
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
|
+
}
|
@@ -2,15 +2,18 @@
|
|
2
2
|
|
3
3
|
/// Truncates text and adds an ellipsis to represent overflow.
|
4
4
|
///
|
5
|
-
/// @
|
6
|
-
///
|
5
|
+
/// @argument {number} $width [100%]
|
6
|
+
/// The `max-width` for the string to respect before being truncated.
|
7
7
|
///
|
8
|
-
/// @
|
8
|
+
/// @argument {string} $display [inline-block]
|
9
|
+
/// Sets the display-value of the element.
|
10
|
+
///
|
11
|
+
/// @example scss
|
9
12
|
/// .element {
|
10
13
|
/// @include ellipsis;
|
11
14
|
/// }
|
12
15
|
///
|
13
|
-
///
|
16
|
+
/// // CSS Output
|
14
17
|
/// .element {
|
15
18
|
/// display: inline-block;
|
16
19
|
/// max-width: 100%;
|
@@ -20,8 +23,11 @@
|
|
20
23
|
/// word-wrap: normal;
|
21
24
|
/// }
|
22
25
|
|
23
|
-
@mixin ellipsis(
|
24
|
-
|
26
|
+
@mixin ellipsis(
|
27
|
+
$width: 100%,
|
28
|
+
$display: inline-block
|
29
|
+
) {
|
30
|
+
display: $display;
|
25
31
|
max-width: $width;
|
26
32
|
overflow: hidden;
|
27
33
|
text-overflow: ellipsis;
|
@@ -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 `eot`, `ttf`, `svg`, `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 [("ttf", "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 {string} $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
|
+
}
|
@@ -0,0 +1,248 @@
|
|
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
|
+
);
|