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,50 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Sets the `width` and `height` of the element in one statement.
4
+ ///
5
+ /// @argument {number (with unit) | string} $width
6
+ ///
7
+ /// @argument {number (with unit) | string} $height [$width]
8
+ ///
9
+ /// @example scss
10
+ /// .first-element {
11
+ /// @include size(2em);
12
+ /// }
13
+ ///
14
+ /// // CSS Output
15
+ /// .first-element {
16
+ /// width: 2em;
17
+ /// height: 2em;
18
+ /// }
19
+ ///
20
+ /// @example scss
21
+ /// .second-element {
22
+ /// @include size(auto, 10em);
23
+ /// }
24
+ ///
25
+ /// // CSS Output
26
+ /// .second-element {
27
+ /// width: auto;
28
+ /// height: 10em;
29
+ /// }
30
+ ///
31
+ /// @require {function} _is-size
32
+
33
+ @mixin size(
34
+ $width,
35
+ $height: $width
36
+ ) {
37
+ @if _is-size($height) {
38
+ height: $height;
39
+ } @else {
40
+ @error "`#{$height}` is not a valid length for the `$height` argument " +
41
+ "in the `size` mixin.";
42
+ }
43
+
44
+ @if _is-size($width) {
45
+ width: $width;
46
+ } @else {
47
+ @error "`#{$width}` is not a valid length for the `$width` argument " +
48
+ "in the `size` mixin.";
49
+ }
50
+ }
@@ -0,0 +1,17 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Strips the unit from a number.
4
+ ///
5
+ /// @argument {number} $value
6
+ ///
7
+ /// @return {number (unitless)}
8
+ ///
9
+ /// @example scss
10
+ /// $dimension: strip-unit(10em);
11
+ ///
12
+ /// // Output
13
+ /// $dimension: 10;
14
+
15
+ @function strip-unit($value) {
16
+ @return ($value / ($value * 0 + 1));
17
+ }
@@ -0,0 +1,163 @@
1
+ @charset "UTF-8";
2
+
3
+ ////
4
+ /// @type list
5
+ ///
6
+ /// @require {function} _assign-inputs
7
+ ///
8
+ /// @require {variable} $_text-inputs-list
9
+ ////
10
+
11
+ /// A list of all _text-based_ HTML inputs. Please note that you must
12
+ /// interpolate the variable (`#{}`) to use it as a selector.
13
+ ///
14
+ /// @example scss
15
+ /// #{$all-text-inputs} {
16
+ /// border: 1px solid #ccc;
17
+ /// }
18
+ ///
19
+ /// // CSS Output
20
+ /// [type='color'],
21
+ /// [type='date'],
22
+ /// [type='datetime'],
23
+ /// [type='datetime-local'],
24
+ /// [type='email'],
25
+ /// [type='month'],
26
+ /// [type='number'],
27
+ /// [type='password'],
28
+ /// [type='search'],
29
+ /// [type='tel'],
30
+ /// [type='text'],
31
+ /// [type='time'],
32
+ /// [type='url'],
33
+ /// [type='week'],
34
+ /// input:not([type]),
35
+ /// textarea {
36
+ /// border: 1px solid #ccc;
37
+ /// }
38
+
39
+ $all-text-inputs: _assign-inputs($_text-inputs-list);
40
+
41
+ /// A list of all _text-based_ HTML inputs with the `:active` pseudo-class
42
+ /// applied. Please note that you must interpolate the variable (`#{}`) to use
43
+ /// it as a selector.
44
+ ///
45
+ /// @example scss
46
+ /// #{$all-text-inputs-active} {
47
+ /// border: 1px solid #aaa;
48
+ /// }
49
+ ///
50
+ /// // CSS Output
51
+ /// [type='color']:active,
52
+ /// [type='date']:active,
53
+ /// [type='datetime']:active,
54
+ /// [type='datetime-local']:active,
55
+ /// [type='email']:active,
56
+ /// [type='month']:active,
57
+ /// [type='number']:active,
58
+ /// [type='password']:active,
59
+ /// [type='search']:active,
60
+ /// [type='tel']:active,
61
+ /// [type='text']:active,
62
+ /// [type='time']:active,
63
+ /// [type='url']:active,
64
+ /// [type='week']:active,
65
+ /// input:not([type]):active,
66
+ /// textarea:active {
67
+ /// border: 1px solid #aaa;
68
+ /// }
69
+
70
+ $all-text-inputs-active: _assign-inputs($_text-inputs-list, active);
71
+
72
+ /// A list of all _text-based_ HTML inputs with the `:focus` pseudo-class
73
+ /// applied. Please note that you must interpolate the variable (`#{}`) to use
74
+ /// it as a selector.
75
+ ///
76
+ /// @example scss
77
+ /// #{$all-text-inputs-focus} {
78
+ /// border: 1px solid #1565c0;
79
+ /// }
80
+ ///
81
+ /// // CSS Output
82
+ /// [type='color']:focus,
83
+ /// [type='date']:focus,
84
+ /// [type='datetime']:focus,
85
+ /// [type='datetime-local']:focus,
86
+ /// [type='email']:focus,
87
+ /// [type='month']:focus,
88
+ /// [type='number']:focus,
89
+ /// [type='password']:focus,
90
+ /// [type='search']:focus,
91
+ /// [type='tel']:focus,
92
+ /// [type='text']:focus,
93
+ /// [type='time']:focus,
94
+ /// [type='url']:focus,
95
+ /// [type='week']:focus,
96
+ /// input:not([type]):focus,
97
+ /// textarea:focus {
98
+ /// border: 1px solid #1565c0;
99
+ /// }
100
+
101
+ $all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus);
102
+
103
+ /// A list of all _text-based_ HTML inputs with the `:hover` pseudo-class
104
+ /// applied. Please note that you must interpolate the variable (`#{}`) to use
105
+ /// it as a selector.
106
+ ///
107
+ /// @example scss
108
+ /// #{$all-text-inputs-hover} {
109
+ /// border: 1px solid #aaa;
110
+ /// }
111
+ ///
112
+ /// // CSS Output
113
+ /// [type='color']:hover,
114
+ /// [type='date']:hover,
115
+ /// [type='datetime']:hover,
116
+ /// [type='datetime-local']:hover,
117
+ /// [type='email']:hover,
118
+ /// [type='month']:hover,
119
+ /// [type='number']:hover,
120
+ /// [type='password']:hover,
121
+ /// [type='search']:hover,
122
+ /// [type='tel']:hover,
123
+ /// [type='text']:hover,
124
+ /// [type='time']:hover,
125
+ /// [type='url']:hover,
126
+ /// [type='week']:hover,
127
+ /// input:not([type]):hover,
128
+ /// textarea:hover {
129
+ /// border: 1px solid #aaa;
130
+ /// }
131
+
132
+ $all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover);
133
+
134
+ /// A list of all _text-based_ HTML inputs with the `:invalid` pseudo-class
135
+ /// applied. Please note that you must interpolate the variable (`#{}`) to use
136
+ /// it as a selector.
137
+ ///
138
+ /// @example scss
139
+ /// #{$all-text-inputs-invalid} {
140
+ /// border: 1px solid #00f;
141
+ /// }
142
+ ///
143
+ /// // CSS Output
144
+ /// [type='color']:invalid,
145
+ /// [type='date']:invalid,
146
+ /// [type='datetime']:invalid,
147
+ /// [type='datetime-local']:invalid,
148
+ /// [type='email']:invalid,
149
+ /// [type='month']:invalid,
150
+ /// [type='number']:invalid,
151
+ /// [type='password']:invalid,
152
+ /// [type='search']:invalid,
153
+ /// [type='tel']:invalid,
154
+ /// [type='text']:invalid,
155
+ /// [type='time']:invalid,
156
+ /// [type='url']:invalid,
157
+ /// [type='week']:invalid,
158
+ /// input:not([type]):invalid,
159
+ /// textarea:invalid {
160
+ /// border: 1px solid #00f;
161
+ /// }
162
+
163
+ $all-text-inputs-invalid: _assign-inputs($_text-inputs-list, invalid);
@@ -0,0 +1,36 @@
1
+ @charset "UTF-8";
2
+
3
+ ////
4
+ /// CSS cubic-bezier timing functions.
5
+ ///
6
+ /// @link https://goo.gl/p8u6SK
7
+ ///
8
+ /// @type string
9
+ ////
10
+
11
+ $ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
12
+ $ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
13
+ $ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
14
+ $ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
15
+ $ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
16
+ $ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
17
+ $ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
18
+ $ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
19
+
20
+ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
21
+ $ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
22
+ $ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
23
+ $ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
24
+ $ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
25
+ $ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
26
+ $ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
27
+ $ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
28
+
29
+ $ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
30
+ $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
31
+ $ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
32
+ $ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
33
+ $ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
34
+ $ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
35
+ $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
36
+ $ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
@@ -0,0 +1,32 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Mixes a color with white.
4
+ ///
5
+ /// @argument {color} $color
6
+ ///
7
+ /// @argument {number (percentage)} $percent
8
+ /// The amount of white to be mixed in.
9
+ ///
10
+ /// @return {color}
11
+ ///
12
+ /// @example scss
13
+ /// .element {
14
+ /// background-color: tint(#6ecaa6, 40%);
15
+ /// }
16
+ ///
17
+ /// // CSS Output
18
+ /// .element {
19
+ /// background-color: #a8dfc9;
20
+ /// }
21
+
22
+ @function tint(
23
+ $color,
24
+ $percent
25
+ ) {
26
+ @if not _is-color($color) {
27
+ @error "`#{$color}` is not a valid color for the `$color` argument in " +
28
+ "the `tint` mixin.";
29
+ } @else {
30
+ @return mix(#fff, $color, $percent);
31
+ }
32
+ }
@@ -0,0 +1,82 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Generates a triangle pointing in a specified direction.
4
+ ///
5
+ /// @argument {string} $direction
6
+ /// The direction the triangle should point. Accepts `up`, `up-right`,
7
+ /// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
8
+ ///
9
+ /// @argument {number (with unit)} $width
10
+ /// Width of the triangle.
11
+ ///
12
+ /// @argument {number (with unit)} $height
13
+ /// Height of the triangle.
14
+ ///
15
+ /// @argument {color} $color
16
+ /// Color of the triangle.
17
+ ///
18
+ /// @example scss
19
+ /// .element {
20
+ /// &::before {
21
+ /// @include triangle("up", 2rem, 1rem, #b25c9c);
22
+ /// content: "";
23
+ /// }
24
+ /// }
25
+ ///
26
+ /// // CSS Output
27
+ /// .element::before {
28
+ /// border-style: solid;
29
+ /// height: 0;
30
+ /// width: 0;
31
+ /// border-color: transparent transparent #b25c9c;
32
+ /// border-width: 0 1rem 1rem;
33
+ /// content: "";
34
+ /// }
35
+
36
+ @mixin triangle(
37
+ $direction,
38
+ $width,
39
+ $height,
40
+ $color
41
+ ) {
42
+ @if not index(
43
+ "up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left",
44
+ $direction
45
+ ) {
46
+ @error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
47
+ "`down`, `down-left`, `left` or `up-left`.";
48
+ } @else if not _is-color($color) {
49
+ @error "`#{$color}` is not a valid color for the `$color` argument in " +
50
+ "the `triangle` mixin.";
51
+ } @else {
52
+ border-style: solid;
53
+ height: 0;
54
+ width: 0;
55
+
56
+ @if $direction == "up" {
57
+ border-color: transparent transparent $color;
58
+ border-width: 0 ($width / 2) $height;
59
+ } @else if $direction == "up-right" {
60
+ border-color: transparent $color transparent transparent;
61
+ border-width: 0 $width $width 0;
62
+ } @else if $direction == "right" {
63
+ border-color: transparent transparent transparent $color;
64
+ border-width: ($height / 2) 0 ($height / 2) $width;
65
+ } @else if $direction == "down-right" {
66
+ border-color: transparent transparent $color;
67
+ border-width: 0 0 $width $width;
68
+ } @else if $direction == "down" {
69
+ border-color: $color transparent transparent;
70
+ border-width: $height ($width / 2) 0;
71
+ } @else if $direction == "down-left" {
72
+ border-color: transparent transparent transparent $color;
73
+ border-width: $width 0 0 $width;
74
+ } @else if $direction == "left" {
75
+ border-color: transparent $color transparent transparent;
76
+ border-width: ($height / 2) $width ($height / 2) 0;
77
+ } @else if $direction == "up-left" {
78
+ border-color: $color transparent transparent;
79
+ border-width: $width $width 0 0;
80
+ }
81
+ }
82
+ }
@@ -0,0 +1,37 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Generates vendor prefixes for values.
4
+ ///
5
+ /// @argument {string} $property
6
+ /// Property to use.
7
+ ///
8
+ /// @argument {string} $value
9
+ /// Value to prefix.
10
+ ///
11
+ /// @argument {list} $prefixes
12
+ /// Vendor prefixes to output.
13
+ ///
14
+ /// @example scss
15
+ /// .element {
16
+ /// @include value-prefixer(cursor, grab, ("webkit", "moz"));
17
+ /// }
18
+ ///
19
+ /// // CSS Output
20
+ /// .element {
21
+ /// cursor: -webkit-grab;
22
+ /// cursor: -moz-grab;
23
+ /// cursor: grab;
24
+ /// }
25
+ ///
26
+ /// @author Matthew Tobiasz
27
+
28
+ @mixin value-prefixer(
29
+ $property,
30
+ $value,
31
+ $prefixes: ()
32
+ ) {
33
+ @each $prefix in $prefixes {
34
+ #{$property}: #{"-" + $prefix + "-" + $value};
35
+ }
36
+ #{$property}: $value;
37
+ }
@@ -0,0 +1,75 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Default global Bourbon settings. Values in this map are overwritten by any
4
+ /// values set in the `$bourbon` map.
5
+ ///
6
+ /// @type map
7
+ ///
8
+ /// @property {color} contrast-switch-dark-color [#000]
9
+ /// Global dark color for the `contrast-switch` function.
10
+ ///
11
+ /// @property {color} contrast-switch-light-color [#fff]
12
+ /// Global light color for the `contrast-switch` function.
13
+ ///
14
+ /// @property {list} global-font-file-formats [("woff2", "woff")]
15
+ /// Global font file formats for the `font-face` mixin.
16
+ ///
17
+ /// @property {number (with unit)} modular-scale-base [1em]
18
+ /// Global base value for the `modular-scale` function.
19
+ ///
20
+ /// @property {number (unitless)} modular-scale-ratio [$major-third (1.25)]
21
+ /// Global base ratio for the `modular-scale` function.
22
+ ///
23
+ /// @property {boolean} rails-asset-pipeline [false]
24
+ /// Set this to `true` when using the Rails Asset Pipeline and Bourbon will
25
+ /// write asset paths using
26
+ /// [sass-rails’ asset helpers](https://github.com/rails/sass-rails#asset-helpers).
27
+ ///
28
+ /// @access private
29
+
30
+ $_bourbon-defaults: (
31
+ "contrast-switch-dark-color": #000,
32
+ "contrast-switch-light-color": #fff,
33
+ "global-font-file-formats": ("woff2", "woff"),
34
+ "modular-scale-base": 1em,
35
+ "modular-scale-ratio": $major-third,
36
+ "rails-asset-pipeline": false,
37
+ );
38
+
39
+ /// Global Bourbon settings.
40
+ ///
41
+ /// @name Settings
42
+ ///
43
+ /// @type map
44
+ ///
45
+ /// @property {color} contrast-switch-dark-color [#000]
46
+ /// Global dark color for the `contrast-switch` function.
47
+ ///
48
+ /// @property {color} contrast-switch-light-color [#fff]
49
+ /// Global light color for the `contrast-switch` function.
50
+ ///
51
+ /// @property {list} global-font-file-formats [("woff2", "woff")]
52
+ /// Global font file formats for the `font-face` mixin.
53
+ ///
54
+ /// @property {number (with unit)} modular-scale-base [1em]
55
+ /// Global base value for the `modular-scale` function.
56
+ ///
57
+ /// @property {number (unitless)} modular-scale-ratio [$major-third (1.25)]
58
+ /// Global base ratio for the `modular-scale` function.
59
+ ///
60
+ /// @property {boolean} rails-asset-pipeline [false]
61
+ /// Set this to `true` when using the Rails Asset Pipeline and Bourbon will
62
+ /// write asset paths using
63
+ /// [sass-rails’ asset helpers](https://github.com/rails/sass-rails#asset-helpers).
64
+ ///
65
+ /// @example scss
66
+ /// $bourbon: (
67
+ /// "contrast-switch-dark-color": #000,
68
+ /// "contrast-switch-light-color": #fff,
69
+ /// "global-font-file-formats": ("woff2", "woff"),
70
+ /// "modular-scale-base": 1em,
71
+ /// "modular-scale-ratio": $major-third,
72
+ /// "rails-asset-pipeline": false,
73
+ /// );
74
+
75
+ $bourbon: () !default;
@@ -0,0 +1,28 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Append pseudo-classes to a selector(s).
4
+ ///
5
+ /// @argument {list | string} $inputs
6
+ /// A selector, or list of selectors, to apply the pseudo-class to.
7
+ ///
8
+ /// @argument {pseudo-class} $pseudo [null]
9
+ /// The pseudo-class to be appended.
10
+ ///
11
+ /// @return {list}
12
+ ///
13
+ /// @access private
14
+
15
+ @function _assign-inputs(
16
+ $inputs,
17
+ $pseudo: null
18
+ ) {
19
+ $list: ();
20
+
21
+ @each $input in $inputs {
22
+ $input: unquote($input);
23
+ $input: if($pseudo, $input + ":" + $pseudo, $input);
24
+ $list: append($list, $input, comma);
25
+ }
26
+
27
+ @return $list;
28
+ }
@@ -0,0 +1,42 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Transforms shorthand to its shortest possible form.
4
+ ///
5
+ /// @argument {list} $values
6
+ /// List of directional values.
7
+ ///
8
+ /// @example scss
9
+ /// $values: _compact-shorthand(10px 20px 10px 20px);
10
+ ///
11
+ /// // Output
12
+ /// $values: 10px 20px;
13
+ ///
14
+ /// @return {list}
15
+ ///
16
+ /// @access private
17
+
18
+ @function _compact-shorthand($values) {
19
+ $output: null;
20
+
21
+ $a: nth($values, 1);
22
+ $b: if(length($values) < 2, $a, nth($values, 2));
23
+ $c: if(length($values) < 3, $a, nth($values, 3));
24
+ $d: if(length($values) < 2, $a, nth($values, if(length($values) < 4, 2, 4)));
25
+
26
+ @if $a == 0 { $a: 0; }
27
+ @if $b == 0 { $b: 0; }
28
+ @if $c == 0 { $c: 0; }
29
+ @if $d == 0 { $d: 0; }
30
+
31
+ @if $a == $b and $a == $c and $a == $d {
32
+ $output: $a;
33
+ } @else if $a == $c and $b == $d {
34
+ $output: $a $b;
35
+ } @else if $b == $d {
36
+ $output: $a $b $c;
37
+ } @else {
38
+ $output: $a $b $c $d;
39
+ }
40
+
41
+ @return $output;
42
+ }
@@ -0,0 +1,31 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Programatically determines the contrast ratio between two colors.
4
+ ///
5
+ /// Note that the alpha channel is ignored.
6
+ ///
7
+ /// @link https://goo.gl/54htLV
8
+ ///
9
+ /// @argument {color (hex)} $color-1
10
+ ///
11
+ /// @argument {color (hex)} $color-2
12
+ ///
13
+ /// @return {number (1-21)}
14
+ ///
15
+ /// @example scss
16
+ /// _contrast-ratio(black, white)
17
+ ///
18
+ /// @require {function} _lightness
19
+ ///
20
+ /// @access private
21
+
22
+ @function _contrast-ratio($color-1, $color-2) {
23
+ $-local-lightness-1: _lightness($color-1) + 0.05;
24
+ $-local-lightness-2: _lightness($color-2) + 0.05;
25
+
26
+ @if $-local-lightness-1 > $-local-lightness-2 {
27
+ @return $-local-lightness-1 / $-local-lightness-2;
28
+ } @else {
29
+ @return $-local-lightness-2 / $-local-lightness-1;
30
+ }
31
+ }
@@ -0,0 +1,68 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Builds directional properties by parsing CSS shorthand values. For example,
4
+ /// a value of `10px null` will output top and bottom directional properties,
5
+ /// but the `null` skips left and right from being output.
6
+ ///
7
+ /// @argument {string} $property
8
+ /// Base property.
9
+ ///
10
+ /// @argument {string} $suffix
11
+ /// Suffix to append. Use `null` to omit.
12
+ ///
13
+ /// @argument {list} $values
14
+ /// List of values to set for the property.
15
+ ///
16
+ /// @example scss
17
+ /// .element {
18
+ /// @include _directional-property(border, width, null 5px);
19
+ /// }
20
+ ///
21
+ /// // CSS Output
22
+ /// .element {
23
+ /// border-right-width: 5px;
24
+ /// border-left-width: 5px;
25
+ /// }
26
+ ///
27
+ /// @require {function} _compact-shorthand
28
+ ///
29
+ /// @require {function} _contains-falsy
30
+ ///
31
+ /// @access private
32
+
33
+ @mixin _directional-property(
34
+ $property,
35
+ $suffix,
36
+ $values
37
+ ) {
38
+ $top: $property + "-top" + if($suffix, "-#{$suffix}", "");
39
+ $bottom: $property + "-bottom" + if($suffix, "-#{$suffix}", "");
40
+ $left: $property + "-left" + if($suffix, "-#{$suffix}", "");
41
+ $right: $property + "-right" + if($suffix, "-#{$suffix}", "");
42
+ $all: $property + if($suffix, "-#{$suffix}", "");
43
+
44
+ $values: _compact-shorthand($values);
45
+
46
+ @if _contains-falsy($values) {
47
+ @if nth($values, 1) { #{$top}: nth($values, 1); }
48
+
49
+ @if length($values) == 1 {
50
+ @if nth($values, 1) { #{$right}: nth($values, 1); }
51
+ } @else {
52
+ @if nth($values, 2) { #{$right}: nth($values, 2); }
53
+ }
54
+
55
+ @if length($values) == 2 {
56
+ @if nth($values, 1) { #{$bottom}: nth($values, 1); }
57
+ @if nth($values, 2) { #{$left}: nth($values, 2); }
58
+ } @else if length($values) == 3 {
59
+ @if nth($values, 3) { #{$bottom}: nth($values, 3); }
60
+ @if nth($values, 2) { #{$left}: nth($values, 2); }
61
+ } @else if length($values) == 4 {
62
+ @if nth($values, 3) { #{$bottom}: nth($values, 3); }
63
+ @if nth($values, 4) { #{$left}: nth($values, 4); }
64
+ }
65
+ } @else {
66
+ #{$all}: $values;
67
+ }
68
+ }
@@ -0,0 +1,16 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Return a Bourbon setting.
4
+ ///
5
+ /// @argument {string} $setting
6
+ ///
7
+ /// @return {boolean | color | list | number | string}
8
+ ///
9
+ /// @example scss
10
+ /// _fetch-bourbon-setting(rails-asset-pipeline)
11
+ ///
12
+ /// @access private
13
+
14
+ @function _fetch-bourbon-setting($setting) {
15
+ @return map-get(map-merge($_bourbon-defaults, $bourbon), $setting);
16
+ }