@ulu/frontend 0.1.0-beta.42 → 0.1.0-beta.43

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.
Files changed (69) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/ulu-frontend.min.css +1 -1
  3. package/docs-dev/changelog/index.html +16 -0
  4. package/docs-dev/demos/card/index.html +16 -16
  5. package/docs-dev/demos/data-table/index.html +100 -100
  6. package/docs-dev/demos/popovers/index.html +5453 -0
  7. package/docs-dev/sass/base/elements/index.html +70 -70
  8. package/docs-dev/sass/base/index/index.html +56 -56
  9. package/docs-dev/sass/base/layout/index.html +63 -63
  10. package/docs-dev/sass/components/accordion/index.html +118 -118
  11. package/docs-dev/sass/components/adaptive-spacing/index.html +124 -124
  12. package/docs-dev/sass/components/badge/index.html +96 -96
  13. package/docs-dev/sass/components/basic-hero/index.html +62 -62
  14. package/docs-dev/sass/components/button/index.html +49 -49
  15. package/docs-dev/sass/components/button-verbose/index.html +128 -128
  16. package/docs-dev/sass/components/callout/index.html +163 -163
  17. package/docs-dev/sass/components/captioned-figure/index.html +114 -114
  18. package/docs-dev/sass/components/card/index.html +170 -170
  19. package/docs-dev/sass/components/card-grid/index.html +70 -70
  20. package/docs-dev/sass/components/counter-list/index.html +119 -119
  21. package/docs-dev/sass/components/css-icon/index.html +140 -140
  22. package/docs-dev/sass/components/data-grid/index.html +166 -166
  23. package/docs-dev/sass/components/data-table/index.html +114 -114
  24. package/docs-dev/sass/components/flipcard/index.html +162 -162
  25. package/docs-dev/sass/components/flipcard-grid/index.html +57 -57
  26. package/docs-dev/sass/components/form-theme/index.html +265 -265
  27. package/docs-dev/sass/components/hero/index.html +107 -107
  28. package/docs-dev/sass/components/horizontal-rule/index.html +56 -56
  29. package/docs-dev/sass/components/image-grid/index.html +63 -63
  30. package/docs-dev/sass/components/index/index.html +95 -95
  31. package/docs-dev/sass/components/list-inline/index.html +77 -77
  32. package/docs-dev/sass/components/list-lines/index.html +98 -98
  33. package/docs-dev/sass/components/menu-stack/index.html +119 -119
  34. package/docs-dev/sass/components/modal/index.html +114 -114
  35. package/docs-dev/sass/components/nav-strip/index.html +114 -114
  36. package/docs-dev/sass/components/overlay-section/index.html +101 -101
  37. package/docs-dev/sass/components/pager/index.html +114 -114
  38. package/docs-dev/sass/components/placeholder-block/index.html +114 -114
  39. package/docs-dev/sass/components/popover/index.html +114 -114
  40. package/docs-dev/sass/components/pull-quote/index.html +114 -114
  41. package/docs-dev/sass/components/ratio-box/index.html +60 -60
  42. package/docs-dev/sass/components/rule/index.html +63 -63
  43. package/docs-dev/sass/components/scroll-slider/index.html +114 -114
  44. package/docs-dev/sass/components/skip-link/index.html +34 -34
  45. package/docs-dev/sass/components/slider/index.html +114 -114
  46. package/docs-dev/sass/components/spoke-spinner/index.html +56 -56
  47. package/docs-dev/sass/components/sticky-list/index.html +145 -145
  48. package/docs-dev/sass/components/tabs/index.html +114 -114
  49. package/docs-dev/sass/components/tag/index.html +161 -161
  50. package/docs-dev/sass/components/tile-button/index.html +101 -101
  51. package/docs-dev/sass/components/tile-grid/index.html +142 -142
  52. package/docs-dev/sass/components/tile-grid-overlay/index.html +37 -37
  53. package/docs-dev/sass/components/vignette/index.html +56 -56
  54. package/docs-dev/sass/components/wysiwyg/index.html +65 -65
  55. package/docs-dev/sass/core/breakpoint/index.html +100 -100
  56. package/docs-dev/sass/core/button/index.html +535 -535
  57. package/docs-dev/sass/core/color/index.html +157 -157
  58. package/docs-dev/sass/core/cssvar/index.html +49 -49
  59. package/docs-dev/sass/core/element/index.html +504 -504
  60. package/docs-dev/sass/core/layout/index.html +107 -107
  61. package/docs-dev/sass/core/path/index.html +32 -32
  62. package/docs-dev/sass/core/selector/index.html +49 -49
  63. package/docs-dev/sass/core/typography/index.html +265 -265
  64. package/docs-dev/sass/core/units/index.html +81 -81
  65. package/docs-dev/sass/core/utils/index.html +70 -70
  66. package/docs-dev/sass/helpers/index/index.html +53 -53
  67. package/docs-dev/sass/helpers/units/index.html +47 -47
  68. package/package.json +1 -1
  69. package/scss/components/_card.scss +9 -6
@@ -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">&quot;medium&quot;</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">&quot;medium&quot;</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 (&quot;selector&quot; [parent/contextual selector], &quot;background-color&quot;, &quot;item-padding-x&quot; [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">&quot;medium&quot;</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">&quot;medium&quot;</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 (&quot;selector&quot; [parent/contextual selector], &quot;background-color&quot;, &quot;item-padding-x&quot; [optional])</td>
5586
- </tr>
5587
- </tbody>
5588
- </table>
5589
5589
 
5590
5590
  </div>
5591
5591
  </div>