baseline-scss 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE +15 -0
- data/lib/baseline-scss.rb +1 -0
- data/lib/baseline_scss/version.rb +3 -0
- data/lib/baseline_scss.rb +41 -0
- data/src/_content.scss +7 -0
- data/src/_helpers.scss +49 -0
- data/src/_mixins.scss +7 -0
- data/src/_reboot.scss +227 -0
- data/src/_variables.scss +149 -0
- data/src/_vendors.scss +3 -0
- data/src/baseline.scss +8 -0
- data/src/content/_buttons.scss +37 -0
- data/src/content/_code.scss +15 -0
- data/src/content/_forms.scss +88 -0
- data/src/content/_lists.scss +15 -0
- data/src/content/_multimedia.scss +8 -0
- data/src/content/_tables.scss +27 -0
- data/src/content/_typography.scss +99 -0
- data/src/mixins/_.scss +4 -0
- data/src/mixins/_after_border.scss +12 -0
- data/src/mixins/_clearfix.scss +7 -0
- data/src/mixins/_font_awesome.scss +12 -0
- data/src/mixins/_max_width_container.scss +15 -0
- data/src/mixins/_outline.scss +5 -0
- data/src/mixins/_sr_only.scss +17 -0
- data/src/vendors/_bourbon.scss +54 -0
- data/src/vendors/_include-media.scss +591 -0
- data/src/vendors/animate.css +4072 -0
- data/src/vendors/bourbon/helpers/_buttons-list.scss +14 -0
- data/src/vendors/bourbon/helpers/_scales.scss +27 -0
- data/src/vendors/bourbon/helpers/_text-inputs-list.scss +26 -0
- data/src/vendors/bourbon/library/_border-color.scss +26 -0
- data/src/vendors/bourbon/library/_border-radius.scss +85 -0
- data/src/vendors/bourbon/library/_border-style.scss +25 -0
- data/src/vendors/bourbon/library/_border-width.scss +25 -0
- data/src/vendors/bourbon/library/_buttons.scss +84 -0
- data/src/vendors/bourbon/library/_clearfix.scss +25 -0
- data/src/vendors/bourbon/library/_contrast-switch.scss +81 -0
- data/src/vendors/bourbon/library/_ellipsis.scss +36 -0
- data/src/vendors/bourbon/library/_font-face.scss +65 -0
- data/src/vendors/bourbon/library/_font-stacks.scss +248 -0
- data/src/vendors/bourbon/library/_hide-text.scss +24 -0
- data/src/vendors/bourbon/library/_hide-visually.scss +70 -0
- data/src/vendors/bourbon/library/_margin.scss +37 -0
- data/src/vendors/bourbon/library/_modular-scale.scss +120 -0
- data/src/vendors/bourbon/library/_overflow-wrap.scss +25 -0
- data/src/vendors/bourbon/library/_padding.scss +36 -0
- data/src/vendors/bourbon/library/_position.scss +62 -0
- data/src/vendors/bourbon/library/_prefixer.scss +37 -0
- data/src/vendors/bourbon/library/_shade.scss +32 -0
- data/src/vendors/bourbon/library/_size.scss +50 -0
- data/src/vendors/bourbon/library/_strip-unit.scss +17 -0
- data/src/vendors/bourbon/library/_text-inputs.scss +163 -0
- data/src/vendors/bourbon/library/_timing-functions.scss +36 -0
- data/src/vendors/bourbon/library/_tint.scss +32 -0
- data/src/vendors/bourbon/library/_triangle.scss +82 -0
- data/src/vendors/bourbon/library/_value-prefixer.scss +37 -0
- data/src/vendors/bourbon/settings/_settings.scss +75 -0
- data/src/vendors/bourbon/utilities/_assign-inputs.scss +28 -0
- data/src/vendors/bourbon/utilities/_compact-shorthand.scss +42 -0
- data/src/vendors/bourbon/utilities/_contrast-ratio.scss +31 -0
- data/src/vendors/bourbon/utilities/_directional-property.scss +68 -0
- data/src/vendors/bourbon/utilities/_fetch-bourbon-setting.scss +16 -0
- data/src/vendors/bourbon/utilities/_font-source-declaration.scss +52 -0
- data/src/vendors/bourbon/utilities/_gamma.scss +24 -0
- data/src/vendors/bourbon/utilities/_lightness.scss +24 -0
- data/src/vendors/bourbon/utilities/_unpack-shorthand.scss +29 -0
- data/src/vendors/bourbon/validators/_contains-falsy.scss +20 -0
- data/src/vendors/bourbon/validators/_contains.scss +26 -0
- data/src/vendors/bourbon/validators/_is-color.scss +13 -0
- data/src/vendors/bourbon/validators/_is-length.scss +20 -0
- data/src/vendors/bourbon/validators/_is-number.scss +15 -0
- data/src/vendors/bourbon/validators/_is-size.scss +18 -0
- data/src/vendors/normalize.css +349 -0
- 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
|
+
}
|