nk_jtb 0.9.16 → 0.9.18
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 +29 -29
- package/package.json +1 -1
- package/readme.md +5 -3
- package/src/_nk.scss +1 -66
- package/src/base/_base.scss +5 -7
- package/src/base/_content_gap.scss +1 -1
- package/src/components/_accordion.scss +7 -6
- package/src/components/_dropdown.scss +0 -10
- package/src/components-extended/_hero.scss +11 -19
- package/src/extras/_nk-docs.scss +192 -0
- package/src/jtb.scss +2 -4
- package/src/mixins/{_makeMagicClassMixins.scss → _generate-magic-classes.scss} +24 -6
- package/src/mixins/_makeClassMixins.scss +1 -1
- package/src/play.scss +22 -12
- package/src/utilities/{_visibility-display.scss → _display-visibility.scss} +32 -10
- package/src/utilities/_flexbox.scss +1 -2
- package/src/utilities/_grid.scss +6 -4
- package/src/utilities/_layout.scss +0 -2
- package/src/utilities/_margin.scss +2 -2
- package/src/utilities/_padding.scss +2 -2
- package/src/variables/_base.scss +5 -6
- package/src/variables/_components.scss +0 -16
- package/src/variables/_utility_maps.scss +7 -2
- package/src/components/_article.scss +0 -17
- package/src/extras/_naykel-docs.scss +0 -97
- package/src/mixins/_magicClassGenerators.scss +0 -103
package/docs/index.html
CHANGED
|
@@ -1,30 +1,5 @@
|
|
|
1
|
-
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Nk_jtb - v0.9.
|
|
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.9.
|
|
3
|
-
.#{$class} {
|
|
4
|
-
#{$property}: $value;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
@if ($breakpoints) {
|
|
8
|
-
// prettier-ignore
|
|
9
|
-
@include makeFromBreakpoint(($property: $value), $class, $breakpoints);
|
|
10
|
-
}
|
|
11
|
-
}" data-collapsed="@mixin makeSinglePropertyClass($class, $property, $value, $breakpoints) { ... }"><code>@mixin makeSinglePropertyClass($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><em>NOTE:</em> 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 fill 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 makeSinglePropertyClass('txt-red', 'color', 'red', ('sm', 'md'));
|
|
12
|
-
|
|
13
|
-
// .txt-red {
|
|
14
|
-
// color: red;
|
|
15
|
-
// }
|
|
16
|
-
//
|
|
17
|
-
// @media (min-width: 576px) {
|
|
18
|
-
// .sm\:txt-red {
|
|
19
|
-
// color: red;
|
|
20
|
-
// }
|
|
21
|
-
// }
|
|
22
|
-
//
|
|
23
|
-
// @media (min-width: 768px) {
|
|
24
|
-
// .md\:txt-red {
|
|
25
|
-
// color: red;
|
|
26
|
-
// }
|
|
27
|
-
// }</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-makeFromBreakpoint"><code>makeFromBreakpoint</code></a></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="magic-class-generators"><div class="container">magic-class-generators</div></h1><section class="main__sub-section" id="magic-class-generators-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="magic-class-generators-mixin-makeMagicClass"><h3 class="item__heading"><a class="item__name" href="#magic-class-generators-mixin-makeMagicClass">makeMagicClass</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin makeMagicClass($property, $values-list, $identifier, $unit, $position-or-axis) {
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Nk_jtb - v0.9.16</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.9.16</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="makeSinglePropertyClass" data-type="mixin"><a href="#class-makers-mixin-makeSinglePropertyClass">makeSinglePropertyClass</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="createProperties" data-type="mixin"><a href="#property-makers-mixin-createProperties">createProperties</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="makeFromBreakpoint" data-type="mixin"><a href="#responsive-class-makers-mixin-makeFromBreakpoint">makeFromBreakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="responsive-class-makers" data-name="makeToBreakpoint" data-type="mixin"><a href="#responsive-class-makers-mixin-makeToBreakpoint">makeToBreakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="responsive-class-makers" data-name="makeOnBreakpoint" data-type="mixin"><a href="#responsive-class-makers-mixin-makeOnBreakpoint">makeOnBreakpoint</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="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) {
|
|
28
3
|
// get the positions required to build up the class
|
|
29
4
|
// (x:(left, right), y:(top, bottom) ... etc)
|
|
30
5
|
$positions: map-get($axis-position-map, $position-or-axis);
|
|
@@ -72,7 +47,32 @@
|
|
|
72
47
|
}
|
|
73
48
|
}
|
|
74
49
|
}
|
|
75
|
-
}" data-collapsed="@mixin
|
|
50
|
+
}" data-collapsed="@mixin generate-magic-classes($property, $values-list, $identifier, $unit, $position-or-axis) { ... }"><code>@mixin generate-magic-classes($property, $values-list, $identifier, $unit, $position-or-axis) { ... }</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. <strong>NOTE:</strong> works with both position and unit based 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.</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></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-makeSinglePropertyClass"><h3 class="item__heading"><a class="item__name" href="#class-makers-mixin-makeSinglePropertyClass">makeSinglePropertyClass</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin makeSinglePropertyClass($class, $property, $value, $breakpoints) {
|
|
51
|
+
.#{$class} {
|
|
52
|
+
#{$property}: $value;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@if ($breakpoints) {
|
|
56
|
+
// prettier-ignore
|
|
57
|
+
@include makeFromBreakpoint(($property: $value), $class, $breakpoints);
|
|
58
|
+
}
|
|
59
|
+
}" data-collapsed="@mixin makeSinglePropertyClass($class, $property, $value, $breakpoints) { ... }"><code>@mixin makeSinglePropertyClass($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 fill 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 makeSinglePropertyClass('txt-red', 'color', 'red', ('sm', 'md'));
|
|
60
|
+
|
|
61
|
+
// .txt-red {
|
|
62
|
+
// color: red;
|
|
63
|
+
// }
|
|
64
|
+
//
|
|
65
|
+
// @media (min-width: 576px) {
|
|
66
|
+
// .sm\:txt-red {
|
|
67
|
+
// color: red;
|
|
68
|
+
// }
|
|
69
|
+
// }
|
|
70
|
+
//
|
|
71
|
+
// @media (min-width: 768px) {
|
|
72
|
+
// .md\:txt-red {
|
|
73
|
+
// color: red;
|
|
74
|
+
// }
|
|
75
|
+
// }</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-makeFromBreakpoint"><code>makeFromBreakpoint</code></a></li></ul></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-createProperties"><h3 class="item__heading"><a class="item__name" href="#property-makers-mixin-createProperties">createProperties</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin createProperties($props) {
|
|
76
76
|
@each $property, $value in $props {
|
|
77
77
|
#{$property}: $value;
|
|
78
78
|
}
|
|
@@ -203,4 +203,4 @@
|
|
|
203
203
|
// 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) {
|
|
204
204
|
@return "#{$int}";
|
|
205
205
|
}" 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);
|
|
206
|
-
// 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.9.
|
|
206
|
+
// 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.9.16</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>
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -7,10 +7,12 @@ Why!
|
|
|
7
7
|
> Because without reinventing the wheel we wouldn’t have fast cars.
|
|
8
8
|
> -- Nathan Watts
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
10
|
## Create documentation
|
|
13
11
|
|
|
14
12
|
```bash
|
|
15
13
|
sassdoc ./src --dest ./docs
|
|
16
|
-
```
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Next Release
|
|
17
|
+
|
|
18
|
+
Remove `.hide`, has been replaced with `.hidden`
|
package/src/_nk.scss
CHANGED
|
@@ -57,74 +57,9 @@ body {
|
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
// ==========================================================================
|
|
60
|
-
// -- MARKDOWN --
|
|
60
|
+
// -- MARKDOWN -- DEPRECATED
|
|
61
61
|
// ==========================================================================
|
|
62
62
|
|
|
63
|
-
.code-first-col,
|
|
64
|
-
.code-second-col,
|
|
65
|
-
.code-all-col {
|
|
66
|
-
+ table tbody {
|
|
67
|
-
margin-top: $content-gap;
|
|
68
|
-
font-size: 0.85em;
|
|
69
|
-
tr td:first-child {
|
|
70
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
71
|
-
color: #f0506e;
|
|
72
|
-
border-radius: 0.25rem;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
.code-all-col {
|
|
77
|
-
+ table tbody {
|
|
78
|
-
td {
|
|
79
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
80
|
-
color: #f0506e;
|
|
81
|
-
border-radius: 0.25rem;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
#toc {
|
|
87
|
-
margin-bottom: 1.5em;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.markdown {
|
|
91
|
-
// hack to remove indented when using @verbatim
|
|
92
|
-
.-ml-2 pre code {
|
|
93
|
-
margin-left: -2rem;
|
|
94
|
-
}
|
|
95
|
-
.-ml-3 pre code {
|
|
96
|
-
margin-left: -3rem;
|
|
97
|
-
}
|
|
98
|
-
.-ml-4 pre code {
|
|
99
|
-
margin-left: -4rem;
|
|
100
|
-
}
|
|
101
|
-
.-ml-5 pre code {
|
|
102
|
-
margin-left: -5rem;
|
|
103
|
-
}
|
|
104
|
-
.-ml-6 pre code {
|
|
105
|
-
margin-left: -6rem;
|
|
106
|
-
}
|
|
107
|
-
.-ml-7 pre code {
|
|
108
|
-
margin-left: -7rem;
|
|
109
|
-
}
|
|
110
|
-
.-ml-8 pre code {
|
|
111
|
-
margin-left: -8rem;
|
|
112
|
-
}
|
|
113
|
-
.-ml-9 pre code {
|
|
114
|
-
margin-left: -9rem;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
tab-size: 0;
|
|
118
|
-
table {
|
|
119
|
-
width: 100%; // DON'T CHANGE!!
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
// allow to work in markdown component with div
|
|
123
|
-
pre {
|
|
124
|
-
margin-top: $content-gap;
|
|
125
|
-
margin-bottom: $content-gap;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
63
|
|
|
129
64
|
.bg-stripes-blue {
|
|
130
65
|
background-color: #60a5fa1a;
|
package/src/base/_base.scss
CHANGED
|
@@ -72,7 +72,7 @@ abbr:where([title]) {
|
|
|
72
72
|
:where(h1, h2, h3, h4, h5, h6) {
|
|
73
73
|
font-weight: $heading-font-weight;
|
|
74
74
|
color: $heading-and-title-color;
|
|
75
|
-
line-height: 1.
|
|
75
|
+
line-height: 1.25;
|
|
76
76
|
text-wrap: balance;
|
|
77
77
|
}
|
|
78
78
|
|
|
@@ -152,7 +152,7 @@ sup {
|
|
|
152
152
|
|
|
153
153
|
// -- Tables --
|
|
154
154
|
// ==========================================================================
|
|
155
|
-
|
|
155
|
+
|
|
156
156
|
table {
|
|
157
157
|
text-indent: 0;
|
|
158
158
|
border-color: inherit;
|
|
@@ -160,19 +160,17 @@ table {
|
|
|
160
160
|
width: 100%;
|
|
161
161
|
}
|
|
162
162
|
|
|
163
|
-
|
|
163
|
+
th {
|
|
164
164
|
font-weight: 600;
|
|
165
|
-
background: #f9fafb;
|
|
166
|
-
font-size: 0.875rem;
|
|
167
165
|
vertical-align: middle;
|
|
168
166
|
}
|
|
169
167
|
|
|
170
168
|
th,
|
|
171
169
|
td {
|
|
172
|
-
|
|
170
|
+
font-size: 0.875rem;
|
|
171
|
+
padding-inline: 0.75rem;
|
|
173
172
|
padding-block: 0.75rem;
|
|
174
173
|
vertical-align: inherit;
|
|
175
|
-
text-align: left;
|
|
176
174
|
}
|
|
177
175
|
|
|
178
176
|
// 1. Change the font styles in all browsers.
|
|
@@ -16,7 +16,7 @@ $common-classes: ".bx", ".bx-content", ".bx-title", "[class*='container']", ".fr
|
|
|
16
16
|
|
|
17
17
|
// catch the strays (use with caution). The :where selector is to kill the
|
|
18
18
|
// specificity for easier override
|
|
19
|
-
:where(*:not([class*="flex"]):not([class*="grid"])) > :where(.frm-row, table, form):not(:first-child) {
|
|
19
|
+
:where(*:not([class*="flex"]):not([class*="grid"])) > :where(.frm-row, table, form, pre):not(:first-child) {
|
|
20
20
|
margin-top: $content-gap;
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
@use "../variables" as *;
|
|
2
|
-
|
|
3
|
-
// component variable file.
|
|
2
|
+
|
|
4
3
|
$accordion-bg: rgb(245, 245, 245) !default;
|
|
5
4
|
$accordion-border: $border !default;
|
|
6
5
|
$accordion-hover-bg: darken($accordion-bg, 5%) !default;
|
|
7
6
|
|
|
8
|
-
$midnight: #2c3e50;
|
|
9
|
-
|
|
10
7
|
// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
|
|
11
|
-
// These styles are for the CSS accordion
|
|
8
|
+
// These styles are for the CSS accordion.
|
|
12
9
|
// You should focus the accordion behaviour and limit opinionated
|
|
13
10
|
// styles to make it easier to apply utility classes.
|
|
14
11
|
// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
|
|
@@ -20,9 +17,13 @@ $midnight: #2c3e50;
|
|
|
20
17
|
|
|
21
18
|
.accordion {
|
|
22
19
|
overflow: hidden;
|
|
23
|
-
margin-bottom: 0.5rem;
|
|
24
20
|
border: $border;
|
|
25
21
|
|
|
22
|
+
// override label margin
|
|
23
|
+
label.accordion-title{
|
|
24
|
+
margin: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
26
27
|
// title and label are used to toggle the accordion
|
|
27
28
|
&-title,
|
|
28
29
|
label {
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
@use "../variables" as *;
|
|
2
2
|
@use "./box" as *;
|
|
3
3
|
|
|
4
|
-
// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
|
|
5
|
-
// STOP! being tempted to add default styles to the dropdown Just
|
|
6
|
-
// use utility classes! The dropdown has too many use cases and
|
|
7
|
-
// you will forever be fighting specificity.
|
|
8
|
-
// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
|
|
9
|
-
|
|
10
4
|
.#{$dropdown-identifier} {
|
|
11
5
|
position: relative;
|
|
12
6
|
|
|
@@ -15,10 +9,6 @@
|
|
|
15
9
|
visibility: hidden;
|
|
16
10
|
opacity: 0;
|
|
17
11
|
transform: translateY(-2em);
|
|
18
|
-
// adding additional top-margin affects elements
|
|
19
|
-
// differently. E.G. The toggle buttons need extra margin
|
|
20
|
-
// but the navbar does not.It is best to leave it off and
|
|
21
|
-
// manage it directly on the element.
|
|
22
12
|
top: calc(100%);
|
|
23
13
|
left: 0;
|
|
24
14
|
transition: all 0.1s ease-in-out 1s, visibility 0s linear 0.1s, z-index 0s linear 0.01s;
|
|
@@ -2,10 +2,17 @@
|
|
|
2
2
|
@use "../variables/components" as *;
|
|
3
3
|
@use "../mixins/media" as *;
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
$hero-title-color: #eee !default;
|
|
6
|
+
$hero-title-lg: 3rem !default;
|
|
7
|
+
$hero-title-sm: 2rem !default;
|
|
8
|
+
|
|
9
|
+
$hero-subtitle-color: #eee !default;
|
|
10
|
+
$hero-subtitle-lg: 2.5rem !default;
|
|
11
|
+
$hero-subtitle-sm: 1.75rem !default;
|
|
12
|
+
|
|
13
|
+
$hero-gradient: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)) !default;
|
|
14
|
+
|
|
15
|
+
$hero-text-padding: $content-gap !default;
|
|
9
16
|
|
|
10
17
|
.hero {
|
|
11
18
|
background-repeat: no-repeat;
|
|
@@ -28,18 +35,3 @@
|
|
|
28
35
|
}
|
|
29
36
|
}
|
|
30
37
|
|
|
31
|
-
.fp-hero {
|
|
32
|
-
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("#{$img-path}/hero-sm.jpg");
|
|
33
|
-
|
|
34
|
-
@include from-md {
|
|
35
|
-
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("#{$img-path}/hero-md.jpg");
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
@include from-lg {
|
|
39
|
-
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("#{$img-path}/hero-lg.jpg");
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@include from-xxl {
|
|
43
|
-
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("#{$img-path}/hero-xl.jpg");
|
|
44
|
-
}
|
|
45
|
-
}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
@use "../mixins/common" as *;
|
|
2
|
+
@use "../variables/tailwind-colors" as *;
|
|
3
|
+
@use "sass:map";
|
|
4
|
+
|
|
5
|
+
// ========================================================================== --
|
|
6
|
+
// NAYKEL DOCS --
|
|
7
|
+
// ==========================================================================
|
|
8
|
+
//
|
|
9
|
+
// IMPORTANT: The styles in this file are specifically tailored for the Naykel
|
|
10
|
+
// documentation. They are not included in the main build by default. To use
|
|
11
|
+
// these styles, you need to manually import this file.
|
|
12
|
+
//
|
|
13
|
+
// tr:not(.ignore-nk-styles + table tr - ignores the next table from the styles
|
|
14
|
+
|
|
15
|
+
$table-bg: white !default;
|
|
16
|
+
|
|
17
|
+
$th-bdr-color: map-get($tailwind-colors, "slate", "200") !default;
|
|
18
|
+
$td-bdr-color: map-get($tailwind-colors, "slate", "100") !default;
|
|
19
|
+
|
|
20
|
+
$code-color: #f0506e !default;
|
|
21
|
+
$question-color: #2299dd !default;
|
|
22
|
+
|
|
23
|
+
.nk-docs {
|
|
24
|
+
// ==========================================================================
|
|
25
|
+
// -- TABLE --
|
|
26
|
+
// ==========================================================================
|
|
27
|
+
// table {
|
|
28
|
+
// border: 1px solid #dddddd;
|
|
29
|
+
// }
|
|
30
|
+
|
|
31
|
+
th:not(.ignore-nk-styles + table th) {
|
|
32
|
+
border-bottom: 1px solid $th-bdr-color;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
td:not(.ignore-nk-styles + table td) {
|
|
36
|
+
border-top: 1px solid $td-bdr-color;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
tr:not(.ignore-nk-styles + table tr) {
|
|
40
|
+
background: $table-bg;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// .compress-tables ~ {
|
|
44
|
+
// th,
|
|
45
|
+
// td {
|
|
46
|
+
// padding-block: 0.25rem;
|
|
47
|
+
// padding-inline: 0.75rem;
|
|
48
|
+
// }
|
|
49
|
+
// }
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// ==========================================================================
|
|
53
|
+
// -- MARKDOWN AND CODE BLOCKS --
|
|
54
|
+
// ==========================================================================
|
|
55
|
+
|
|
56
|
+
%code {
|
|
57
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
58
|
+
color: $code-color;
|
|
59
|
+
// color: rgb(14, 165, 233);
|
|
60
|
+
border-radius: 0.25rem;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// %markdown-table {
|
|
64
|
+
// margin-top: $content-gap;
|
|
65
|
+
// font-size: 0.85em;
|
|
66
|
+
// }
|
|
67
|
+
|
|
68
|
+
// change these to classes so they don't automatically get placed in a p tag
|
|
69
|
+
.code-first-col {
|
|
70
|
+
+ table tbody {
|
|
71
|
+
// @extend %markdown-table;
|
|
72
|
+
tr td:first-child {
|
|
73
|
+
@extend %code;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.code-second-col {
|
|
79
|
+
+ table tbody {
|
|
80
|
+
// @extend %markdown-table;
|
|
81
|
+
tr td:nth-child(2) {
|
|
82
|
+
@extend %code;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
.code-first-second-col {
|
|
87
|
+
+ table tbody {
|
|
88
|
+
// @extend %markdown-table;
|
|
89
|
+
tr td:is(:first-child, :nth-child(2)) {
|
|
90
|
+
@extend %code;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// ==========================================================================
|
|
96
|
+
// -- QUESTION AND ANSWER --
|
|
97
|
+
// ==========================================================================
|
|
98
|
+
|
|
99
|
+
question {
|
|
100
|
+
color: $question-color;
|
|
101
|
+
margin-top: 1.5rem;
|
|
102
|
+
font-size: 1.1rem;
|
|
103
|
+
font-weight: 700;
|
|
104
|
+
font-style: italic;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
answer,
|
|
108
|
+
h3:has(question) + p {
|
|
109
|
+
margin-top: 0.5rem;
|
|
110
|
+
+ ul {
|
|
111
|
+
margin-top: 0.5rem;
|
|
112
|
+
margin-left: 1.5rem;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// remove top margin when inside `p` tag and let the `q&a` tag handle the margin
|
|
117
|
+
p:has(question),
|
|
118
|
+
p:has(answer) {
|
|
119
|
+
margin-top: 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// this is a hack to make the question play nice with the `h3` tag
|
|
123
|
+
h3 {
|
|
124
|
+
> question {
|
|
125
|
+
margin-top: 0;
|
|
126
|
+
}
|
|
127
|
+
&:has(question) {
|
|
128
|
+
display: inline-flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
a {
|
|
131
|
+
margin-right: 0.5rem;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// ==========================================================================
|
|
137
|
+
// -- --
|
|
138
|
+
// ==========================================================================
|
|
139
|
+
|
|
140
|
+
:is(h1, h2, h3, h4, h5, h6) {
|
|
141
|
+
code:not(.hljs) {
|
|
142
|
+
font-size: inherit;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// code color for alerts
|
|
147
|
+
.info-light code {
|
|
148
|
+
color: #ec4899;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.markdown {
|
|
152
|
+
.compare + pre,
|
|
153
|
+
.compare + pre + pre {
|
|
154
|
+
float: left;
|
|
155
|
+
width: 49%;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.compare + pre {
|
|
159
|
+
margin-right: 1%;
|
|
160
|
+
}
|
|
161
|
+
.compare + pre + pre {
|
|
162
|
+
margin-left: 1%;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.clear {
|
|
166
|
+
clear: both;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
hr {
|
|
170
|
+
border-color: #3d5ea5;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.spaced-out + ul li {
|
|
174
|
+
margin-top: 0.5rem !important;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.spaced-out-all ~ ul li {
|
|
178
|
+
margin-top: 0.5rem !important;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.mermaid > svg {
|
|
183
|
+
background: #fff;
|
|
184
|
+
padding: 1rem;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// this is good when making a list when you want to use the toc for an overview
|
|
188
|
+
.small-headings {
|
|
189
|
+
~ h3 {
|
|
190
|
+
font-size: 1.25rem;
|
|
191
|
+
}
|
|
192
|
+
}
|
package/src/jtb.scss
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
// they can be overridden
|
|
7
7
|
|
|
8
8
|
@forward "./components/accordion";
|
|
9
|
-
@forward "./components/article";
|
|
10
9
|
@forward "./components/banner";
|
|
11
10
|
@forward "./components/box";
|
|
12
11
|
@forward "./components/button";
|
|
@@ -25,27 +24,26 @@
|
|
|
25
24
|
|
|
26
25
|
@forward "./utilities/border";
|
|
27
26
|
@forward "./utilities/container";
|
|
27
|
+
@forward "./utilities/display-visibility";
|
|
28
28
|
@forward "./utilities/effects";
|
|
29
29
|
@forward "./utilities/flexbox";
|
|
30
30
|
@forward "./utilities/grid";
|
|
31
31
|
@forward "./utilities/layout";
|
|
32
32
|
@forward "./utilities/margin";
|
|
33
33
|
@forward "./utilities/misc";
|
|
34
|
+
@forward "./utilities/opacity";
|
|
34
35
|
@forward "./utilities/padding";
|
|
35
36
|
@forward "./utilities/position";
|
|
36
37
|
@forward "./utilities/sizing";
|
|
37
38
|
@forward "./utilities/space";
|
|
38
39
|
@forward "./utilities/state";
|
|
39
|
-
@forward "./utilities/opacity";
|
|
40
40
|
@forward "./utilities/transforms";
|
|
41
41
|
@forward "./utilities/transition";
|
|
42
42
|
@forward "./utilities/typography";
|
|
43
|
-
@forward "./utilities/visibility-display";
|
|
44
43
|
|
|
45
44
|
// extras
|
|
46
45
|
@use "./extras/code" as *;
|
|
47
46
|
|
|
48
47
|
// These are opinionated styles for NK components. They are not part
|
|
49
48
|
// of the core and will eventually be moved to a separate package.
|
|
50
|
-
// @forward "./components-extended/hero";
|
|
51
49
|
@use "./nk" as *;
|
|
@@ -22,25 +22,43 @@
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
// is parent indicates the class is applied to the parent element
|
|
26
|
+
@function derivedClass($identifier, $list, $is-parent) {
|
|
26
27
|
$numBreakPoints: list.length($list);
|
|
27
28
|
$class: null;
|
|
28
29
|
@for $i from $numBreakPoints through 1 {
|
|
29
30
|
$class: if($class == null, nth($list, -$i), #{$class}-#{nth($list, -$i)});
|
|
30
31
|
}
|
|
32
|
+
|
|
33
|
+
// if the class is a parent class, add the prefix
|
|
34
|
+
@if $is-parent {
|
|
35
|
+
$class: "c-#{$identifier}-#{$class} > *";
|
|
36
|
+
} @else {
|
|
37
|
+
$class: "#{$identifier}-#{$class}";
|
|
38
|
+
}
|
|
39
|
+
|
|
31
40
|
@return $class;
|
|
32
41
|
}
|
|
33
42
|
|
|
34
|
-
|
|
43
|
+
////
|
|
44
|
+
/// @group class-generators
|
|
45
|
+
////
|
|
46
|
+
|
|
47
|
+
/// Generate one ore more magic classes for a single property from a list of /// lists.
|
|
48
|
+
///
|
|
49
|
+
/// **NOTE:** this mixin works with both position and unit based properties and
|
|
50
|
+
/// supports parent/child classes.
|
|
51
|
+
///
|
|
35
52
|
///
|
|
36
53
|
/// @param {String} $property - The CSS property.
|
|
37
|
-
/// @param {List} $values-list - The list of values for the property.
|
|
54
|
+
/// @param {List} $values-list - The list of values for the property .
|
|
38
55
|
/// @param {String} $identifier - The base class name.
|
|
39
56
|
/// @param {String} $unit - The unit for the property values (default: "rem").
|
|
40
57
|
/// @param {String} $position-or-axis - The position or axis for the property (default: "").
|
|
58
|
+
/// @param {Boolean} $is-parent - Indicates if the class is applied to the parent
|
|
41
59
|
///
|
|
42
60
|
|
|
43
|
-
@mixin
|
|
61
|
+
@mixin generate-magic-classes($property, $values-list, $identifier, $unit: "rem", $position-or-axis: "", $is-parent: false) {
|
|
44
62
|
// get the positions required to build up the class
|
|
45
63
|
// (x:(left, right), y:(top, bottom) ... etc)
|
|
46
64
|
$positions: map-get($axis-position-map, $position-or-axis);
|
|
@@ -57,11 +75,11 @@
|
|
|
57
75
|
$mdValue: if($numBreakPoints >= 3, nth($list, -3), null);
|
|
58
76
|
$lgValue: if($numBreakPoints >= 4, nth($list, -4), null);
|
|
59
77
|
|
|
60
|
-
$derived-class: derivedClass($list);
|
|
78
|
+
$derived-class: derivedClass($identifier, $list, $is-parent);
|
|
61
79
|
|
|
62
80
|
// DO NOT use else-if statements when building the classes.
|
|
63
81
|
// You want to give all classes to the opportunity to build.
|
|
64
|
-
.#{$
|
|
82
|
+
.#{$derived-class} {
|
|
65
83
|
@include handleMagicProperties($property, $baseValue, $positions);
|
|
66
84
|
|
|
67
85
|
@include from-sm {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
/// Generate class for a single property and optionally creates responsive
|
|
8
8
|
/// classes for a range of breakpoints.
|
|
9
9
|
///
|
|
10
|
-
///
|
|
10
|
+
/// **NOTE:** This mixin will create the base class as well as responsive classes.
|
|
11
11
|
///
|
|
12
12
|
/// @param {String} $class - The fill class name.
|
|
13
13
|
/// @param {String} $property - The CSS property.
|
package/src/play.scss
CHANGED
|
@@ -1,23 +1,33 @@
|
|
|
1
1
|
// @use "./color/shades" as *;
|
|
2
2
|
// @use "./extras/naykel-docs" as *;
|
|
3
3
|
// @use "./utilities/border" as *;
|
|
4
|
-
@use "./utilities/
|
|
4
|
+
@use "./utilities/display-visibility" as *;
|
|
5
|
+
// @use "./utilities/opacity" as *;
|
|
5
6
|
// @use "./utilities/typography" as *;
|
|
6
7
|
@use "./mixins/common" as *;
|
|
7
|
-
@use "./mixins/
|
|
8
|
+
@use "./mixins/generate-magic-classes" as *;
|
|
9
|
+
@use "./mixins/makeResponsiveClassMixins" as *;
|
|
8
10
|
@use "sass:list";
|
|
9
11
|
@use "sass:map";
|
|
10
12
|
@use "sass:string";
|
|
11
13
|
|
|
12
|
-
// $margin-sizes: listToMap((0.1, 0.2));
|
|
13
14
|
|
|
14
|
-
// $
|
|
15
|
-
// margin: (
|
|
16
|
-
// prefix: #{$margin-identifier},
|
|
17
|
-
// values: $margin-sizes,
|
|
18
|
-
// unit: "rem",
|
|
19
|
-
// positions: $axis-position-map
|
|
20
|
-
// )
|
|
21
|
-
// );
|
|
15
|
+
// $bp: ("sm", "md", "lg", "xl", "xxl");
|
|
22
16
|
|
|
23
|
-
//
|
|
17
|
+
// // ----------------------------------------------------------------
|
|
18
|
+
// // DISPLAY AND HIDE 'FROM' THE SELECTED SCREEN SIZE
|
|
19
|
+
// // ----------------------------------------------------------------
|
|
20
|
+
// @include makeFromBreakpoint((display: block), "block", $bp);
|
|
21
|
+
// @include makeFromBreakpoint((display: none), "hide", $bp);
|
|
22
|
+
|
|
23
|
+
// // ----------------------------------------------------------------
|
|
24
|
+
// // DISPLAY AND HIDE 'ON' THE SELECTED SCREEN SIZE
|
|
25
|
+
// // ----------------------------------------------------------------
|
|
26
|
+
// @include makeOnBreakpoint((display: block), "block", $bp);
|
|
27
|
+
// @include makeOnBreakpoint((display: none), "hide", $bp);
|
|
28
|
+
|
|
29
|
+
// // ----------------------------------------------------------------
|
|
30
|
+
// // DISPLAY AND HIDE 'TO' THE SELECTED SCREEN SIZE
|
|
31
|
+
// // ----------------------------------------------------------------
|
|
32
|
+
// @include makeToBreakpoint((display: block), "block", ("sm", "md", "lg", "xl"));
|
|
33
|
+
// @include makeToBreakpoint((display: none), "hide", ("sm", "md", "lg", "xl"));
|
|
@@ -1,27 +1,49 @@
|
|
|
1
|
+
@use '../mixins/common' as *;
|
|
1
2
|
@use '../mixins/makeResponsiveClassMixins' as *;
|
|
2
3
|
|
|
3
|
-
$breakpoints: (
|
|
4
|
+
$breakpoints: ('sm', 'md', 'lg', 'xl', 'xxl');
|
|
5
|
+
|
|
6
|
+
$display-visibility-properties: (
|
|
7
|
+
display: (
|
|
8
|
+
values: (
|
|
9
|
+
block,
|
|
10
|
+
contents,
|
|
11
|
+
flex,
|
|
12
|
+
( hidden: none ),
|
|
13
|
+
inline-block,
|
|
14
|
+
inline-flex,
|
|
15
|
+
inline
|
|
16
|
+
)
|
|
17
|
+
),
|
|
18
|
+
visibility: (
|
|
19
|
+
values: (
|
|
20
|
+
collapse,
|
|
21
|
+
( invisible: hidden ),
|
|
22
|
+
visible
|
|
23
|
+
)
|
|
24
|
+
)
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
@include generate-utilities($display-visibility-properties);
|
|
4
29
|
|
|
5
30
|
// ----------------------------------------------------------------
|
|
6
31
|
// DISPLAY AND HIDE 'FROM' THE SELECTED SCREEN SIZE
|
|
7
32
|
// ----------------------------------------------------------------
|
|
8
33
|
@include makeFromBreakpoint((display: block), "block", $breakpoints);
|
|
9
|
-
@include makeFromBreakpoint((display: none), "
|
|
34
|
+
@include makeFromBreakpoint((display: none), "hidden", $breakpoints);
|
|
35
|
+
@include makeFromBreakpoint((display: none), "hide", $breakpoints); // DEPRECATED
|
|
10
36
|
|
|
11
37
|
// ----------------------------------------------------------------
|
|
12
38
|
// DISPLAY AND HIDE 'ON' THE SELECTED SCREEN SIZE
|
|
13
39
|
// ----------------------------------------------------------------
|
|
14
40
|
@include makeOnBreakpoint((display: block), "block", $breakpoints);
|
|
15
|
-
@include makeOnBreakpoint((display: none), "
|
|
41
|
+
@include makeOnBreakpoint((display: none), "hidden", $breakpoints);
|
|
42
|
+
@include makeOnBreakpoint((display: none), "hide", $breakpoints); // DEPRECATED
|
|
16
43
|
|
|
17
44
|
// ----------------------------------------------------------------
|
|
18
45
|
// DISPLAY AND HIDE 'TO' THE SELECTED SCREEN SIZE
|
|
19
46
|
// ----------------------------------------------------------------
|
|
20
47
|
@include makeToBreakpoint((display: block), "block", ("sm", "md", "lg", "xl"));
|
|
21
|
-
@include makeToBreakpoint((display: none), "
|
|
22
|
-
|
|
23
|
-
// DEPRECATED
|
|
24
|
-
.sr-only {
|
|
25
|
-
opacity: 0;
|
|
26
|
-
position: absolute;
|
|
27
|
-
}
|
|
48
|
+
@include makeToBreakpoint((display: none), "hidden", ("sm", "md", "lg", "xl"));
|
|
49
|
+
@include makeToBreakpoint((display: none), "hide", ("sm", "md", "lg", "xl")); // DEPRECATED
|
|
@@ -99,10 +99,9 @@ $flex-classes-map: (
|
|
|
99
99
|
|
|
100
100
|
// I am not convinced this should be a permanent part of the framework.
|
|
101
101
|
$special-classes: (
|
|
102
|
-
flex-
|
|
102
|
+
flex-centered: (
|
|
103
103
|
props: (
|
|
104
104
|
display: flex,
|
|
105
|
-
flex-direction: column,
|
|
106
105
|
align-items: center,
|
|
107
106
|
justify-content: center,
|
|
108
107
|
),
|
package/src/utilities/_grid.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use "../config" as *;
|
|
2
2
|
@use "../functions/get" as *;
|
|
3
3
|
@use "../mixins/common" as *;
|
|
4
|
-
@use "../mixins/
|
|
4
|
+
@use "../mixins/generate-magic-classes" as *;
|
|
5
5
|
@use "../mixins/magicGridGenerators" as *;
|
|
6
6
|
@use "../mixins/makeResponsiveClassMixins" as *;
|
|
7
7
|
|
|
@@ -31,6 +31,7 @@ $num-grid-cols: get("grid.num-grid-cols", $config);
|
|
|
31
31
|
gap: $gap;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
|
|
34
35
|
// ==========================================================================
|
|
35
36
|
// -- GENERAL --
|
|
36
37
|
// ==========================================================================
|
|
@@ -40,7 +41,8 @@ $grid-properties-map: (
|
|
|
40
41
|
gap: (
|
|
41
42
|
prefix: "gap-",
|
|
42
43
|
values: $gap-sizes,
|
|
43
|
-
unit: "rem"
|
|
44
|
+
unit: "rem",
|
|
45
|
+
breakpoints: ("sm", "md", "lg", "xl")
|
|
44
46
|
),
|
|
45
47
|
justify-items: (
|
|
46
48
|
prefix: "justify-items-",
|
|
@@ -95,7 +97,7 @@ $grid-properties-map: (
|
|
|
95
97
|
// ==========================================================================
|
|
96
98
|
// -- MAGIC CLASSES --
|
|
97
99
|
// ==========================================================================
|
|
98
|
-
// THIS IS EXPERIMENTAL AND MAY
|
|
100
|
+
// THIS IS EXPERIMENTAL AND MAY NOT STAY IN THE CODEBASE
|
|
99
101
|
|
|
100
102
|
// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
|
|
101
103
|
// ALL MAGIC MIXINS MUST HAVE AT LEAST TWO MAPS OR YOU WILL GET AN
|
|
@@ -103,7 +105,7 @@ $grid-properties-map: (
|
|
|
103
105
|
// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
|
|
104
106
|
|
|
105
107
|
$grid-gap-magic-sizes: ((5, 3, 2), (5, 3), (4, 2), (3, 1)) !default;
|
|
106
|
-
@include
|
|
108
|
+
@include generate-magic-classes(grid-gap, ($grid-gap-magic-sizes), "gap");
|
|
107
109
|
|
|
108
110
|
$equal-width-magic-columns: ((4, 2, 1), (4, 3, 2, 1), (3, 2, 1), (3, 1, 1)) !default;
|
|
109
111
|
@include magicGridEqualWidths($equal-width-magic-columns);
|
|
@@ -2,12 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
// prettier-ignore
|
|
4
4
|
$layout-properties-map: (
|
|
5
|
-
display: ( values: ( block, contents, flex, (hidden: none), inline-block, inline-flex, inline, ) ),
|
|
6
5
|
float: ( prefix: "float-", values: ( left, right, none ) ),
|
|
7
6
|
overflow: ( prefix:'overflow-', values: ( auto, clip, hidden, scroll, visible ) ),
|
|
8
7
|
overflow-x: ( prefix:'overflow-x-', values: ( auto, clip, hidden, scroll, visible ) ),
|
|
9
8
|
overflow-y: ( prefix:'overflow-y-', values: ( auto, clip, hidden, scroll, visible ) ),
|
|
10
|
-
visibility: ( values: ( collapse, (invisible: hidden), visible ) ),
|
|
11
9
|
z-index: ( prefix: "z-", values: ( 0, 1, 50, 100, (bottom: -1), (top: 999)) )
|
|
12
10
|
);
|
|
13
11
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@use "../mixins/common" as *;
|
|
2
|
-
@use "../mixins/
|
|
2
|
+
@use "../mixins/generate-magic-classes" as *;
|
|
3
3
|
@use "sass:map";
|
|
4
4
|
|
|
5
5
|
$margin-sizes: map-merge($margin-variants, listToMap($space-rem-sizes));
|
|
@@ -18,4 +18,4 @@ $margin-properties-map: (
|
|
|
18
18
|
|
|
19
19
|
// magic classes
|
|
20
20
|
$magic-margin-y: ((5, 3, 2), (3, 2, 1)) !default;
|
|
21
|
-
@include
|
|
21
|
+
@include generate-magic-classes(margin, $magic-margin-y, "my", $position-or-axis: y);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@use "../mixins/common" as *;
|
|
2
|
-
@use "../mixins/
|
|
2
|
+
@use "../mixins/generate-magic-classes" as *;
|
|
3
3
|
@use "sass:map";
|
|
4
4
|
|
|
5
5
|
$padding-sizes: map-merge($padding-variants, listToMap($space-rem-sizes));
|
|
@@ -18,7 +18,7 @@ $padding-properties-map: (
|
|
|
18
18
|
|
|
19
19
|
// magic classes
|
|
20
20
|
$magic-padding-y: ((5, 3, 2), (5, 3, 2, 2), (3, 2, 1)) !default;
|
|
21
|
-
@include
|
|
21
|
+
@include generate-magic-classes(padding, $magic-padding-y, "py", $position-or-axis: y);
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
.c-py-025 > * {
|
package/src/variables/_base.scss
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
@use "./tailwind-colors" as *;
|
|
2
|
+
@use "sass:map";
|
|
3
|
+
|
|
1
4
|
// ==========================================================================
|
|
2
5
|
// -- Base Styles --
|
|
3
6
|
// ==========================================================================
|
|
@@ -10,16 +13,12 @@ $accent: #ffbb1c !default;
|
|
|
10
13
|
|
|
11
14
|
$img-path: "/images" !default;
|
|
12
15
|
|
|
13
|
-
|
|
14
|
-
// the transparent color has issues. I don't think this will break anything!
|
|
15
|
-
// $border-color: rgba(0, 0, 0, 0.15) !default;
|
|
16
|
-
$border-color: rgb(229, 231, 235) !default;
|
|
16
|
+
$border-color: map.get($tailwind-colors, "slate", "100") !default;
|
|
17
17
|
$border: 1px solid $border-color !default;
|
|
18
18
|
$border-radius: 8px !default;
|
|
19
19
|
|
|
20
20
|
$preferred-fonts: "" !default;
|
|
21
|
-
$font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
22
|
-
"Noto Color Emoji";
|
|
21
|
+
$font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
23
22
|
$font-family: if($preferred-fonts != "", $preferred-fonts, $font-family), $font-family;
|
|
24
23
|
|
|
25
24
|
$font-size: 1rem !default;
|
|
@@ -14,22 +14,6 @@ $bx-header-bg: rgb(250, 250, 250) !default;
|
|
|
14
14
|
$bx-title-font-weight: 600 !default;
|
|
15
15
|
$bx-title-font-size: 1.2rem !default;
|
|
16
16
|
|
|
17
|
-
// ==========================================================================
|
|
18
|
-
// -- HERO COMPONENT --
|
|
19
|
-
// ==========================================================================
|
|
20
|
-
// $hero-background-color: $primary;
|
|
21
|
-
$hero-title-color: #eee !default;
|
|
22
|
-
$hero-title-lg: 3rem !default;
|
|
23
|
-
$hero-title-sm: 2rem !default;
|
|
24
|
-
|
|
25
|
-
$hero-subtitle-color: #eee !default;
|
|
26
|
-
$hero-subtitle-lg: 2.5rem !default;
|
|
27
|
-
$hero-subtitle-sm: 1.75rem !default;
|
|
28
|
-
|
|
29
|
-
$hero-gradient: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)) !default;
|
|
30
|
-
|
|
31
|
-
$hero-text-padding: $content-gap !default;
|
|
32
|
-
|
|
33
17
|
//
|
|
34
18
|
//
|
|
35
19
|
//
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use "./base" as *;
|
|
2
2
|
@use "../variables/colors" as *;
|
|
3
|
+
@use "../variables/base" as *;
|
|
3
4
|
@use "sass:map";
|
|
4
5
|
|
|
5
6
|
// ==========================================================================
|
|
@@ -84,8 +85,12 @@ $padding-variants: (default: $content-padding) !default;
|
|
|
84
85
|
|
|
85
86
|
$sizing-pixels: (200px, 250px, 300px, 400px, 600px) !default; // include unit to make merge easier
|
|
86
87
|
$sizing-rem: (0, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24) !default;
|
|
87
|
-
|
|
88
|
-
|
|
88
|
+
|
|
89
|
+
// The debate is if these should be related to the breakpoints or not. I think it would be better if
|
|
90
|
+
// they are related to the breakpoints because it makes it easier to think in terms of the layout. I
|
|
91
|
+
// did think to use container utilities but they are not as flexible as I would like them to be.
|
|
92
|
+
// $sizing-variants: (xs: 20rem, sm: 24rem, md: 28rem, lg: 32rem, xl: 36rem, xxl: 42rem) !default;
|
|
93
|
+
$sizing-variants: (xs: 20rem, sm: $sm, md: $md, lg: $lg, xl: $xl, xxl: $xxl) !default;
|
|
89
94
|
|
|
90
95
|
// These maps are seperate because they will only be used for the width, and height properties. I
|
|
91
96
|
// am a bit perplexed how to handle this because I won't always want every sizing property to be
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
@use "../variables" as *;
|
|
2
|
-
@use "../mixins/media" as *;
|
|
3
|
-
|
|
4
|
-
// These are very opinionated styles designed specifically for
|
|
5
|
-
// NAYKEL layouts.
|
|
6
|
-
|
|
7
|
-
article.image-wrap {
|
|
8
|
-
img {
|
|
9
|
-
margin-bottom: 2rem;
|
|
10
|
-
@include from-lg {
|
|
11
|
-
float: right;
|
|
12
|
-
max-width: 480px;
|
|
13
|
-
margin-left: 5rem;
|
|
14
|
-
margin-bottom: 5rem;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
@use "../mixins/common" as *;
|
|
2
|
-
|
|
3
|
-
// ==========================================================================
|
|
4
|
-
// -- NAYKEL DOCS --
|
|
5
|
-
// ==========================================================================
|
|
6
|
-
//
|
|
7
|
-
// NOTE: The styles defined in this file are specifically tailored for the
|
|
8
|
-
// Naykel application documentation. They are not included in the main build
|
|
9
|
-
// by default. If you wish to use these styles, you must import this file
|
|
10
|
-
// manually.
|
|
11
|
-
//
|
|
12
|
-
|
|
13
|
-
.nk-docs {
|
|
14
|
-
// ==========================================================================
|
|
15
|
-
// -- TABLE --
|
|
16
|
-
// ==========================================================================
|
|
17
|
-
table {
|
|
18
|
-
border: 1px solid #dddddd;
|
|
19
|
-
}
|
|
20
|
-
th,
|
|
21
|
-
td {
|
|
22
|
-
border: 1px solid #d7d7dc;
|
|
23
|
-
}
|
|
24
|
-
tr {
|
|
25
|
-
background: white;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.compress-tables ~ {
|
|
29
|
-
th,
|
|
30
|
-
td {
|
|
31
|
-
padding-block: 0.25rem;
|
|
32
|
-
padding-inline: 0.75rem;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// ==========================================================================
|
|
38
|
-
// -- MARKDOWN AND CODE BLOCKS --
|
|
39
|
-
// ==========================================================================
|
|
40
|
-
|
|
41
|
-
%code {
|
|
42
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
43
|
-
color: #f0506e;
|
|
44
|
-
border-radius: 0.25rem;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
%markdown-table {
|
|
48
|
-
margin-top: $content-gap;
|
|
49
|
-
font-size: 0.85em;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
code-first-col {
|
|
53
|
-
+ table tbody {
|
|
54
|
-
@extend %markdown-table;
|
|
55
|
-
tr td:first-child {
|
|
56
|
-
@extend %code;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
code-second-col {
|
|
62
|
-
+ table tbody {
|
|
63
|
-
@extend %markdown-table;
|
|
64
|
-
tr td:nth-child(2) {
|
|
65
|
-
@extend %code;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
code-first-second-col {
|
|
70
|
-
+ table tbody {
|
|
71
|
-
@extend %markdown-table;
|
|
72
|
-
tr td:is(:first-child, :nth-child(2)) {
|
|
73
|
-
@extend %code;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// ==========================================================================
|
|
79
|
-
// -- QUESTION AND ANSWER --
|
|
80
|
-
// ==========================================================================
|
|
81
|
-
|
|
82
|
-
question {
|
|
83
|
-
margin-top: 2rem;
|
|
84
|
-
font-weight: 700;
|
|
85
|
-
font-style: italic;
|
|
86
|
-
color: rgb(36, 37, 37);
|
|
87
|
-
display: block;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
answer {
|
|
91
|
-
margin-top: 0.5rem;
|
|
92
|
-
display: block;
|
|
93
|
-
+ ul {
|
|
94
|
-
margin-top: 0.5rem;
|
|
95
|
-
margin-left: 1.5rem;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
@use "../mixins/class-helpers" as *;
|
|
2
|
-
@use "../mixins/media" as *;
|
|
3
|
-
@use "../variables/utility_maps" as *;
|
|
4
|
-
@use "sass:list";
|
|
5
|
-
|
|
6
|
-
// ==========================================================================
|
|
7
|
-
// -- HELPER MIXIN FOR MAGIC CLASSES --
|
|
8
|
-
// ==========================================================================
|
|
9
|
-
// NOTE: the values do not include the unit!! These mixins will always use rem
|
|
10
|
-
// as the unit. I don't see this as a problem because all the classes that use
|
|
11
|
-
// these mixins will be using rem as the unit. If you need to use a different
|
|
12
|
-
// unit, you will need to create a new mixin or revise to allow for different
|
|
13
|
-
// units
|
|
14
|
-
|
|
15
|
-
@mixin handleMagicProperties($property, $value, $positions) {
|
|
16
|
-
@if ($positions == "" or $positions == null) {
|
|
17
|
-
// always uses rem as the unit
|
|
18
|
-
$unit: rem;
|
|
19
|
-
@include createSingleProperty($property, #{$value}#{$unit});
|
|
20
|
-
} @else {
|
|
21
|
-
@include createPositionProperties($property, $value, $positions);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@function derivedClass($list) {
|
|
26
|
-
$numBreakPoints: list.length($list);
|
|
27
|
-
|
|
28
|
-
$baseValue: nth($list, -1);
|
|
29
|
-
$smValue: nth($list, -2);
|
|
30
|
-
$mdValue: if($numBreakPoints >= 3, nth($list, -3), null);
|
|
31
|
-
$lgValue: if($numBreakPoints >= 4, nth($list, -4), null);
|
|
32
|
-
$xlValue: if($numBreakPoints >= 5, nth($list, -5), null);
|
|
33
|
-
$xxlValue: if($numBreakPoints >= 6, nth($list, -6), null);
|
|
34
|
-
|
|
35
|
-
@if ($numBreakPoints == 2) {
|
|
36
|
-
@return #{$smValue}-#{$baseValue};
|
|
37
|
-
} @else if ($numBreakPoints == 3) {
|
|
38
|
-
@return #{$mdValue}-#{$smValue}-#{$baseValue};
|
|
39
|
-
} @else if ($numBreakPoints == 4) {
|
|
40
|
-
@return #{$lgValue}-#{$mdValue}-#{$smValue}-#{$baseValue};
|
|
41
|
-
} @else if ($numBreakPoints == 5) {
|
|
42
|
-
@return #{$xlValue}-#{$lgValue}-#{$mdValue}-#{$smValue}-#{$baseValue};
|
|
43
|
-
} @else if ($numBreakPoints == 6) {
|
|
44
|
-
@return #{$xxlValue}-#{$xlValue}-#{$lgValue}-#{$mdValue}-#{$smValue}-#{$baseValue};
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// ==========================================================================
|
|
49
|
-
// -- GENERATE MAGIC CLASS FOR A SINGLE PROPERTY --
|
|
50
|
-
// ==========================================================================
|
|
51
|
-
// * `rem` is the default unit, pass in empty string to set to null
|
|
52
|
-
|
|
53
|
-
@mixin magicClass($property, $values-list, $identifier, $unit: "rem", $position-or-axis: "") {
|
|
54
|
-
// get the positions required to build up the class
|
|
55
|
-
// (x:(left, right), y:(top, bottom) ... etc)
|
|
56
|
-
$positions: map-get($axis-position-map, $position-or-axis);
|
|
57
|
-
|
|
58
|
-
@each $list in $values-list {
|
|
59
|
-
// exclude empty list when creating single list
|
|
60
|
-
@if ($list != ()) {
|
|
61
|
-
$numBreakPoints: list.length($list);
|
|
62
|
-
|
|
63
|
-
// set the value of the BP based on position using negative
|
|
64
|
-
// numbers. This makes sure the position is always the same
|
|
65
|
-
$baseValue: nth($list, -1);
|
|
66
|
-
$smValue: nth($list, -2);
|
|
67
|
-
$mdValue: if($numBreakPoints >= 3, nth($list, -3), null);
|
|
68
|
-
$lgValue: if($numBreakPoints >= 4, nth($list, -4), null);
|
|
69
|
-
|
|
70
|
-
$derived-class: derivedClass($list);
|
|
71
|
-
|
|
72
|
-
// DO NOT use else-if statements when building the classes.
|
|
73
|
-
// You want to give all classes to the opportunity to build.
|
|
74
|
-
.#{$identifier}-#{$derived-class} {
|
|
75
|
-
@include handleMagicProperties($property, $baseValue, $positions);
|
|
76
|
-
|
|
77
|
-
@include from-sm {
|
|
78
|
-
@include handleMagicProperties($property, $smValue, $positions);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
@if ($numBreakPoints >= 3) {
|
|
82
|
-
@include from-md {
|
|
83
|
-
@include handleMagicProperties($property, $mdValue, $positions);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
@if ($numBreakPoints >= 4) {
|
|
88
|
-
@include from-lg {
|
|
89
|
-
@include handleMagicProperties($property, $lgValue, $positions);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
@if ($numBreakPoints >= 5) {
|
|
94
|
-
@include from-xl {
|
|
95
|
-
@include handleMagicProperties($property, $xlValue, $positions);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
// I don't see the need to cover xxl, I think this is too much
|
|
99
|
-
// and you would be better off using responsive classes
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|