nk_jtb 0.9.18 → 0.11.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/.sassdocrc +6 -0
- package/docs/index.html +78 -83
- package/index.html +208 -9
- package/package.json +1 -1
- package/public/svg/naykel-ui.svg +1 -1
- package/src/base/_content_gap.scss +1 -0
- package/src/components/_other.scss +13 -13
- package/src/extras/_nk-docs.scss +16 -7
- package/src/mixins/_class-helpers.scss +55 -45
- package/src/mixins/_generate-classes.scss +19 -0
- package/src/mixins/_generate-magic-classes.scss +11 -12
- package/src/mixins/{generators/_generate-utilities.scss → _generate-utilities.scss} +23 -26
- package/src/mixins/_make-class-mixins.scss +43 -0
- package/src/mixins/_make-position-based-class.scss +43 -0
- package/src/mixins/_make-responsive-class-mixins.scss +139 -0
- package/src/mixins/common.scss +6 -0
- package/src/play.scss +12 -33
- package/src/utilities/_display-visibility.scss +10 -11
- package/src/utilities/_flexbox.scss +11 -5
- package/src/utilities/_grid.scss +12 -13
- package/src/utilities/_margin.scss +7 -6
- package/src/utilities/_sizing.scss +10 -28
- package/src/mixins/_classGenerators.scss +0 -14
- package/src/mixins/_common.scss +0 -11
- package/src/mixins/_makeClassMixins.scss +0 -44
- package/src/mixins/_makePropertyMixins.scss +0 -24
- package/src/mixins/_makeResponsiveClassMixins.scss +0 -138
- package/src/mixins/generators/_generate-classes.scss +0 -24
- package/src/mixins/generators/_generate-from-values.scss +0 -40
- /package/src/{components-extended → extras}/_hero.scss +0 -0
package/.sassdocrc
ADDED
package/docs/index.html
CHANGED
|
@@ -1,5 +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.
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Nk_jtb - v0.9.18</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.18</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="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="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
3
|
// get the positions required to build up the class
|
|
4
4
|
// (x:(left, right), y:(top, bottom) ... etc)
|
|
5
5
|
$positions: map-get($axis-position-map, $position-or-axis);
|
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
$mdValue: if($numBreakPoints >= 3, nth($list, -3), null);
|
|
17
17
|
$lgValue: if($numBreakPoints >= 4, nth($list, -4), null);
|
|
18
18
|
|
|
19
|
-
$derived-class: derivedClass($list);
|
|
19
|
+
$derived-class: derivedClass($identifier, $list, $is-parent);
|
|
20
20
|
|
|
21
21
|
// DO NOT use else-if statements when building the classes.
|
|
22
22
|
// You want to give all classes to the opportunity to build.
|
|
23
|
-
.#{$
|
|
23
|
+
.#{$derived-class} {
|
|
24
24
|
@include handleMagicProperties($property, $baseValue, $positions);
|
|
25
25
|
|
|
26
26
|
@include from-sm {
|
|
@@ -47,140 +47,135 @@
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
}
|
|
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
|
|
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
51
|
.#{$class} {
|
|
52
52
|
#{$property}: $value;
|
|
53
53
|
}
|
|
54
|
-
|
|
55
54
|
@if ($breakpoints) {
|
|
56
|
-
|
|
57
|
-
@include makeFromBreakpoint(($property: $value), $class, $breakpoints);
|
|
55
|
+
@include make-from-breakpoint(($property: $value), $class, $breakpoints);
|
|
58
56
|
}
|
|
59
|
-
}" data-collapsed="@mixin
|
|
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"; }
|
|
60
58
|
|
|
61
|
-
|
|
62
|
-
|
|
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
|
-
@each $property, $value in $props {
|
|
77
|
-
#{$property}: $value;
|
|
78
|
-
}
|
|
79
|
-
}" data-collapsed="@mixin createProperties($props) { ... }"><code>@mixin createProperties($props) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate one or more 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 {
|
|
80
|
-
@include createProperties((color: blue, background-color: white));
|
|
59
|
+
@media (min-width: 576px) {
|
|
60
|
+
.sm\:txt-red { color: "red"; }
|
|
81
61
|
}
|
|
82
62
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
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="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) {
|
|
66
|
+
#{$property}: $value;
|
|
67
|
+
}" 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 {
|
|
68
|
+
@include create-property(background-color, red);
|
|
69
|
+
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.element {
|
|
70
|
+
background-color: red;
|
|
71
|
+
}</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) {
|
|
72
|
+
@each $property, $value in $props {
|
|
73
|
+
@include create-property($property, $value);
|
|
74
|
+
}
|
|
75
|
+
}" 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 {
|
|
76
|
+
@include create-properties((color: blue, background-color: white));
|
|
77
|
+
}</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 {
|
|
78
|
+
color: blue;
|
|
79
|
+
background-color: white;
|
|
80
|
+
}</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) {
|
|
87
81
|
@each $bp in $breakpoints {
|
|
88
82
|
$derived-class: #{$bp}\:#{$identifier};
|
|
89
83
|
.#{$derived-class} {
|
|
90
|
-
@if ($bp ==
|
|
84
|
+
@if ($bp == 'sm') {
|
|
91
85
|
@include from-sm {
|
|
92
|
-
@include
|
|
86
|
+
@include create-properties($props);
|
|
93
87
|
}
|
|
94
|
-
} @else if($bp ==
|
|
88
|
+
} @else if($bp == 'md') {
|
|
95
89
|
@include from-md {
|
|
96
|
-
@include
|
|
90
|
+
@include create-properties($props);
|
|
97
91
|
}
|
|
98
|
-
} @else if($bp ==
|
|
92
|
+
} @else if($bp == 'lg') {
|
|
99
93
|
@include from-lg {
|
|
100
|
-
@include
|
|
94
|
+
@include create-properties($props);
|
|
101
95
|
}
|
|
102
|
-
} @else if($bp ==
|
|
96
|
+
} @else if($bp == 'xl') {
|
|
103
97
|
@include from-xl {
|
|
104
|
-
@include
|
|
98
|
+
@include create-properties($props);
|
|
105
99
|
}
|
|
106
|
-
} @else if($bp ==
|
|
100
|
+
} @else if($bp == 'xxl') {
|
|
107
101
|
@include from-xxl {
|
|
108
|
-
@include
|
|
102
|
+
@include create-properties($props);
|
|
109
103
|
}
|
|
110
104
|
}
|
|
111
105
|
}
|
|
112
106
|
}
|
|
113
|
-
}" data-collapsed="@mixin
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
)
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
107
|
+
}" 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(
|
|
108
|
+
(display: flex, flex-direction: column),
|
|
109
|
+
'flex-column',
|
|
110
|
+
('sm', 'md')
|
|
111
|
+
);</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(
|
|
112
|
+
$props: (display: flex, flex-direction: column),
|
|
113
|
+
$identifier: 'flex-column',
|
|
114
|
+
$breakpoints: ('sm', 'md')
|
|
115
|
+
);</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) {
|
|
116
|
+
.sm\:flex-column {
|
|
117
|
+
display: flex;
|
|
118
|
+
flex-direction: column;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
@media (min-width: 768px) {
|
|
122
|
+
.md\:flex-column {
|
|
123
|
+
display: flex;
|
|
124
|
+
flex-direction: column;
|
|
125
|
+
}
|
|
126
|
+
}</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) {
|
|
132
127
|
@each $bp in $breakpoints {
|
|
133
128
|
$derived-class: #{$bp}\:#{$identifier};
|
|
134
129
|
.to-#{$derived-class} {
|
|
135
|
-
@if ($bp ==
|
|
130
|
+
@if ($bp == 'sm') {
|
|
136
131
|
@include to-sm {
|
|
137
|
-
@include
|
|
132
|
+
@include create-properties($props);
|
|
138
133
|
}
|
|
139
|
-
} @else if($bp ==
|
|
134
|
+
} @else if($bp == 'md') {
|
|
140
135
|
@include to-md {
|
|
141
|
-
@include
|
|
136
|
+
@include create-properties($props);
|
|
142
137
|
}
|
|
143
|
-
} @else if($bp ==
|
|
138
|
+
} @else if($bp == 'lg') {
|
|
144
139
|
@include to-lg {
|
|
145
|
-
@include
|
|
140
|
+
@include create-properties($props);
|
|
146
141
|
}
|
|
147
|
-
} @else if($bp ==
|
|
142
|
+
} @else if($bp == 'xl') {
|
|
148
143
|
@include to-xl {
|
|
149
|
-
@include
|
|
144
|
+
@include create-properties($props);
|
|
150
145
|
}
|
|
151
146
|
} @else {
|
|
152
147
|
@error 'The device '#{$bp}' is not available for this mixin, you need to remove it from the args list.';
|
|
153
148
|
}
|
|
154
149
|
}
|
|
155
150
|
}
|
|
156
|
-
}" data-collapsed="@mixin
|
|
151
|
+
}" 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) {
|
|
157
152
|
@each $bp in $breakpoints {
|
|
158
153
|
$derived-class: #{$bp}\:#{$identifier};
|
|
159
154
|
.on-#{$derived-class} {
|
|
160
|
-
@if ($bp ==
|
|
155
|
+
@if ($bp == 'sm') {
|
|
161
156
|
@include on-sm {
|
|
162
|
-
@include
|
|
157
|
+
@include create-properties($props);
|
|
163
158
|
}
|
|
164
|
-
} @else if($bp ==
|
|
159
|
+
} @else if($bp == 'md') {
|
|
165
160
|
@include on-md {
|
|
166
|
-
@include
|
|
161
|
+
@include create-properties($props);
|
|
167
162
|
}
|
|
168
|
-
} @else if($bp ==
|
|
163
|
+
} @else if($bp == 'lg') {
|
|
169
164
|
@include on-lg {
|
|
170
|
-
@include
|
|
165
|
+
@include create-properties($props);
|
|
171
166
|
}
|
|
172
|
-
} @else if($bp ==
|
|
167
|
+
} @else if($bp == 'xl') {
|
|
173
168
|
@include on-xl {
|
|
174
|
-
@include
|
|
169
|
+
@include create-properties($props);
|
|
175
170
|
}
|
|
176
|
-
} @else if($bp ==
|
|
171
|
+
} @else if($bp == 'xxl') {
|
|
177
172
|
@include on-xxl {
|
|
178
|
-
@include
|
|
173
|
+
@include create-properties($props);
|
|
179
174
|
}
|
|
180
175
|
}
|
|
181
176
|
}
|
|
182
177
|
}
|
|
183
|
-
}" data-collapsed="@mixin
|
|
178
|
+
}" 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) {
|
|
184
179
|
@if str-slice($string, -1) == "-" {
|
|
185
180
|
@return str-slice($string, 1, -2);
|
|
186
181
|
}
|
|
@@ -203,4 +198,4 @@
|
|
|
203
198
|
// 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
199
|
@return "#{$int}";
|
|
205
200
|
}" 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.
|
|
201
|
+
// 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.18</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>
|