nk_jtb 0.13.1 → 0.14.0
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.
- package/docs/index.html +228 -205
- package/package.json +6 -14
- package/readme.md +1 -26
- package/src/base/_base.scss +4 -3
- package/src/color/_themes.scss +27 -28
- package/src/components/_accordion.scss +2 -1
- package/src/components/_box.scss +3 -2
- package/src/components/_button.scss +1 -1
- package/src/components/_menu.scss +7 -5
- package/src/extras/_nk-docs.scss +21 -20
- package/src/forms/_choices.scss +1 -1
- package/src/forms/_control.scss +2 -2
- package/src/functions/_colorFunctionsOld.scss +21 -0
- package/src/functions/_deepMapCheck.scss +6 -3
- package/src/functions/_deepMapGet.scss +5 -2
- package/src/functions/_sanitize.scss +2 -2
- package/src/functions/_strExplode.scss +14 -10
- package/src/functions/helpers/_map-and-list.scss +2 -1
- package/src/functions/helpers/_naming-and-formatting.scss +8 -5
- package/src/functions/helpers/_strippers.scss +10 -8
- package/src/functions/helpers/_utility.scss +4 -3
- package/src/functions/helpers/_validation.scss +2 -1
- package/src/jtb.scss +1 -1
- package/src/mixins/_colorThemeGenerators.scss +1 -1
- package/src/mixins/_extendedThemeClass.scss +21 -18
- package/src/mixins/_generate-classes.scss +3 -2
- package/src/mixins/_generate-magic-classes.scss +7 -6
- package/src/mixins/_generate-utilities.scss +10 -8
- package/src/mixins/_magicGridGenerators.scss +20 -19
- package/src/mixins/_make-position-based-class.scss +3 -2
- package/src/mixins/_state.scss +6 -5
- package/src/play.scss +14 -8
- package/src/utilities/_border.scss +3 -3
- package/src/utilities/_margin.scss +1 -1
- package/src/utilities/_padding.scss +1 -1
- package/src/utilities/_sizing.scss +2 -2
- package/src/utilities/_state.scss +12 -9
- package/src/utilities/_typography.scss +1 -1
- package/src/v1/functions/_color-functions.scss +44 -0
- package/src/variables/_base.scss +15 -7
- package/src/variables/_colors.scss +2 -1
- package/src/variables/_components.scss +9 -10
- package/src/variables/_utility_maps.scss +2 -2
- package/vite.config.js +0 -27
- package/.editorconfig +0 -9
- package/.prettierignore +0 -1
- package/.prettierrc +0 -3
- package/composer.lock +0 -1286
- package/src/functions/_colorFunctions.scss +0 -66
package/docs/index.html
CHANGED
|
@@ -1,205 +1,228 @@
|
|
|
1
|
-
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Nk_jtb - v0.
|
|
2
|
-
"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">Nk_jtb - 0.
|
|
3
|
-
// get the positions required to build up the class
|
|
4
|
-
// (x:(left, right), y:(top, bottom) ... etc)
|
|
5
|
-
$positions: map
|
|
6
|
-
|
|
7
|
-
@each $list in $values-list {
|
|
8
|
-
// exclude empty list when creating single list
|
|
9
|
-
@if ($list != ()) {
|
|
10
|
-
$numBreakPoints: list.length($list);
|
|
11
|
-
|
|
12
|
-
// set the value of the BP based on position using negative
|
|
13
|
-
// numbers. This makes sure the position is always the same
|
|
14
|
-
$baseValue: nth($list, -1);
|
|
15
|
-
$smValue: nth($list, -2);
|
|
16
|
-
$mdValue: if($numBreakPoints >= 3, nth($list, -3), null);
|
|
17
|
-
$lgValue: if($numBreakPoints >= 4, nth($list, -4), null);
|
|
18
|
-
|
|
19
|
-
$derived-class: derivedClass($identifier, $list, $is-parent);
|
|
20
|
-
|
|
21
|
-
// DO NOT use else-if statements when building the classes.
|
|
22
|
-
// You want to give all classes to the opportunity to build.
|
|
23
|
-
.#{$derived-class} {
|
|
24
|
-
@include handleMagicProperties($property, $baseValue, $positions);
|
|
25
|
-
|
|
26
|
-
@include from-sm {
|
|
27
|
-
@include handleMagicProperties($property, $smValue, $positions);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@if ($numBreakPoints >= 3) {
|
|
31
|
-
@include from-md {
|
|
32
|
-
@include handleMagicProperties($property, $mdValue, $positions);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@if ($numBreakPoints >= 4) {
|
|
37
|
-
@include from-lg {
|
|
38
|
-
@include handleMagicProperties($property, $lgValue, $positions);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@if ($numBreakPoints >= 5) {
|
|
43
|
-
@include from-xl {
|
|
44
|
-
@include handleMagicProperties($property, $xlValue, $positions);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}" data-collapsed="@mixin generate-magic-classes($property, $values-list, $identifier, $unit, $position-or-axis, $is-parent) { ... }"><code>@mixin generate-magic-classes($property, $values-list, $identifier, $unit, $position-or-axis, $is-parent) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate one ore more magic classes for a single property from a list of lists.</p><p><strong>NOTE:</strong> this mixin works with both position and unit based properties and supports parent/child classes.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$property</code></th><td data-label="desc"><p>The CSS property.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$values-list</code></th><td data-label="desc"><p>The list of values for the property .</p></td><td data-label="type"><code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$identifier</code></th><td data-label="desc"><p>The base class name.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$unit</code></th><td data-label="desc"><p>The unit for the property values (default: "rem").</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$position-or-axis</code></th><td data-label="desc"><p>The position or axis for the property (default: "").</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$is-parent</code></th><td data-label="desc"><p>Indicates if the class is applied to the parent</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table></section></section></section><section class="main__section"><h1 class="main__heading" id="class-makers"><div class="container">Class Makers</div></h1><section class="main__sub-section" id="class-makers-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="class-makers-mixin-make-single-property-class"><h3 class="item__heading"><a class="item__name" href="#class-makers-mixin-make-single-property-class">make-single-property-class</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin make-single-property-class($class, $property, $value, $breakpoints) {
|
|
51
|
-
.#{$class} {
|
|
52
|
-
#{$property}: $value;
|
|
53
|
-
}
|
|
54
|
-
@if ($breakpoints) {
|
|
55
|
-
@include make-from-breakpoint(($property: $value), $class, $breakpoints);
|
|
56
|
-
}
|
|
57
|
-
}" data-collapsed="@mixin make-single-property-class($class, $property, $value, $breakpoints) { ... }"><code>@mixin make-single-property-class($class, $property, $value, $breakpoints) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate class for a single property and optionally creates responsive classes for a range of breakpoints.</p><p><strong>NOTE:</strong> This mixin will create the base class as well as responsive classes.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$class</code></th><td data-label="desc"><p>The full class name.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$property</code></th><td data-label="desc"><p>The CSS property.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$value</code></th><td data-label="desc"><p>The value of the CSS property.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$breakpoints</code></th><td data-label="desc"><p>The list of breakpoints (optional).</p></td><td data-label="type"><code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>@include make-single-property-class('txt-red', 'color', 'red', ('sm', 'md'));</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-scss"><code>.txt-red { color: "red"; }
|
|
58
|
-
|
|
59
|
-
@media (min-width: 576px) {
|
|
60
|
-
.sm\:txt-red { color: "red"; }
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
@media (min-width: 768px) {
|
|
64
|
-
.md\:txt-red { color: "red"; }
|
|
65
|
-
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#responsive-class-makers-mixin-make-from-breakpoint"><code>make-from-breakpoint</code></a></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
@
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
@
|
|
82
|
-
$
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
@
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
}
|
|
187
|
-
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
}" data-collapsed="@
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Nk_jtb - v0.13.2</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="Nk_jtb - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Yet another utility based framework.</p>
|
|
2
|
+
"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">Nk_jtb - 0.13.2</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="class-generators"><a href="#class-generators">Class Generators</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="class-generators-mixin"><a href="#class-generators-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="class-generators" data-name="generate-magic-classes" data-type="mixin"><a href="#class-generators-mixin-generate-magic-classes">generate-magic-classes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="class-makers"><a href="#class-makers">Class Makers</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="class-makers-mixin"><a href="#class-makers-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="class-makers" data-name="make-single-property-class" data-type="mixin"><a href="#class-makers-mixin-make-single-property-class">make-single-property-class</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="color-functions"><a href="#color-functions">color-functions</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="color-functions-function"><a href="#color-functions-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="color-functions" data-name="text-color" data-type="function"><a href="#color-functions-function-text-color">text-color</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="property-makers"><a href="#property-makers">Property Makers</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="property-makers-mixin"><a href="#property-makers-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="property-makers" data-name="create-property" data-type="mixin"><a href="#property-makers-mixin-create-property">create-property</a></li><li class="sidebar__item sassdoc__item" data-group="property-makers" data-name="create-properties" data-type="mixin"><a href="#property-makers-mixin-create-properties">create-properties</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="responsive-class-makers"><a href="#responsive-class-makers">responsive-class-makers</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="responsive-class-makers-mixin"><a href="#responsive-class-makers-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="responsive-class-makers" data-name="make-from-breakpoint" data-type="mixin"><a href="#responsive-class-makers-mixin-make-from-breakpoint">make-from-breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="responsive-class-makers" data-name="make-to-breakpoint" data-type="mixin"><a href="#responsive-class-makers-mixin-make-to-breakpoint">make-to-breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="responsive-class-makers" data-name="make-on-breakpoint" data-type="mixin"><a href="#responsive-class-makers-mixin-make-on-breakpoint">make-on-breakpoint</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="sanitize-helpers"><a href="#sanitize-helpers">sanitize-helpers</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="sanitize-helpers-function"><a href="#sanitize-helpers-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="sanitize-helpers" data-name="stripDash" data-type="function"><a href="#sanitize-helpers-function-stripDash">stripDash</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="spacing-hacks"><a href="#spacing-hacks">Spacing Hacks</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="spacing-hacks-css"><a href="#spacing-hacks-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="spacing-hacks" data-name=".adjacent-list-space-1 + ul li:not(:first-child)" data-type="css"><a href="#spacing-hacks-css-.adjacent-list-space-1 + ul li:not(:first-child)">.adjacent-list-space-1 + ul li:not(:first-child)</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-helpers"><a href="#utility-helpers">utility-helpers</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-helpers-function"><a href="#utility-helpers-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-helpers" data-name="escapeDecimal" data-type="function"><a href="#utility-helpers-function-escapeDecimal">escapeDecimal</a></li><li class="sidebar__item sassdoc__item" data-group="utility-helpers" data-name="strReplace" data-type="function"><a href="#utility-helpers-function-strReplace">strReplace</a></li><li class="sidebar__item sassdoc__item" data-group="utility-helpers" data-name="toString" data-type="function"><a href="#utility-helpers-function-toString">toString</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><h1 class="main__heading" id="class-generators"><div class="container">Class Generators</div></h1><section class="main__sub-section" id="class-generators-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="class-generators-mixin-generate-magic-classes"><h3 class="item__heading"><a class="item__name" href="#class-generators-mixin-generate-magic-classes">generate-magic-classes</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin generate-magic-classes($property, $values-list, $identifier, $unit, $position-or-axis, $is-parent) {
|
|
3
|
+
// get the positions required to build up the class
|
|
4
|
+
// (x:(left, right), y:(top, bottom) ... etc)
|
|
5
|
+
$positions: map.get($axis-position-map, $position-or-axis);
|
|
6
|
+
|
|
7
|
+
@each $list in $values-list {
|
|
8
|
+
// exclude empty list when creating single list
|
|
9
|
+
@if ($list != ()) {
|
|
10
|
+
$numBreakPoints: list.length($list);
|
|
11
|
+
|
|
12
|
+
// set the value of the BP based on position using negative
|
|
13
|
+
// numbers. This makes sure the position is always the same
|
|
14
|
+
$baseValue: list.nth($list, -1);
|
|
15
|
+
$smValue: list.nth($list, -2);
|
|
16
|
+
$mdValue: if($numBreakPoints >= 3, list.nth($list, -3), null);
|
|
17
|
+
$lgValue: if($numBreakPoints >= 4, list.nth($list, -4), null);
|
|
18
|
+
|
|
19
|
+
$derived-class: derivedClass($identifier, $list, $is-parent);
|
|
20
|
+
|
|
21
|
+
// DO NOT use else-if statements when building the classes.
|
|
22
|
+
// You want to give all classes to the opportunity to build.
|
|
23
|
+
.#{$derived-class} {
|
|
24
|
+
@include handleMagicProperties($property, $baseValue, $positions);
|
|
25
|
+
|
|
26
|
+
@include from-sm {
|
|
27
|
+
@include handleMagicProperties($property, $smValue, $positions);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@if ($numBreakPoints >= 3) {
|
|
31
|
+
@include from-md {
|
|
32
|
+
@include handleMagicProperties($property, $mdValue, $positions);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@if ($numBreakPoints >= 4) {
|
|
37
|
+
@include from-lg {
|
|
38
|
+
@include handleMagicProperties($property, $lgValue, $positions);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@if ($numBreakPoints >= 5) {
|
|
43
|
+
@include from-xl {
|
|
44
|
+
@include handleMagicProperties($property, $xlValue, $positions);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}" data-collapsed="@mixin generate-magic-classes($property, $values-list, $identifier, $unit, $position-or-axis, $is-parent) { ... }"><code>@mixin generate-magic-classes($property, $values-list, $identifier, $unit, $position-or-axis, $is-parent) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate one ore more magic classes for a single property from a list of lists.</p><p><strong>NOTE:</strong> this mixin works with both position and unit based properties and supports parent/child classes.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$property</code></th><td data-label="desc"><p>The CSS property.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$values-list</code></th><td data-label="desc"><p>The list of values for the property .</p></td><td data-label="type"><code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$identifier</code></th><td data-label="desc"><p>The base class name.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$unit</code></th><td data-label="desc"><p>The unit for the property values (default: "rem").</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$position-or-axis</code></th><td data-label="desc"><p>The position or axis for the property (default: "").</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$is-parent</code></th><td data-label="desc"><p>Indicates if the class is applied to the parent</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table></section></section></section><section class="main__section"><h1 class="main__heading" id="class-makers"><div class="container">Class Makers</div></h1><section class="main__sub-section" id="class-makers-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="class-makers-mixin-make-single-property-class"><h3 class="item__heading"><a class="item__name" href="#class-makers-mixin-make-single-property-class">make-single-property-class</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin make-single-property-class($class, $property, $value, $breakpoints) {
|
|
51
|
+
.#{$class} {
|
|
52
|
+
#{$property}: $value;
|
|
53
|
+
}
|
|
54
|
+
@if ($breakpoints) {
|
|
55
|
+
@include make-from-breakpoint(($property: $value), $class, $breakpoints);
|
|
56
|
+
}
|
|
57
|
+
}" data-collapsed="@mixin make-single-property-class($class, $property, $value, $breakpoints) { ... }"><code>@mixin make-single-property-class($class, $property, $value, $breakpoints) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate class for a single property and optionally creates responsive classes for a range of breakpoints.</p><p><strong>NOTE:</strong> This mixin will create the base class as well as responsive classes.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$class</code></th><td data-label="desc"><p>The full class name.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$property</code></th><td data-label="desc"><p>The CSS property.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$value</code></th><td data-label="desc"><p>The value of the CSS property.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$breakpoints</code></th><td data-label="desc"><p>The list of breakpoints (optional).</p></td><td data-label="type"><code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>@include make-single-property-class('txt-red', 'color', 'red', ('sm', 'md'));</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-scss"><code>.txt-red { color: "red"; }
|
|
58
|
+
|
|
59
|
+
@media (min-width: 576px) {
|
|
60
|
+
.sm\:txt-red { color: "red"; }
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@media (min-width: 768px) {
|
|
64
|
+
.md\:txt-red { color: "red"; }
|
|
65
|
+
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#responsive-class-makers-mixin-make-from-breakpoint"><code>make-from-breakpoint</code></a></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="color-functions"><div class="container">color-functions</div></h1><div class="main__description"><div class="container"><p>Determines the appropriate text color (light or dark) based on the brightness of the given background color.</p><p>Note: the return colors are linked to the light or dark text color variables defined in the base variables file.</p></div></div><section class="main__sub-section" id="color-functions-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="color-functions-function-text-color"><h3 class="item__heading"><a class="item__name" href="#color-functions-function-text-color">text-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function text-color($bg-color) {
|
|
66
|
+
|
|
67
|
+
// return the default color if transparent
|
|
68
|
+
@if color.alpha($bg-color) == 0 {
|
|
69
|
+
@return $text-color;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
$threshold: 186; // Lightness threshold for detecting dark/light backgrounds
|
|
73
|
+
|
|
74
|
+
// Calculate the brightness of the background colour
|
|
75
|
+
$brightness: (
|
|
76
|
+
0.2126 * color.channel($bg-color, 'red', $space: rgb) +
|
|
77
|
+
0.7152 * color.channel($bg-color, 'green', $space: rgb) +
|
|
78
|
+
0.0722 * color.channel($bg-color, 'blue', $space: rgb)
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
@if $brightness > $threshold {
|
|
82
|
+
@return $dark-text;
|
|
83
|
+
} @else {
|
|
84
|
+
@return $light-text;
|
|
85
|
+
}
|
|
86
|
+
}" data-collapsed="@function text-color($bg-color) { ... }"><code>@function text-color($bg-color) { ... }</code></pre></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bg-color</code></th><td data-label="desc"><p>The background color to evaluate.</p></td><td data-label="type"><code>Color</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Color</code> —<p>Returns <code>$dark-text</code> if the background is light, otherwise returns <code>$light-text</code>.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.light-bg-dark-text { color: text-color(white); }
|
|
87
|
+
|
|
88
|
+
.dark-bg-light-text { color: text-color(black); }</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="property-makers"><div class="container">Property Makers</div></h1><section class="main__sub-section" id="property-makers-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="property-makers-mixin-create-property"><h3 class="item__heading"><a class="item__name" href="#property-makers-mixin-create-property">create-property</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin create-property($property, $value) {
|
|
89
|
+
#{$property}: $value;
|
|
90
|
+
}" data-collapsed="@mixin create-property($property, $value) { ... }"><code>@mixin create-property($property, $value) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Creates a single CSS property with a given value.</p><h3 id="use-case">Use Case</h3><p>Commonly used to recursively generate CSS properties.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$property</code></th><td data-label="desc"><p>The CSS property to generate.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$value</code></th><td data-label="desc"><p>The value for the CSS property including units.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.element {
|
|
91
|
+
@include create-property(background-color, red);
|
|
92
|
+
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.element {
|
|
93
|
+
background-color: red;
|
|
94
|
+
}</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#property-makers-mixin-create-properties"><code>create-properties</code></a></li></ul></section><section class="main__item container item" id="property-makers-mixin-create-properties"><h3 class="item__heading"><a class="item__name" href="#property-makers-mixin-create-properties">create-properties</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin create-properties($props) {
|
|
95
|
+
@each $property, $value in $props {
|
|
96
|
+
@include create-property($property, $value);
|
|
97
|
+
}
|
|
98
|
+
}" data-collapsed="@mixin create-properties($props) { ... }"><code>@mixin create-properties($props) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Create one or more properties from a map of key-value pairs.</p><h3 id="use-case">Use Case</h3><p>Commonly used to generate multiple CSS properties from a map of key-value pairs.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$props</code></th><td data-label="desc"><p>The map of properties and values.</p></td><td data-label="type"><code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.my-class {
|
|
99
|
+
@include create-properties((color: blue, background-color: white));
|
|
100
|
+
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.my-class {
|
|
101
|
+
color: blue;
|
|
102
|
+
background-color: white;
|
|
103
|
+
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#property-makers-mixin-create-property"><code>create-property</code></a></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="responsive-class-makers"><div class="container">responsive-class-makers</div></h1><section class="main__sub-section" id="responsive-class-makers-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="responsive-class-makers-mixin-make-from-breakpoint"><h3 class="item__heading"><a class="item__name" href="#responsive-class-makers-mixin-make-from-breakpoint">make-from-breakpoint</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin make-from-breakpoint($props, $identifier, $breakpoints) {
|
|
104
|
+
@each $bp in $breakpoints {
|
|
105
|
+
$derived-class: #{$bp}\:#{$identifier};
|
|
106
|
+
.#{$derived-class} {
|
|
107
|
+
@if ($bp == 'sm') {
|
|
108
|
+
@include from-sm {
|
|
109
|
+
@include create-properties($props);
|
|
110
|
+
}
|
|
111
|
+
} @else if($bp == 'md') {
|
|
112
|
+
@include from-md {
|
|
113
|
+
@include create-properties($props);
|
|
114
|
+
}
|
|
115
|
+
} @else if($bp == 'lg') {
|
|
116
|
+
@include from-lg {
|
|
117
|
+
@include create-properties($props);
|
|
118
|
+
}
|
|
119
|
+
} @else if($bp == 'xl') {
|
|
120
|
+
@include from-xl {
|
|
121
|
+
@include create-properties($props);
|
|
122
|
+
}
|
|
123
|
+
} @else if($bp == 'xxl') {
|
|
124
|
+
@include from-xxl {
|
|
125
|
+
@include create-properties($props);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}" data-collapsed="@mixin make-from-breakpoint($props, $identifier, $breakpoints) { ... }"><code>@mixin make-from-breakpoint($props, $identifier, $breakpoints) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate responsive class for one or more properties, starting FROM the specified breakpoints, across a range of breakpoints.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$props</code></th><td data-label="desc"><p>The map of properties and values.</p></td><td data-label="type"><code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$identifier</code></th><td data-label="desc"><p>A part of the base class name.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$breakpoints</code></th><td data-label="desc"><p>The list of breakpoints.</p></td><td data-label="type"><code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>@include make-from-breakpoint(
|
|
131
|
+
(display: flex, flex-direction: column),
|
|
132
|
+
'flex-column',
|
|
133
|
+
('sm', 'md')
|
|
134
|
+
);</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage (Named Arguments)</p></div><pre class="example__code language-scss"><code>@include make-from-breakpoint(
|
|
135
|
+
$props: (display: flex, flex-direction: column),
|
|
136
|
+
$identifier: 'flex-column',
|
|
137
|
+
$breakpoints: ('sm', 'md')
|
|
138
|
+
);</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-scss"><code>@media (min-width: 576px) {
|
|
139
|
+
.sm\:flex-column {
|
|
140
|
+
display: flex;
|
|
141
|
+
flex-direction: column;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
@media (min-width: 768px) {
|
|
145
|
+
.md\:flex-column {
|
|
146
|
+
display: flex;
|
|
147
|
+
flex-direction: column;
|
|
148
|
+
}
|
|
149
|
+
}</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#class-makers-mixin-make-single-property-class"><code>make-single-property-class</code></a></li></ul></section><section class="main__item container item" id="responsive-class-makers-mixin-make-to-breakpoint"><h3 class="item__heading"><a class="item__name" href="#responsive-class-makers-mixin-make-to-breakpoint">make-to-breakpoint</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin make-to-breakpoint($props, $identifier, $breakpoints) {
|
|
150
|
+
@each $bp in $breakpoints {
|
|
151
|
+
$derived-class: #{$bp}\:#{$identifier};
|
|
152
|
+
.to-#{$derived-class} {
|
|
153
|
+
@if ($bp == 'sm') {
|
|
154
|
+
@include to-sm {
|
|
155
|
+
@include create-properties($props);
|
|
156
|
+
}
|
|
157
|
+
} @else if($bp == 'md') {
|
|
158
|
+
@include to-md {
|
|
159
|
+
@include create-properties($props);
|
|
160
|
+
}
|
|
161
|
+
} @else if($bp == 'lg') {
|
|
162
|
+
@include to-lg {
|
|
163
|
+
@include create-properties($props);
|
|
164
|
+
}
|
|
165
|
+
} @else if($bp == 'xl') {
|
|
166
|
+
@include to-xl {
|
|
167
|
+
@include create-properties($props);
|
|
168
|
+
}
|
|
169
|
+
} @else {
|
|
170
|
+
@error 'The device '#{$bp}' is not available for this mixin, you need to remove it from the args list.';
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}" data-collapsed="@mixin make-to-breakpoint($props, $identifier, $breakpoints) { ... }"><code>@mixin make-to-breakpoint($props, $identifier, $breakpoints) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate responsive classes for one or more properties, up TO the specified breakpoints, across a range of breakpoints.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$props</code></th><td data-label="desc"><p>The map of properties and values.</p></td><td data-label="type"><code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$identifier</code></th><td data-label="desc"><p>A part of the base class name.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$breakpoints</code></th><td data-label="desc"><p>The list of breakpoints.</p></td><td data-label="type"><code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Throws</h3><ul class="list-unstyled"><li><p>The device</p></li></ul></section><section class="main__item container item" id="responsive-class-makers-mixin-make-on-breakpoint"><h3 class="item__heading"><a class="item__name" href="#responsive-class-makers-mixin-make-on-breakpoint">make-on-breakpoint</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin make-on-breakpoint($props, $identifier, $breakpoints) {
|
|
175
|
+
@each $bp in $breakpoints {
|
|
176
|
+
$derived-class: #{$bp}\:#{$identifier};
|
|
177
|
+
.on-#{$derived-class} {
|
|
178
|
+
@if ($bp == 'sm') {
|
|
179
|
+
@include on-sm {
|
|
180
|
+
@include create-properties($props);
|
|
181
|
+
}
|
|
182
|
+
} @else if($bp == 'md') {
|
|
183
|
+
@include on-md {
|
|
184
|
+
@include create-properties($props);
|
|
185
|
+
}
|
|
186
|
+
} @else if($bp == 'lg') {
|
|
187
|
+
@include on-lg {
|
|
188
|
+
@include create-properties($props);
|
|
189
|
+
}
|
|
190
|
+
} @else if($bp == 'xl') {
|
|
191
|
+
@include on-xl {
|
|
192
|
+
@include create-properties($props);
|
|
193
|
+
}
|
|
194
|
+
} @else if($bp == 'xxl') {
|
|
195
|
+
@include on-xxl {
|
|
196
|
+
@include create-properties($props);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}" data-collapsed="@mixin make-on-breakpoint($props, $identifier, $breakpoints) { ... }"><code>@mixin make-on-breakpoint($props, $identifier, $breakpoints) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate responsive classes for one or more properties, starting ON the specified breakpoints, across a range of breakpoints.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$props</code></th><td data-label="desc"><p>The map of properties and values.</p></td><td data-label="type"><code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$identifier</code></th><td data-label="desc"><p>A part of the base class name.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$breakpoints</code></th><td data-label="desc"><p>The list of breakpoints.</p></td><td data-label="type"><code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table></section></section></section><section class="main__section"><h1 class="main__heading" id="sanitize-helpers"><div class="container">sanitize-helpers</div></h1><section class="main__sub-section" id="sanitize-helpers-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="sanitize-helpers-function-stripDash"><h3 class="item__heading"><a class="item__name" href="#sanitize-helpers-function-stripDash">stripDash</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function stripDash($string) {
|
|
202
|
+
@if string.slice($string, -1) == "-" {
|
|
203
|
+
@return string.slice($string, 1, -2);
|
|
204
|
+
}
|
|
205
|
+
@return $string;
|
|
206
|
+
}" data-collapsed="@function stripDash($string) { ... }"><code>@function stripDash($string) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Strips the trailing dash '-' from a string if it exists.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$string</code></th><td data-label="desc"><p>The string to process.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>$result: stripDash("bdr-");
|
|
207
|
+
// Given the input "bdr-", the function will return "bdr".</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="spacing-hacks"><div class="container">Spacing Hacks</div></h1><section class="main__sub-section" id="spacing-hacks-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="spacing-hacks-css-.adjacent-list-space-1 + ul li:not(:first-child)"><h3 class="item__heading"><a class="item__name" href="#spacing-hacks-css-.adjacent-list-space-1 + ul li:not(:first-child)">.adjacent-list-space-1 + ul li:not(:first-child)</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.adjacent-list-space-1 + ul li:not(:first-child) {
|
|
208
|
+
margin-block-start: 1rem;
|
|
209
|
+
}</code>" data-collapsed=".adjacent-list-space-1 + ul li:not(:first-child) { ... }"><code>.adjacent-list-space-1 + ul li:not(:first-child) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Increase the space between adjacent list items. This eliminates the need to add a class to the <code>ul</code> or each <code>li</code>.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code><div class="adjacent-list-space-1"></div>
|
|
210
|
+
- List item one
|
|
211
|
+
- List item two</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="utility-helpers"><div class="container">utility-helpers</div></h1><section class="main__sub-section" id="utility-helpers-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="utility-helpers-function-escapeDecimal"><h3 class="item__heading"><a class="item__name" href="#utility-helpers-function-escapeDecimal">escapeDecimal</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function escapeDecimal($int) {
|
|
212
|
+
$escaped: "#{$int}";
|
|
213
|
+
@return strReplace($escaped, ".", "\\.");
|
|
214
|
+
}" data-collapsed="@function escapeDecimal($int) { ... }"><code>@function escapeDecimal($int) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Escape decimals in a string. Works with both quoted and unquoted values.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$int</code></th><td data-label="desc"><p>The number with a decimal to escape.</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>The string with the decimal escaped.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>escapeDecimal(9.5);
|
|
215
|
+
// Outputs '9\.5';</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#utility-helpers-function-strReplace"><code>strReplace</code></a></li></ul></section><section class="main__item container item" id="utility-helpers-function-strReplace"><h3 class="item__heading"><a class="item__name" href="#utility-helpers-function-strReplace">strReplace</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function strReplace($string, $search, $replace) {
|
|
216
|
+
$index: string.index($string, $search);
|
|
217
|
+
|
|
218
|
+
@if $index {
|
|
219
|
+
@return string.slice($string, 1, $index - 1) + $replace +
|
|
220
|
+
strReplace(string.slice($string, $index + string.length($search)), $search, $replace);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@return $string;
|
|
224
|
+
}" data-collapsed="@function strReplace($string, $search, $replace) { ... }"><code>@function strReplace($string, $search, $replace) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Search and replace all occurrences of a substring within a string.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$string</code></th><td data-label="desc"><p>The original string.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$search</code></th><td data-label="desc"><p>The substring to replace.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$replace</code></th><td data-label="desc"><p>The string to replace the substring with. Defaults to an empty string.</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>The string with all occurrences of the substring replaced.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>strReplace("maxw-20rem", "rem", "");
|
|
225
|
+
// Outputs 'maxw-20';</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#utility-helpers-function-escapeDecimal"><code>escapeDecimal</code></a></li></ul></section><section class="main__item container item" id="utility-helpers-function-toString"><h3 class="item__heading"><a class="item__name" href="#utility-helpers-function-toString">toString</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function toString($int) {
|
|
226
|
+
@return "#{$int}";
|
|
227
|
+
}" data-collapsed="@function toString($int) { ... }"><code>@function toString($int) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Cast a number to a string.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$int</code></th><td data-label="desc"><p>The number to cast.</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>The number cast to a string.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>toString(123);
|
|
228
|
+
// Outputs '123';</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">Nk_jtb</span><!-- Version --> <span class="project-info__version">- v0.13.2</span><!-- License --></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
|