baseline-scss 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (76) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +15 -0
  3. data/lib/baseline-scss.rb +1 -0
  4. data/lib/baseline_scss/version.rb +3 -0
  5. data/lib/baseline_scss.rb +41 -0
  6. data/src/_content.scss +7 -0
  7. data/src/_helpers.scss +49 -0
  8. data/src/_mixins.scss +7 -0
  9. data/src/_reboot.scss +227 -0
  10. data/src/_variables.scss +149 -0
  11. data/src/_vendors.scss +3 -0
  12. data/src/baseline.scss +8 -0
  13. data/src/content/_buttons.scss +37 -0
  14. data/src/content/_code.scss +15 -0
  15. data/src/content/_forms.scss +88 -0
  16. data/src/content/_lists.scss +15 -0
  17. data/src/content/_multimedia.scss +8 -0
  18. data/src/content/_tables.scss +27 -0
  19. data/src/content/_typography.scss +99 -0
  20. data/src/mixins/_.scss +4 -0
  21. data/src/mixins/_after_border.scss +12 -0
  22. data/src/mixins/_clearfix.scss +7 -0
  23. data/src/mixins/_font_awesome.scss +12 -0
  24. data/src/mixins/_max_width_container.scss +15 -0
  25. data/src/mixins/_outline.scss +5 -0
  26. data/src/mixins/_sr_only.scss +17 -0
  27. data/src/vendors/_bourbon.scss +54 -0
  28. data/src/vendors/_include-media.scss +591 -0
  29. data/src/vendors/animate.css +4072 -0
  30. data/src/vendors/bourbon/helpers/_buttons-list.scss +14 -0
  31. data/src/vendors/bourbon/helpers/_scales.scss +27 -0
  32. data/src/vendors/bourbon/helpers/_text-inputs-list.scss +26 -0
  33. data/src/vendors/bourbon/library/_border-color.scss +26 -0
  34. data/src/vendors/bourbon/library/_border-radius.scss +85 -0
  35. data/src/vendors/bourbon/library/_border-style.scss +25 -0
  36. data/src/vendors/bourbon/library/_border-width.scss +25 -0
  37. data/src/vendors/bourbon/library/_buttons.scss +84 -0
  38. data/src/vendors/bourbon/library/_clearfix.scss +25 -0
  39. data/src/vendors/bourbon/library/_contrast-switch.scss +81 -0
  40. data/src/vendors/bourbon/library/_ellipsis.scss +36 -0
  41. data/src/vendors/bourbon/library/_font-face.scss +65 -0
  42. data/src/vendors/bourbon/library/_font-stacks.scss +248 -0
  43. data/src/vendors/bourbon/library/_hide-text.scss +24 -0
  44. data/src/vendors/bourbon/library/_hide-visually.scss +70 -0
  45. data/src/vendors/bourbon/library/_margin.scss +37 -0
  46. data/src/vendors/bourbon/library/_modular-scale.scss +120 -0
  47. data/src/vendors/bourbon/library/_overflow-wrap.scss +25 -0
  48. data/src/vendors/bourbon/library/_padding.scss +36 -0
  49. data/src/vendors/bourbon/library/_position.scss +62 -0
  50. data/src/vendors/bourbon/library/_prefixer.scss +37 -0
  51. data/src/vendors/bourbon/library/_shade.scss +32 -0
  52. data/src/vendors/bourbon/library/_size.scss +50 -0
  53. data/src/vendors/bourbon/library/_strip-unit.scss +17 -0
  54. data/src/vendors/bourbon/library/_text-inputs.scss +163 -0
  55. data/src/vendors/bourbon/library/_timing-functions.scss +36 -0
  56. data/src/vendors/bourbon/library/_tint.scss +32 -0
  57. data/src/vendors/bourbon/library/_triangle.scss +82 -0
  58. data/src/vendors/bourbon/library/_value-prefixer.scss +37 -0
  59. data/src/vendors/bourbon/settings/_settings.scss +75 -0
  60. data/src/vendors/bourbon/utilities/_assign-inputs.scss +28 -0
  61. data/src/vendors/bourbon/utilities/_compact-shorthand.scss +42 -0
  62. data/src/vendors/bourbon/utilities/_contrast-ratio.scss +31 -0
  63. data/src/vendors/bourbon/utilities/_directional-property.scss +68 -0
  64. data/src/vendors/bourbon/utilities/_fetch-bourbon-setting.scss +16 -0
  65. data/src/vendors/bourbon/utilities/_font-source-declaration.scss +52 -0
  66. data/src/vendors/bourbon/utilities/_gamma.scss +24 -0
  67. data/src/vendors/bourbon/utilities/_lightness.scss +24 -0
  68. data/src/vendors/bourbon/utilities/_unpack-shorthand.scss +29 -0
  69. data/src/vendors/bourbon/validators/_contains-falsy.scss +20 -0
  70. data/src/vendors/bourbon/validators/_contains.scss +26 -0
  71. data/src/vendors/bourbon/validators/_is-color.scss +13 -0
  72. data/src/vendors/bourbon/validators/_is-length.scss +20 -0
  73. data/src/vendors/bourbon/validators/_is-number.scss +15 -0
  74. data/src/vendors/bourbon/validators/_is-size.scss +18 -0
  75. data/src/vendors/normalize.css +349 -0
  76. metadata +130 -0
@@ -0,0 +1,14 @@
1
+ @charset "UTF-8";
2
+
3
+ /// A list of all HTML button elements.
4
+ ///
5
+ /// @type list
6
+ ///
7
+ /// @access private
8
+
9
+ $_buttons-list: (
10
+ "button",
11
+ "[type='button']",
12
+ "[type='reset']",
13
+ "[type='submit']",
14
+ );
@@ -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
+ }