geekspace 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE +21 -0
- data/README.md +15 -0
- data/_includes/comments.html +28 -0
- data/_includes/foot.html +11 -0
- data/_includes/footer.html +5 -0
- data/_includes/head.html +99 -0
- data/_includes/header.html +3 -0
- data/_includes/intro.html +6 -0
- data/_includes/nav.html +17 -0
- data/_includes/pagination.html +23 -0
- data/_includes/post-share.html +8 -0
- data/_layouts/compress.html +11 -0
- data/_layouts/default.html +12 -0
- data/_layouts/home.html +47 -0
- data/_layouts/page.html +12 -0
- data/_layouts/post.html +16 -0
- data/_sass/_layout.scss +364 -0
- data/_sass/_syntax-highlighting.scss +96 -0
- data/_sass/_variables.scss +47 -0
- data/_sass/base/_base.scss +11 -0
- data/_sass/base/_buttons.scss +37 -0
- data/_sass/base/_forms.scss +90 -0
- data/_sass/base/_lists.scss +31 -0
- data/_sass/base/_reset.scss +54 -0
- data/_sass/base/_tables.scss +25 -0
- data/_sass/base/_typography.scss +139 -0
- data/_sass/bourbon/_bourbon.scss +54 -0
- data/_sass/bourbon/bourbon/helpers/_buttons-list.scss +14 -0
- data/_sass/bourbon/bourbon/helpers/_scales.scss +27 -0
- data/_sass/bourbon/bourbon/helpers/_text-inputs-list.scss +26 -0
- data/_sass/bourbon/bourbon/library/_border-color.scss +26 -0
- data/_sass/bourbon/bourbon/library/_border-radius.scss +85 -0
- data/_sass/bourbon/bourbon/library/_border-style.scss +25 -0
- data/_sass/bourbon/bourbon/library/_border-width.scss +25 -0
- data/_sass/bourbon/bourbon/library/_buttons.scss +84 -0
- data/_sass/bourbon/bourbon/library/_clearfix.scss +25 -0
- data/_sass/bourbon/bourbon/library/_contrast-switch.scss +81 -0
- data/_sass/bourbon/bourbon/library/_ellipsis.scss +36 -0
- data/_sass/bourbon/bourbon/library/_font-face.scss +65 -0
- data/_sass/bourbon/bourbon/library/_font-stacks.scss +248 -0
- data/_sass/bourbon/bourbon/library/_hide-text.scss +24 -0
- data/_sass/bourbon/bourbon/library/_hide-visually.scss +70 -0
- data/_sass/bourbon/bourbon/library/_margin.scss +37 -0
- data/_sass/bourbon/bourbon/library/_modular-scale.scss +120 -0
- data/_sass/bourbon/bourbon/library/_overflow-wrap.scss +25 -0
- data/_sass/bourbon/bourbon/library/_padding.scss +36 -0
- data/_sass/bourbon/bourbon/library/_position.scss +62 -0
- data/_sass/bourbon/bourbon/library/_prefixer.scss +37 -0
- data/_sass/bourbon/bourbon/library/_shade.scss +32 -0
- data/_sass/bourbon/bourbon/library/_size.scss +50 -0
- data/_sass/bourbon/bourbon/library/_strip-unit.scss +17 -0
- data/_sass/bourbon/bourbon/library/_text-inputs.scss +163 -0
- data/_sass/bourbon/bourbon/library/_timing-functions.scss +36 -0
- data/_sass/bourbon/bourbon/library/_tint.scss +32 -0
- data/_sass/bourbon/bourbon/library/_triangle.scss +82 -0
- data/_sass/bourbon/bourbon/library/_value-prefixer.scss +37 -0
- data/_sass/bourbon/bourbon/settings/_settings.scss +75 -0
- data/_sass/bourbon/bourbon/utilities/_assign-inputs.scss +28 -0
- data/_sass/bourbon/bourbon/utilities/_compact-shorthand.scss +42 -0
- data/_sass/bourbon/bourbon/utilities/_contrast-ratio.scss +31 -0
- data/_sass/bourbon/bourbon/utilities/_directional-property.scss +68 -0
- data/_sass/bourbon/bourbon/utilities/_fetch-bourbon-setting.scss +16 -0
- data/_sass/bourbon/bourbon/utilities/_font-source-declaration.scss +52 -0
- data/_sass/bourbon/bourbon/utilities/_gamma.scss +24 -0
- data/_sass/bourbon/bourbon/utilities/_lightness.scss +24 -0
- data/_sass/bourbon/bourbon/utilities/_unpack-shorthand.scss +29 -0
- data/_sass/bourbon/bourbon/validators/_contains-falsy.scss +20 -0
- data/_sass/bourbon/bourbon/validators/_contains.scss +26 -0
- data/_sass/bourbon/bourbon/validators/_is-color.scss +13 -0
- data/_sass/bourbon/bourbon/validators/_is-length.scss +20 -0
- data/_sass/bourbon/bourbon/validators/_is-number.scss +15 -0
- data/_sass/bourbon/bourbon/validators/_is-size.scss +18 -0
- data/_sass/geekspace.scss +8 -0
- data/assets/css/main.scss +5 -0
- data/assets/icons/FontAwesome/FontAwesome.otf +0 -0
- data/assets/icons/FontAwesome/fontawesome-webfont.eot +0 -0
- data/assets/icons/FontAwesome/fontawesome-webfont.svg +685 -0
- data/assets/icons/FontAwesome/fontawesome-webfont.ttf +0 -0
- data/assets/icons/FontAwesome/fontawesome-webfont.woff +0 -0
- data/assets/icons/FontAwesome/fontawesome-webfont.woff2 +0 -0
- data/assets/images/author.jpg +0 -0
- data/assets/images/cover.jpg +0 -0
- data/assets/images/logo.jpg +0 -0
- metadata +233 -0
@@ -0,0 +1,120 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Increments up or down a defined scale and returns an adjusted value. This
|
4
|
+
/// helps establish consistent measurements and spacial relationships throughout
|
5
|
+
/// your project. We provide a list of commonly used scales as
|
6
|
+
/// [pre-defined variables][scales].
|
7
|
+
///
|
8
|
+
/// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/helpers/_scales.scss
|
9
|
+
///
|
10
|
+
/// @argument {number (unitless)} $increment
|
11
|
+
/// How many steps to increment up or down the scale.
|
12
|
+
///
|
13
|
+
/// @argument {number (with unit) | list} $value [1em]
|
14
|
+
/// The base value the scale starts at. Can also be set globally using the
|
15
|
+
/// `modular-scale-base` key in the Bourbon settings.
|
16
|
+
///
|
17
|
+
/// @argument {number (unitless)} $ratio [1.25]
|
18
|
+
/// The ratio the scale is built on. Can also be set globally using the
|
19
|
+
/// `modular-scale-ratio` key in the Bourbon settings.
|
20
|
+
///
|
21
|
+
/// @return {number (with unit)}
|
22
|
+
///
|
23
|
+
/// @example scss
|
24
|
+
/// .element {
|
25
|
+
/// font-size: modular-scale(2);
|
26
|
+
/// }
|
27
|
+
///
|
28
|
+
/// // CSS Output
|
29
|
+
/// .element {
|
30
|
+
/// font-size: 1.5625em;
|
31
|
+
/// }
|
32
|
+
///
|
33
|
+
/// @example scss
|
34
|
+
/// .element {
|
35
|
+
/// margin-right: modular-scale(3, 2em);
|
36
|
+
/// }
|
37
|
+
///
|
38
|
+
/// // CSS Output
|
39
|
+
/// .element {
|
40
|
+
/// margin-right: 3.90625em;
|
41
|
+
/// }
|
42
|
+
///
|
43
|
+
/// @example scss
|
44
|
+
/// .element {
|
45
|
+
/// font-size: modular-scale(3, 1em 1.6em, $major-seventh);
|
46
|
+
/// }
|
47
|
+
///
|
48
|
+
/// // CSS Output
|
49
|
+
/// .element {
|
50
|
+
/// font-size: 3em;
|
51
|
+
/// }
|
52
|
+
///
|
53
|
+
/// @example scss
|
54
|
+
/// // Globally change the base ratio
|
55
|
+
/// $bourbon: (
|
56
|
+
/// "modular-scale-ratio": 1.2,
|
57
|
+
/// );
|
58
|
+
///
|
59
|
+
/// .element {
|
60
|
+
/// font-size: modular-scale(3);
|
61
|
+
/// }
|
62
|
+
///
|
63
|
+
/// // CSS Output
|
64
|
+
/// .element {
|
65
|
+
/// font-size: 1.728em;
|
66
|
+
/// }
|
67
|
+
///
|
68
|
+
/// @require {function} _fetch-bourbon-setting
|
69
|
+
|
70
|
+
@function modular-scale(
|
71
|
+
$increment,
|
72
|
+
$value: _fetch-bourbon-setting("modular-scale-base"),
|
73
|
+
$ratio: _fetch-bourbon-setting("modular-scale-ratio")
|
74
|
+
) {
|
75
|
+
$v1: nth($value, 1);
|
76
|
+
$v2: nth($value, length($value));
|
77
|
+
$value: $v1;
|
78
|
+
|
79
|
+
// scale $v2 to just above $v1
|
80
|
+
@while $v2 > $v1 {
|
81
|
+
$v2: ($v2 / $ratio); // will be off-by-1
|
82
|
+
}
|
83
|
+
@while $v2 < $v1 {
|
84
|
+
$v2: ($v2 * $ratio); // will fix off-by-1
|
85
|
+
}
|
86
|
+
|
87
|
+
// check AFTER scaling $v2 to prevent double-counting corner-case
|
88
|
+
$double-stranded: $v2 > $v1;
|
89
|
+
|
90
|
+
@if $increment > 0 {
|
91
|
+
@for $i from 1 through $increment {
|
92
|
+
@if $double-stranded and ($v1 * $ratio) > $v2 {
|
93
|
+
$value: $v2;
|
94
|
+
$v2: ($v2 * $ratio);
|
95
|
+
} @else {
|
96
|
+
$v1: ($v1 * $ratio);
|
97
|
+
$value: $v1;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
@if $increment < 0 {
|
103
|
+
// adjust $v2 to just below $v1
|
104
|
+
@if $double-stranded {
|
105
|
+
$v2: ($v2 / $ratio);
|
106
|
+
}
|
107
|
+
|
108
|
+
@for $i from $increment through -1 {
|
109
|
+
@if $double-stranded and ($v1 / $ratio) < $v2 {
|
110
|
+
$value: $v2;
|
111
|
+
$v2: ($v2 / $ratio);
|
112
|
+
} @else {
|
113
|
+
$v1: ($v1 / $ratio);
|
114
|
+
$value: $v1;
|
115
|
+
}
|
116
|
+
}
|
117
|
+
}
|
118
|
+
|
119
|
+
@return $value;
|
120
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Outputs the `overflow-wrap` property and its legacy name `word-wrap` to
|
4
|
+
/// support browsers that do not yet use `overflow-wrap`.
|
5
|
+
///
|
6
|
+
/// @argument {string} $wrap [break-word]
|
7
|
+
/// Accepted CSS values are `normal`, `break-word`, `inherit`, `initial`,
|
8
|
+
/// or `unset`.
|
9
|
+
///
|
10
|
+
/// @example scss
|
11
|
+
/// .wrapper {
|
12
|
+
/// @include overflow-wrap;
|
13
|
+
/// }
|
14
|
+
///
|
15
|
+
/// // CSS Output
|
16
|
+
/// .wrapper {
|
17
|
+
/// word-wrap: break-word;
|
18
|
+
/// overflow-wrap: break-word;
|
19
|
+
/// }
|
20
|
+
|
21
|
+
@mixin overflow-wrap($wrap: break-word) {
|
22
|
+
word-wrap: $wrap;
|
23
|
+
// stylelint-disable-next-line order/properties-alphabetical-order
|
24
|
+
overflow-wrap: $wrap;
|
25
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides a concise method for targeting `padding` on specific sides of a
|
4
|
+
/// box. Use a `null` value to “skip” a side.
|
5
|
+
///
|
6
|
+
/// @argument {list} $values
|
7
|
+
/// List of padding values; accepts CSS shorthand.
|
8
|
+
///
|
9
|
+
/// @example scss
|
10
|
+
/// .element-one {
|
11
|
+
/// @include padding(null 1rem);
|
12
|
+
/// }
|
13
|
+
///
|
14
|
+
/// // CSS Output
|
15
|
+
/// .element-one {
|
16
|
+
/// padding-left: 1rem;
|
17
|
+
/// padding-right: 1rem;
|
18
|
+
/// }
|
19
|
+
///
|
20
|
+
/// @example scss
|
21
|
+
/// .element-two {
|
22
|
+
/// @include padding(10vh null 10px 5%);
|
23
|
+
/// }
|
24
|
+
///
|
25
|
+
/// // CSS Output
|
26
|
+
/// .element-two {
|
27
|
+
/// padding-bottom: 10px;
|
28
|
+
/// padding-left: 5%;
|
29
|
+
/// padding-top: 10vh;
|
30
|
+
/// }
|
31
|
+
///
|
32
|
+
/// @require {mixin} _directional-property
|
33
|
+
|
34
|
+
@mixin padding($values) {
|
35
|
+
@include _directional-property(padding, null, $values);
|
36
|
+
}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Provides a concise, one-line method for setting an element’s positioning
|
4
|
+
/// properties: `position`, `top`, `right`, `bottom` and `left`. Use a `null`
|
5
|
+
/// value to “skip” an edge of the box.
|
6
|
+
///
|
7
|
+
/// @argument {string} $position
|
8
|
+
/// A CSS position value.
|
9
|
+
///
|
10
|
+
/// @argument {list} $box-edge-values
|
11
|
+
/// List of lengths; accepts CSS shorthand.
|
12
|
+
///
|
13
|
+
/// @example scss
|
14
|
+
/// .element {
|
15
|
+
/// @include position(relative, 0 null null 10em);
|
16
|
+
/// }
|
17
|
+
///
|
18
|
+
/// // CSS Output
|
19
|
+
/// .element {
|
20
|
+
/// left: 10em;
|
21
|
+
/// position: relative;
|
22
|
+
/// top: 0;
|
23
|
+
/// }
|
24
|
+
///
|
25
|
+
/// @example scss
|
26
|
+
/// .element {
|
27
|
+
/// @include position(absolute, 0);
|
28
|
+
/// }
|
29
|
+
///
|
30
|
+
/// // CSS Output
|
31
|
+
/// .element {
|
32
|
+
/// position: absolute;
|
33
|
+
/// top: 0;
|
34
|
+
/// right: 0;
|
35
|
+
/// bottom: 0;
|
36
|
+
/// left: 0;
|
37
|
+
/// }
|
38
|
+
///
|
39
|
+
/// @require {function} _is-length
|
40
|
+
///
|
41
|
+
/// @require {function} _unpack-shorthand
|
42
|
+
|
43
|
+
@mixin position(
|
44
|
+
$position,
|
45
|
+
$box-edge-values
|
46
|
+
) {
|
47
|
+
$box-edge-values: _unpack-shorthand($box-edge-values);
|
48
|
+
$offsets: (
|
49
|
+
"top": nth($box-edge-values, 1),
|
50
|
+
"right": nth($box-edge-values, 2),
|
51
|
+
"bottom": nth($box-edge-values, 3),
|
52
|
+
"left": nth($box-edge-values, 4),
|
53
|
+
);
|
54
|
+
|
55
|
+
position: $position;
|
56
|
+
|
57
|
+
@each $offset, $value in $offsets {
|
58
|
+
@if _is-length($value) {
|
59
|
+
#{$offset}: $value;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Generates vendor prefixes.
|
4
|
+
///
|
5
|
+
/// @argument {string} $property
|
6
|
+
/// Property to prefix.
|
7
|
+
///
|
8
|
+
/// @argument {string} $value
|
9
|
+
/// Value to use.
|
10
|
+
///
|
11
|
+
/// @argument {list} $prefixes
|
12
|
+
/// Vendor prefixes to output.
|
13
|
+
///
|
14
|
+
/// @example scss
|
15
|
+
/// .element {
|
16
|
+
/// @include prefixer(appearance, none, ("webkit", "moz"));
|
17
|
+
/// }
|
18
|
+
///
|
19
|
+
/// // CSS Output
|
20
|
+
/// .element {
|
21
|
+
/// -webkit-appearance: none;
|
22
|
+
/// -moz-appearance: none;
|
23
|
+
/// appearance: none;
|
24
|
+
/// }
|
25
|
+
///
|
26
|
+
/// @author Hugo Giraudel
|
27
|
+
|
28
|
+
@mixin prefixer(
|
29
|
+
$property,
|
30
|
+
$value,
|
31
|
+
$prefixes: ()
|
32
|
+
) {
|
33
|
+
@each $prefix in $prefixes {
|
34
|
+
#{"-" + $prefix + "-" + $property}: $value;
|
35
|
+
}
|
36
|
+
#{$property}: $value;
|
37
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
|
3
|
+
/// Mixes a color with black.
|
4
|
+
///
|
5
|
+
/// @argument {color} $color
|
6
|
+
///
|
7
|
+
/// @argument {number (percentage)} $percent
|
8
|
+
/// The amount of black to be mixed in.
|
9
|
+
///
|
10
|
+
/// @return {color}
|
11
|
+
///
|
12
|
+
/// @example scss
|
13
|
+
/// .element {
|
14
|
+
/// background-color: shade(#ffbb52, 60%);
|
15
|
+
/// }
|
16
|
+
///
|
17
|
+
/// // CSS Output
|
18
|
+
/// .element {
|
19
|
+
/// background-color: #664a20;
|
20
|
+
/// }
|
21
|
+
|
22
|
+
@function shade(
|
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 `shade` mixin.";
|
29
|
+
} @else {
|
30
|
+
@return mix(#000, $color, $percent);
|
31
|
+
}
|
32
|
+
}
|
@@ -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);
|