@ulu/frontend 0.1.0-beta.42 → 0.1.0-beta.44
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/CHANGELOG.md +11 -0
- package/dist/ulu-frontend.min.css +1 -1
- package/docs-dev/changelog/index.html +27 -0
- package/docs-dev/demos/card/index.html +2 -2
- package/docs-dev/demos/popovers/index.html +5453 -0
- package/docs-dev/sass/base/elements/index.html +70 -70
- package/docs-dev/sass/base/index/index.html +56 -56
- package/docs-dev/sass/base/layout/index.html +63 -63
- package/docs-dev/sass/components/accordion/index.html +118 -118
- package/docs-dev/sass/components/adaptive-spacing/index.html +124 -124
- package/docs-dev/sass/components/badge/index.html +96 -96
- package/docs-dev/sass/components/basic-hero/index.html +62 -62
- package/docs-dev/sass/components/button/index.html +49 -49
- package/docs-dev/sass/components/button-verbose/index.html +128 -128
- package/docs-dev/sass/components/callout/index.html +163 -163
- package/docs-dev/sass/components/captioned-figure/index.html +114 -114
- package/docs-dev/sass/components/card/index.html +198 -175
- package/docs-dev/sass/components/card-grid/index.html +70 -70
- package/docs-dev/sass/components/counter-list/index.html +119 -119
- package/docs-dev/sass/components/css-icon/index.html +140 -140
- package/docs-dev/sass/components/data-grid/index.html +166 -166
- package/docs-dev/sass/components/data-table/index.html +114 -114
- package/docs-dev/sass/components/flipcard/index.html +162 -162
- package/docs-dev/sass/components/flipcard-grid/index.html +57 -57
- package/docs-dev/sass/components/form-theme/index.html +265 -265
- package/docs-dev/sass/components/hero/index.html +107 -107
- package/docs-dev/sass/components/horizontal-rule/index.html +56 -56
- package/docs-dev/sass/components/image-grid/index.html +63 -63
- package/docs-dev/sass/components/index/index.html +95 -95
- package/docs-dev/sass/components/list-inline/index.html +77 -77
- package/docs-dev/sass/components/list-lines/index.html +98 -98
- package/docs-dev/sass/components/menu-stack/index.html +119 -119
- package/docs-dev/sass/components/modal/index.html +114 -114
- package/docs-dev/sass/components/nav-strip/index.html +114 -114
- package/docs-dev/sass/components/overlay-section/index.html +101 -101
- package/docs-dev/sass/components/pager/index.html +114 -114
- package/docs-dev/sass/components/placeholder-block/index.html +114 -114
- package/docs-dev/sass/components/popover/index.html +114 -114
- package/docs-dev/sass/components/pull-quote/index.html +114 -114
- package/docs-dev/sass/components/ratio-box/index.html +60 -60
- package/docs-dev/sass/components/rule/index.html +63 -63
- package/docs-dev/sass/components/scroll-slider/index.html +114 -114
- package/docs-dev/sass/components/skip-link/index.html +34 -34
- package/docs-dev/sass/components/slider/index.html +114 -114
- package/docs-dev/sass/components/spoke-spinner/index.html +56 -56
- package/docs-dev/sass/components/sticky-list/index.html +145 -145
- package/docs-dev/sass/components/tabs/index.html +114 -114
- package/docs-dev/sass/components/tag/index.html +161 -161
- package/docs-dev/sass/components/tile-button/index.html +101 -101
- package/docs-dev/sass/components/tile-grid/index.html +142 -142
- package/docs-dev/sass/components/tile-grid-overlay/index.html +37 -37
- package/docs-dev/sass/components/vignette/index.html +56 -56
- package/docs-dev/sass/components/wysiwyg/index.html +65 -65
- package/docs-dev/sass/core/breakpoint/index.html +100 -100
- package/docs-dev/sass/core/button/index.html +535 -535
- package/docs-dev/sass/core/color/index.html +157 -157
- package/docs-dev/sass/core/cssvar/index.html +49 -49
- package/docs-dev/sass/core/element/index.html +504 -504
- package/docs-dev/sass/core/layout/index.html +107 -107
- package/docs-dev/sass/core/path/index.html +32 -32
- package/docs-dev/sass/core/selector/index.html +49 -49
- package/docs-dev/sass/core/typography/index.html +265 -265
- package/docs-dev/sass/core/units/index.html +81 -81
- package/docs-dev/sass/core/utils/index.html +70 -70
- package/docs-dev/sass/helpers/index/index.html +53 -53
- package/docs-dev/sass/helpers/units/index.html +47 -47
- package/package.json +5 -2
- package/scss/components/_card.scss +25 -11
|
@@ -5166,6 +5166,18 @@
|
|
|
5166
5166
|
<div class="toc">
|
|
5167
5167
|
<ol>
|
|
5168
5168
|
|
|
5169
|
+
<li><a href="#variables">Variables</a>
|
|
5170
|
+
|
|
5171
|
+
<ol>
|
|
5172
|
+
|
|
5173
|
+
<li><a href="#variable-config">$config</a>
|
|
5174
|
+
</li>
|
|
5175
|
+
|
|
5176
|
+
<li><a href="#variable-styles">$styles</a>
|
|
5177
|
+
</li>
|
|
5178
|
+
</ol>
|
|
5179
|
+
</li>
|
|
5180
|
+
|
|
5169
5181
|
<li><a href="#mixins">Mixins</a>
|
|
5170
5182
|
|
|
5171
5183
|
<ol>
|
|
@@ -5187,18 +5199,6 @@
|
|
|
5187
5199
|
|
|
5188
5200
|
<li><a href="#function-get">get()</a>
|
|
5189
5201
|
</li>
|
|
5190
|
-
</ol>
|
|
5191
|
-
</li>
|
|
5192
|
-
|
|
5193
|
-
<li><a href="#variables">Variables</a>
|
|
5194
|
-
|
|
5195
|
-
<ol>
|
|
5196
|
-
|
|
5197
|
-
<li><a href="#variable-config">$config</a>
|
|
5198
|
-
</li>
|
|
5199
|
-
|
|
5200
|
-
<li><a href="#variable-styles">$styles</a>
|
|
5201
|
-
</li>
|
|
5202
5202
|
</ol>
|
|
5203
5203
|
</li>
|
|
5204
5204
|
</ol>
|
|
@@ -5216,6 +5216,50 @@
|
|
|
5216
5216
|
<div class="type-large">
|
|
5217
5217
|
<p>A spoke style spinner/loader icon, requires ulu.base-keyframes</p>
|
|
5218
5218
|
</div>
|
|
5219
|
+
<h2 id="variables" tabindex="-1">Variables</h2>
|
|
5220
|
+
<div class="sassdoc-item-header">
|
|
5221
|
+
<h3 id="variable-config" tabindex="-1">$config</h3>
|
|
5222
|
+
<div class="sassdoc-item-header__labels">
|
|
5223
|
+
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
5224
|
+
</div>
|
|
5225
|
+
</div>
|
|
5226
|
+
<p>Module Settings</p>
|
|
5227
|
+
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5228
|
+
<span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 48px<span class="pjs-token pjs-punctuation">,</span>
|
|
5229
|
+
<span class="pjs-token pjs-string">"spoke-width"</span> <span class="pjs-token pjs-punctuation">:</span> 3px<span class="pjs-token pjs-punctuation">,</span>
|
|
5230
|
+
<span class="pjs-token pjs-string">"spoke-height"</span> <span class="pjs-token pjs-punctuation">:</span> 12px<span class="pjs-token pjs-punctuation">,</span>
|
|
5231
|
+
<span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"accent"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5232
|
+
<span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> 2px<span class="pjs-token pjs-punctuation">,</span>
|
|
5233
|
+
<span class="pjs-token pjs-string">"duration"</span> <span class="pjs-token pjs-punctuation">:</span> 1.2s
|
|
5234
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5235
|
+
<details>
|
|
5236
|
+
<summary>File Information</summary>
|
|
5237
|
+
<ul>
|
|
5238
|
+
<li><strong>File:</strong> _spoke-spinner.scss</li>
|
|
5239
|
+
<li><strong>Group:</strong> spoke-spinner</li>
|
|
5240
|
+
<li><strong>Type:</strong> variable</li>
|
|
5241
|
+
<li><strong>Lines (comments):</strong> 13-14</li>
|
|
5242
|
+
<li><strong>Lines (code):</strong> 16-23</li>
|
|
5243
|
+
</ul>
|
|
5244
|
+
</details>
|
|
5245
|
+
<div class="sassdoc-item-header">
|
|
5246
|
+
<h3 id="variable-styles" tabindex="-1">$styles</h3>
|
|
5247
|
+
<div class="sassdoc-item-header__labels">
|
|
5248
|
+
<span class="tag tag--primary"><strong>Variable</strong></span>
|
|
5249
|
+
</div>
|
|
5250
|
+
</div>
|
|
5251
|
+
<p>Map of other sizes (use as modifiers), same properties as config/defaults</p>
|
|
5252
|
+
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$styles</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5253
|
+
<details>
|
|
5254
|
+
<summary>File Information</summary>
|
|
5255
|
+
<ul>
|
|
5256
|
+
<li><strong>File:</strong> _spoke-spinner.scss</li>
|
|
5257
|
+
<li><strong>Group:</strong> spoke-spinner</li>
|
|
5258
|
+
<li><strong>Type:</strong> variable</li>
|
|
5259
|
+
<li><strong>Lines (comments):</strong> 25-25</li>
|
|
5260
|
+
<li><strong>Lines (code):</strong> 26-26</li>
|
|
5261
|
+
</ul>
|
|
5262
|
+
</details>
|
|
5219
5263
|
<h2 id="mixins" tabindex="-1">Mixins</h2>
|
|
5220
5264
|
<div class="sassdoc-item-header">
|
|
5221
5265
|
<h3 id="mixin-set" tabindex="-1">set()</h3>
|
|
@@ -5382,50 +5426,6 @@
|
|
|
5382
5426
|
<ul>
|
|
5383
5427
|
<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
|
|
5384
5428
|
</ul>
|
|
5385
|
-
<h2 id="variables" tabindex="-1">Variables</h2>
|
|
5386
|
-
<div class="sassdoc-item-header">
|
|
5387
|
-
<h3 id="variable-config" tabindex="-1">$config</h3>
|
|
5388
|
-
<div class="sassdoc-item-header__labels">
|
|
5389
|
-
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
5390
|
-
</div>
|
|
5391
|
-
</div>
|
|
5392
|
-
<p>Module Settings</p>
|
|
5393
|
-
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5394
|
-
<span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 48px<span class="pjs-token pjs-punctuation">,</span>
|
|
5395
|
-
<span class="pjs-token pjs-string">"spoke-width"</span> <span class="pjs-token pjs-punctuation">:</span> 3px<span class="pjs-token pjs-punctuation">,</span>
|
|
5396
|
-
<span class="pjs-token pjs-string">"spoke-height"</span> <span class="pjs-token pjs-punctuation">:</span> 12px<span class="pjs-token pjs-punctuation">,</span>
|
|
5397
|
-
<span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"accent"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5398
|
-
<span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> 2px<span class="pjs-token pjs-punctuation">,</span>
|
|
5399
|
-
<span class="pjs-token pjs-string">"duration"</span> <span class="pjs-token pjs-punctuation">:</span> 1.2s
|
|
5400
|
-
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5401
|
-
<details>
|
|
5402
|
-
<summary>File Information</summary>
|
|
5403
|
-
<ul>
|
|
5404
|
-
<li><strong>File:</strong> _spoke-spinner.scss</li>
|
|
5405
|
-
<li><strong>Group:</strong> spoke-spinner</li>
|
|
5406
|
-
<li><strong>Type:</strong> variable</li>
|
|
5407
|
-
<li><strong>Lines (comments):</strong> 13-14</li>
|
|
5408
|
-
<li><strong>Lines (code):</strong> 16-23</li>
|
|
5409
|
-
</ul>
|
|
5410
|
-
</details>
|
|
5411
|
-
<div class="sassdoc-item-header">
|
|
5412
|
-
<h3 id="variable-styles" tabindex="-1">$styles</h3>
|
|
5413
|
-
<div class="sassdoc-item-header__labels">
|
|
5414
|
-
<span class="tag tag--primary"><strong>Variable</strong></span>
|
|
5415
|
-
</div>
|
|
5416
|
-
</div>
|
|
5417
|
-
<p>Map of other sizes (use as modifiers), same properties as config/defaults</p>
|
|
5418
|
-
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$styles</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5419
|
-
<details>
|
|
5420
|
-
<summary>File Information</summary>
|
|
5421
|
-
<ul>
|
|
5422
|
-
<li><strong>File:</strong> _spoke-spinner.scss</li>
|
|
5423
|
-
<li><strong>Group:</strong> spoke-spinner</li>
|
|
5424
|
-
<li><strong>Type:</strong> variable</li>
|
|
5425
|
-
<li><strong>Lines (comments):</strong> 25-25</li>
|
|
5426
|
-
<li><strong>Lines (code):</strong> 26-26</li>
|
|
5427
|
-
</ul>
|
|
5428
|
-
</details>
|
|
5429
5429
|
|
|
5430
5430
|
</div>
|
|
5431
5431
|
</div>
|
|
@@ -5166,6 +5166,15 @@
|
|
|
5166
5166
|
<div class="toc">
|
|
5167
5167
|
<ol>
|
|
5168
5168
|
|
|
5169
|
+
<li><a href="#variables">Variables</a>
|
|
5170
|
+
|
|
5171
|
+
<ol>
|
|
5172
|
+
|
|
5173
|
+
<li><a href="#variable-config">$config</a>
|
|
5174
|
+
</li>
|
|
5175
|
+
</ol>
|
|
5176
|
+
</li>
|
|
5177
|
+
|
|
5169
5178
|
<li><a href="#mixins">Mixins</a>
|
|
5170
5179
|
|
|
5171
5180
|
<ol>
|
|
@@ -5190,15 +5199,6 @@
|
|
|
5190
5199
|
|
|
5191
5200
|
<li><a href="#function-get">get()</a>
|
|
5192
5201
|
</li>
|
|
5193
|
-
</ol>
|
|
5194
|
-
</li>
|
|
5195
|
-
|
|
5196
|
-
<li><a href="#variables">Variables</a>
|
|
5197
|
-
|
|
5198
|
-
<ol>
|
|
5199
|
-
|
|
5200
|
-
<li><a href="#variable-config">$config</a>
|
|
5201
|
-
</li>
|
|
5202
5202
|
</ol>
|
|
5203
5203
|
</li>
|
|
5204
5204
|
</ol>
|
|
@@ -5216,6 +5216,142 @@
|
|
|
5216
5216
|
<div class="type-large">
|
|
5217
5217
|
<p>Sticky first column, sticky elements inside adjacent columns to first. (Sticky list with header)</p>
|
|
5218
5218
|
</div>
|
|
5219
|
+
<h2 id="variables" tabindex="-1">Variables</h2>
|
|
5220
|
+
<div class="sassdoc-item-header">
|
|
5221
|
+
<h3 id="variable-config" tabindex="-1">$config</h3>
|
|
5222
|
+
<div class="sassdoc-item-header__labels">
|
|
5223
|
+
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
5224
|
+
</div>
|
|
5225
|
+
</div>
|
|
5226
|
+
<p>Module Settings</p>
|
|
5227
|
+
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5228
|
+
<span class="pjs-token pjs-string">"margin"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5229
|
+
<span class="pjs-token pjs-string">"mask-offset-bottom"</span> <span class="pjs-token pjs-punctuation">:</span> 55vh<span class="pjs-token pjs-punctuation">,</span>
|
|
5230
|
+
<span class="pjs-token pjs-string">"mask-offset-top"</span> <span class="pjs-token pjs-punctuation">:</span> 5rem<span class="pjs-token pjs-punctuation">,</span>
|
|
5231
|
+
<span class="pjs-token pjs-string">"sticky-top"</span> <span class="pjs-token pjs-punctuation">:</span> 45vh<span class="pjs-token pjs-punctuation">,</span>
|
|
5232
|
+
<span class="pjs-token pjs-string">"breakpoint"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5233
|
+
<span class="pjs-token pjs-string">"type-size"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"large"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5234
|
+
<span class="pjs-token pjs-string">"title-width"</span> <span class="pjs-token pjs-punctuation">:</span> 40%<span class="pjs-token pjs-punctuation">,</span>
|
|
5235
|
+
<span class="pjs-token pjs-string">"title-min-width"</span> <span class="pjs-token pjs-punctuation">:</span> 8em<span class="pjs-token pjs-punctuation">,</span>
|
|
5236
|
+
<span class="pjs-token pjs-string">"title-text-align"</span> <span class="pjs-token pjs-punctuation">:</span> right<span class="pjs-token pjs-punctuation">,</span>
|
|
5237
|
+
<span class="pjs-token pjs-string">"item-padding-x"</span> <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
|
|
5238
|
+
<span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">,</span>
|
|
5239
|
+
<span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
|
|
5240
|
+
<span class="pjs-token pjs-string">"background-contexts"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5241
|
+
<span class="pjs-token pjs-punctuation">(</span>
|
|
5242
|
+
<span class="pjs-token pjs-string">"selector"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">".background-dark"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5243
|
+
<span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> black<span class="pjs-token pjs-punctuation">,</span>
|
|
5244
|
+
<span class="pjs-token pjs-string">"item-padding-x"</span> <span class="pjs-token pjs-punctuation">:</span> 1em
|
|
5245
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5246
|
+
<span class="pjs-token pjs-punctuation">)</span>
|
|
5247
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5248
|
+
<details>
|
|
5249
|
+
<summary>File Information</summary>
|
|
5250
|
+
<ul>
|
|
5251
|
+
<li><strong>File:</strong> _sticky-list.scss</li>
|
|
5252
|
+
<li><strong>Group:</strong> sticky-list</li>
|
|
5253
|
+
<li><strong>Type:</strong> variable</li>
|
|
5254
|
+
<li><strong>Lines (comments):</strong> 26-41</li>
|
|
5255
|
+
<li><strong>Lines (code):</strong> 43-63</li>
|
|
5256
|
+
</ul>
|
|
5257
|
+
</details>
|
|
5258
|
+
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
5259
|
+
<table>
|
|
5260
|
+
<thead>
|
|
5261
|
+
<tr>
|
|
5262
|
+
<th style="text-align:left">Name</th>
|
|
5263
|
+
<th style="text-align:left">Type</th>
|
|
5264
|
+
<th style="text-align:left">Default</th>
|
|
5265
|
+
<th style="text-align:left">Description</th>
|
|
5266
|
+
</tr>
|
|
5267
|
+
</thead>
|
|
5268
|
+
<tbody>
|
|
5269
|
+
<tr>
|
|
5270
|
+
<td style="text-align:left">background-color</td>
|
|
5271
|
+
<td style="text-align:left">Color</td>
|
|
5272
|
+
<td style="text-align:left">transparent</td>
|
|
5273
|
+
<td style="text-align:left">Background color for the entire slider section.</td>
|
|
5274
|
+
</tr>
|
|
5275
|
+
<tr>
|
|
5276
|
+
<td style="text-align:left">margin</td>
|
|
5277
|
+
<td style="text-align:left">Number</td>
|
|
5278
|
+
<td style="text-align:left">true</td>
|
|
5279
|
+
<td style="text-align:left">Margin on ends of component (defaults to element margin)</td>
|
|
5280
|
+
</tr>
|
|
5281
|
+
<tr>
|
|
5282
|
+
<td style="text-align:left">mask-offset-bottom</td>
|
|
5283
|
+
<td style="text-align:left">Number</td>
|
|
5284
|
+
<td style="text-align:left">55vh</td>
|
|
5285
|
+
<td style="text-align:left">The offset for the mask (on bottom)</td>
|
|
5286
|
+
</tr>
|
|
5287
|
+
<tr>
|
|
5288
|
+
<td style="text-align:left">mask-offset-top</td>
|
|
5289
|
+
<td style="text-align:left">Number</td>
|
|
5290
|
+
<td style="text-align:left">5rem</td>
|
|
5291
|
+
<td style="text-align:left">The offset for the mask (on top)</td>
|
|
5292
|
+
</tr>
|
|
5293
|
+
<tr>
|
|
5294
|
+
<td style="text-align:left">sticky-top</td>
|
|
5295
|
+
<td style="text-align:left">Number</td>
|
|
5296
|
+
<td style="text-align:left">45vh</td>
|
|
5297
|
+
<td style="text-align:left">When to stick</td>
|
|
5298
|
+
</tr>
|
|
5299
|
+
<tr>
|
|
5300
|
+
<td style="text-align:left">breakpoint</td>
|
|
5301
|
+
<td style="text-align:left">String</td>
|
|
5302
|
+
<td style="text-align:left">"medium"</td>
|
|
5303
|
+
<td style="text-align:left">The upward breakpoint that this is allowed to be sticky</td>
|
|
5304
|
+
</tr>
|
|
5305
|
+
<tr>
|
|
5306
|
+
<td style="text-align:left">type-size</td>
|
|
5307
|
+
<td style="text-align:left">String</td>
|
|
5308
|
+
<td style="text-align:left">"medium"</td>
|
|
5309
|
+
<td style="text-align:left">The typography size to use for title</td>
|
|
5310
|
+
</tr>
|
|
5311
|
+
<tr>
|
|
5312
|
+
<td style="text-align:left">title-width</td>
|
|
5313
|
+
<td style="text-align:left">Number</td>
|
|
5314
|
+
<td style="text-align:left">40%</td>
|
|
5315
|
+
<td style="text-align:left">The width of the title when this is displayed in columns</td>
|
|
5316
|
+
</tr>
|
|
5317
|
+
<tr>
|
|
5318
|
+
<td style="text-align:left">title-min-width</td>
|
|
5319
|
+
<td style="text-align:left">Number</td>
|
|
5320
|
+
<td style="text-align:left">8em</td>
|
|
5321
|
+
<td style="text-align:left">The min width for title when displayed in columns</td>
|
|
5322
|
+
</tr>
|
|
5323
|
+
<tr>
|
|
5324
|
+
<td style="text-align:left">title-text-align</td>
|
|
5325
|
+
<td style="text-align:left">CssValue</td>
|
|
5326
|
+
<td style="text-align:left">right</td>
|
|
5327
|
+
<td style="text-align:left">Text alignment for title when displayed in columns</td>
|
|
5328
|
+
</tr>
|
|
5329
|
+
<tr>
|
|
5330
|
+
<td style="text-align:left">item-padding-x</td>
|
|
5331
|
+
<td style="text-align:left">Number</td>
|
|
5332
|
+
<td style="text-align:left">0</td>
|
|
5333
|
+
<td style="text-align:left">Optional padding on the left/right for items</td>
|
|
5334
|
+
</tr>
|
|
5335
|
+
<tr>
|
|
5336
|
+
<td style="text-align:left">gap</td>
|
|
5337
|
+
<td style="text-align:left">Number</td>
|
|
5338
|
+
<td style="text-align:left">2rem</td>
|
|
5339
|
+
<td style="text-align:left">The gap between title and items when displayed in columns</td>
|
|
5340
|
+
</tr>
|
|
5341
|
+
<tr>
|
|
5342
|
+
<td style="text-align:left">background-color</td>
|
|
5343
|
+
<td style="text-align:left">Color</td>
|
|
5344
|
+
<td style="text-align:left">white</td>
|
|
5345
|
+
<td style="text-align:left">The background color used for the mask</td>
|
|
5346
|
+
</tr>
|
|
5347
|
+
<tr>
|
|
5348
|
+
<td style="text-align:left">background-contexts</td>
|
|
5349
|
+
<td style="text-align:left">List</td>
|
|
5350
|
+
<td style="text-align:left"></td>
|
|
5351
|
+
<td style="text-align:left">Adjust the background mask color by contextual selectors. Pass List of Maps with ("selector" [parent/contextual selector], "background-color", "item-padding-x" [optional])</td>
|
|
5352
|
+
</tr>
|
|
5353
|
+
</tbody>
|
|
5354
|
+
</table>
|
|
5219
5355
|
<h2 id="mixins" tabindex="-1">Mixins</h2>
|
|
5220
5356
|
<div class="sassdoc-item-header">
|
|
5221
5357
|
<h3 id="mixin-set" tabindex="-1">set()</h3>
|
|
@@ -5450,142 +5586,6 @@
|
|
|
5450
5586
|
<ul>
|
|
5451
5587
|
<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
|
|
5452
5588
|
</ul>
|
|
5453
|
-
<h2 id="variables" tabindex="-1">Variables</h2>
|
|
5454
|
-
<div class="sassdoc-item-header">
|
|
5455
|
-
<h3 id="variable-config" tabindex="-1">$config</h3>
|
|
5456
|
-
<div class="sassdoc-item-header__labels">
|
|
5457
|
-
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
5458
|
-
</div>
|
|
5459
|
-
</div>
|
|
5460
|
-
<p>Module Settings</p>
|
|
5461
|
-
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5462
|
-
<span class="pjs-token pjs-string">"margin"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5463
|
-
<span class="pjs-token pjs-string">"mask-offset-bottom"</span> <span class="pjs-token pjs-punctuation">:</span> 55vh<span class="pjs-token pjs-punctuation">,</span>
|
|
5464
|
-
<span class="pjs-token pjs-string">"mask-offset-top"</span> <span class="pjs-token pjs-punctuation">:</span> 5rem<span class="pjs-token pjs-punctuation">,</span>
|
|
5465
|
-
<span class="pjs-token pjs-string">"sticky-top"</span> <span class="pjs-token pjs-punctuation">:</span> 45vh<span class="pjs-token pjs-punctuation">,</span>
|
|
5466
|
-
<span class="pjs-token pjs-string">"breakpoint"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5467
|
-
<span class="pjs-token pjs-string">"type-size"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"large"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5468
|
-
<span class="pjs-token pjs-string">"title-width"</span> <span class="pjs-token pjs-punctuation">:</span> 40%<span class="pjs-token pjs-punctuation">,</span>
|
|
5469
|
-
<span class="pjs-token pjs-string">"title-min-width"</span> <span class="pjs-token pjs-punctuation">:</span> 8em<span class="pjs-token pjs-punctuation">,</span>
|
|
5470
|
-
<span class="pjs-token pjs-string">"title-text-align"</span> <span class="pjs-token pjs-punctuation">:</span> right<span class="pjs-token pjs-punctuation">,</span>
|
|
5471
|
-
<span class="pjs-token pjs-string">"item-padding-x"</span> <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
|
|
5472
|
-
<span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">,</span>
|
|
5473
|
-
<span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
|
|
5474
|
-
<span class="pjs-token pjs-string">"background-contexts"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5475
|
-
<span class="pjs-token pjs-punctuation">(</span>
|
|
5476
|
-
<span class="pjs-token pjs-string">"selector"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">".background-dark"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5477
|
-
<span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> black<span class="pjs-token pjs-punctuation">,</span>
|
|
5478
|
-
<span class="pjs-token pjs-string">"item-padding-x"</span> <span class="pjs-token pjs-punctuation">:</span> 1em
|
|
5479
|
-
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5480
|
-
<span class="pjs-token pjs-punctuation">)</span>
|
|
5481
|
-
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5482
|
-
<details>
|
|
5483
|
-
<summary>File Information</summary>
|
|
5484
|
-
<ul>
|
|
5485
|
-
<li><strong>File:</strong> _sticky-list.scss</li>
|
|
5486
|
-
<li><strong>Group:</strong> sticky-list</li>
|
|
5487
|
-
<li><strong>Type:</strong> variable</li>
|
|
5488
|
-
<li><strong>Lines (comments):</strong> 26-41</li>
|
|
5489
|
-
<li><strong>Lines (code):</strong> 43-63</li>
|
|
5490
|
-
</ul>
|
|
5491
|
-
</details>
|
|
5492
|
-
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
5493
|
-
<table>
|
|
5494
|
-
<thead>
|
|
5495
|
-
<tr>
|
|
5496
|
-
<th style="text-align:left">Name</th>
|
|
5497
|
-
<th style="text-align:left">Type</th>
|
|
5498
|
-
<th style="text-align:left">Default</th>
|
|
5499
|
-
<th style="text-align:left">Description</th>
|
|
5500
|
-
</tr>
|
|
5501
|
-
</thead>
|
|
5502
|
-
<tbody>
|
|
5503
|
-
<tr>
|
|
5504
|
-
<td style="text-align:left">background-color</td>
|
|
5505
|
-
<td style="text-align:left">Color</td>
|
|
5506
|
-
<td style="text-align:left">transparent</td>
|
|
5507
|
-
<td style="text-align:left">Background color for the entire slider section.</td>
|
|
5508
|
-
</tr>
|
|
5509
|
-
<tr>
|
|
5510
|
-
<td style="text-align:left">margin</td>
|
|
5511
|
-
<td style="text-align:left">Number</td>
|
|
5512
|
-
<td style="text-align:left">true</td>
|
|
5513
|
-
<td style="text-align:left">Margin on ends of component (defaults to element margin)</td>
|
|
5514
|
-
</tr>
|
|
5515
|
-
<tr>
|
|
5516
|
-
<td style="text-align:left">mask-offset-bottom</td>
|
|
5517
|
-
<td style="text-align:left">Number</td>
|
|
5518
|
-
<td style="text-align:left">55vh</td>
|
|
5519
|
-
<td style="text-align:left">The offset for the mask (on bottom)</td>
|
|
5520
|
-
</tr>
|
|
5521
|
-
<tr>
|
|
5522
|
-
<td style="text-align:left">mask-offset-top</td>
|
|
5523
|
-
<td style="text-align:left">Number</td>
|
|
5524
|
-
<td style="text-align:left">5rem</td>
|
|
5525
|
-
<td style="text-align:left">The offset for the mask (on top)</td>
|
|
5526
|
-
</tr>
|
|
5527
|
-
<tr>
|
|
5528
|
-
<td style="text-align:left">sticky-top</td>
|
|
5529
|
-
<td style="text-align:left">Number</td>
|
|
5530
|
-
<td style="text-align:left">45vh</td>
|
|
5531
|
-
<td style="text-align:left">When to stick</td>
|
|
5532
|
-
</tr>
|
|
5533
|
-
<tr>
|
|
5534
|
-
<td style="text-align:left">breakpoint</td>
|
|
5535
|
-
<td style="text-align:left">String</td>
|
|
5536
|
-
<td style="text-align:left">"medium"</td>
|
|
5537
|
-
<td style="text-align:left">The upward breakpoint that this is allowed to be sticky</td>
|
|
5538
|
-
</tr>
|
|
5539
|
-
<tr>
|
|
5540
|
-
<td style="text-align:left">type-size</td>
|
|
5541
|
-
<td style="text-align:left">String</td>
|
|
5542
|
-
<td style="text-align:left">"medium"</td>
|
|
5543
|
-
<td style="text-align:left">The typography size to use for title</td>
|
|
5544
|
-
</tr>
|
|
5545
|
-
<tr>
|
|
5546
|
-
<td style="text-align:left">title-width</td>
|
|
5547
|
-
<td style="text-align:left">Number</td>
|
|
5548
|
-
<td style="text-align:left">40%</td>
|
|
5549
|
-
<td style="text-align:left">The width of the title when this is displayed in columns</td>
|
|
5550
|
-
</tr>
|
|
5551
|
-
<tr>
|
|
5552
|
-
<td style="text-align:left">title-min-width</td>
|
|
5553
|
-
<td style="text-align:left">Number</td>
|
|
5554
|
-
<td style="text-align:left">8em</td>
|
|
5555
|
-
<td style="text-align:left">The min width for title when displayed in columns</td>
|
|
5556
|
-
</tr>
|
|
5557
|
-
<tr>
|
|
5558
|
-
<td style="text-align:left">title-text-align</td>
|
|
5559
|
-
<td style="text-align:left">CssValue</td>
|
|
5560
|
-
<td style="text-align:left">right</td>
|
|
5561
|
-
<td style="text-align:left">Text alignment for title when displayed in columns</td>
|
|
5562
|
-
</tr>
|
|
5563
|
-
<tr>
|
|
5564
|
-
<td style="text-align:left">item-padding-x</td>
|
|
5565
|
-
<td style="text-align:left">Number</td>
|
|
5566
|
-
<td style="text-align:left">0</td>
|
|
5567
|
-
<td style="text-align:left">Optional padding on the left/right for items</td>
|
|
5568
|
-
</tr>
|
|
5569
|
-
<tr>
|
|
5570
|
-
<td style="text-align:left">gap</td>
|
|
5571
|
-
<td style="text-align:left">Number</td>
|
|
5572
|
-
<td style="text-align:left">2rem</td>
|
|
5573
|
-
<td style="text-align:left">The gap between title and items when displayed in columns</td>
|
|
5574
|
-
</tr>
|
|
5575
|
-
<tr>
|
|
5576
|
-
<td style="text-align:left">background-color</td>
|
|
5577
|
-
<td style="text-align:left">Color</td>
|
|
5578
|
-
<td style="text-align:left">white</td>
|
|
5579
|
-
<td style="text-align:left">The background color used for the mask</td>
|
|
5580
|
-
</tr>
|
|
5581
|
-
<tr>
|
|
5582
|
-
<td style="text-align:left">background-contexts</td>
|
|
5583
|
-
<td style="text-align:left">List</td>
|
|
5584
|
-
<td style="text-align:left"></td>
|
|
5585
|
-
<td style="text-align:left">Adjust the background mask color by contextual selectors. Pass List of Maps with ("selector" [parent/contextual selector], "background-color", "item-padding-x" [optional])</td>
|
|
5586
|
-
</tr>
|
|
5587
|
-
</tbody>
|
|
5588
|
-
</table>
|
|
5589
5589
|
|
|
5590
5590
|
</div>
|
|
5591
5591
|
</div>
|