@ulu/frontend 0.1.0-beta.39 → 0.1.0-beta.40

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 (165) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/ulu-frontend.min.css +1 -1
  3. package/dist/ulu-frontend.min.js +14 -14
  4. package/docs-dev/changelog/index.html +107 -9
  5. package/docs-dev/demos/accordion/index.html +60 -0
  6. package/docs-dev/demos/breakpoints-manager/index.html +60 -0
  7. package/docs-dev/demos/button/index.html +60 -0
  8. package/docs-dev/demos/button-verbose/index.html +60 -0
  9. package/docs-dev/demos/callout/index.html +60 -0
  10. package/docs-dev/demos/captioned-figure/index.html +60 -0
  11. package/docs-dev/demos/card/index.html +76 -16
  12. package/docs-dev/demos/card-grid/index.html +60 -0
  13. package/docs-dev/demos/counter-list/index.html +5224 -0
  14. package/docs-dev/demos/css-icons/index.html +60 -0
  15. package/docs-dev/demos/data-grid/index.html +60 -0
  16. package/docs-dev/demos/data-table/index.html +160 -100
  17. package/docs-dev/demos/details-group/index.html +60 -0
  18. package/docs-dev/demos/file-save/index.html +60 -0
  19. package/docs-dev/demos/flipcard/index.html +60 -0
  20. package/docs-dev/demos/form-theme/index.html +60 -0
  21. package/docs-dev/demos/index.html +60 -0
  22. package/docs-dev/demos/list-inline/index.html +60 -0
  23. package/docs-dev/demos/list-lines/index.html +60 -0
  24. package/docs-dev/demos/menu-stack/index.html +60 -0
  25. package/docs-dev/demos/modals/index.html +68 -0
  26. package/docs-dev/demos/nav-strip/index.html +60 -0
  27. package/docs-dev/demos/overlay-section/index.html +60 -0
  28. package/docs-dev/demos/popovers/index.html +60 -0
  29. package/docs-dev/demos/print/index.html +60 -0
  30. package/docs-dev/demos/pull-quote/index.html +60 -0
  31. package/docs-dev/demos/rule/index.html +60 -0
  32. package/docs-dev/demos/scrollpoints/index.html +60 -0
  33. package/docs-dev/demos/spoke-spinner/index.html +60 -0
  34. package/docs-dev/demos/sticky-list/index.html +60 -0
  35. package/docs-dev/demos/tabs/index.html +60 -0
  36. package/docs-dev/demos/tag/index.html +60 -0
  37. package/docs-dev/demos/theme-toggle/index.html +60 -0
  38. package/docs-dev/demos/tiles/index.html +60 -0
  39. package/docs-dev/demos/tooltip/index.html +60 -0
  40. package/docs-dev/guide/building-stylesheet/index.html +60 -0
  41. package/docs-dev/guide/developing-ulu-scss-module/index.html +60 -0
  42. package/docs-dev/guide/index.html +60 -0
  43. package/docs-dev/index.html +60 -0
  44. package/docs-dev/javascript/events/index.html +60 -0
  45. package/docs-dev/javascript/index.html +60 -0
  46. package/docs-dev/javascript/settings/index.html +60 -0
  47. package/docs-dev/javascript/ui-breakpoints/index.html +60 -0
  48. package/docs-dev/javascript/ui-collapsible/index.html +60 -0
  49. package/docs-dev/javascript/ui-details-group/index.html +60 -0
  50. package/docs-dev/javascript/ui-dialog/index.html +60 -0
  51. package/docs-dev/javascript/ui-flipcard/index.html +60 -0
  52. package/docs-dev/javascript/ui-grid/index.html +60 -0
  53. package/docs-dev/javascript/ui-modal-builder/index.html +60 -0
  54. package/docs-dev/javascript/ui-overflow-scroller/index.html +60 -0
  55. package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +60 -0
  56. package/docs-dev/javascript/ui-page/index.html +60 -0
  57. package/docs-dev/javascript/ui-popover/index.html +60 -0
  58. package/docs-dev/javascript/ui-print/index.html +60 -0
  59. package/docs-dev/javascript/ui-print-details/index.html +60 -0
  60. package/docs-dev/javascript/ui-programmatic-modal/index.html +60 -0
  61. package/docs-dev/javascript/ui-proxy-click/index.html +60 -0
  62. package/docs-dev/javascript/ui-resizer/index.html +60 -0
  63. package/docs-dev/javascript/ui-scroll-slider/index.html +60 -0
  64. package/docs-dev/javascript/ui-scrollpoint/index.html +60 -0
  65. package/docs-dev/javascript/ui-slider/index.html +60 -0
  66. package/docs-dev/javascript/ui-tabs/index.html +60 -0
  67. package/docs-dev/javascript/ui-theme-toggle/index.html +60 -0
  68. package/docs-dev/javascript/ui-tooltip/index.html +60 -0
  69. package/docs-dev/javascript/utils-class-logger/index.html +60 -0
  70. package/docs-dev/javascript/utils-css/index.html +60 -0
  71. package/docs-dev/javascript/utils-dom/index.html +105 -8
  72. package/docs-dev/javascript/utils-file-save/index.html +60 -0
  73. package/docs-dev/javascript/utils-floating-ui/index.html +60 -0
  74. package/docs-dev/javascript/utils-id/index.html +60 -0
  75. package/docs-dev/javascript/utils-pause-youtube-video/index.html +60 -0
  76. package/docs-dev/javascript/utils-system/index.html +60 -0
  77. package/docs-dev/sass/base/color/index.html +60 -0
  78. package/docs-dev/sass/base/elements/index.html +130 -70
  79. package/docs-dev/sass/base/index/index.html +116 -56
  80. package/docs-dev/sass/base/index.html +60 -0
  81. package/docs-dev/sass/base/keyframes/index.html +60 -0
  82. package/docs-dev/sass/base/layout/index.html +123 -63
  83. package/docs-dev/sass/base/normalize/index.html +60 -0
  84. package/docs-dev/sass/base/print/index.html +60 -0
  85. package/docs-dev/sass/base/root/index.html +60 -0
  86. package/docs-dev/sass/base/typography/index.html +60 -0
  87. package/docs-dev/sass/components/accordion/index.html +178 -118
  88. package/docs-dev/sass/components/adaptive-spacing/index.html +184 -124
  89. package/docs-dev/sass/components/badge/index.html +156 -96
  90. package/docs-dev/sass/components/basic-hero/index.html +122 -62
  91. package/docs-dev/sass/components/button/index.html +109 -49
  92. package/docs-dev/sass/components/button-verbose/index.html +188 -128
  93. package/docs-dev/sass/components/callout/index.html +223 -163
  94. package/docs-dev/sass/components/captioned-figure/index.html +174 -114
  95. package/docs-dev/sass/components/card/index.html +228 -168
  96. package/docs-dev/sass/components/card-grid/index.html +130 -70
  97. package/docs-dev/sass/components/counter-list/index.html +5458 -0
  98. package/docs-dev/sass/components/css-icon/index.html +200 -140
  99. package/docs-dev/sass/components/data-grid/index.html +227 -167
  100. package/docs-dev/sass/components/data-table/index.html +174 -114
  101. package/docs-dev/sass/components/fill-context/index.html +60 -0
  102. package/docs-dev/sass/components/flipcard/index.html +222 -162
  103. package/docs-dev/sass/components/flipcard-grid/index.html +117 -57
  104. package/docs-dev/sass/components/form-theme/index.html +497 -437
  105. package/docs-dev/sass/components/hero/index.html +167 -107
  106. package/docs-dev/sass/components/horizontal-rule/index.html +116 -56
  107. package/docs-dev/sass/components/image-grid/index.html +123 -63
  108. package/docs-dev/sass/components/index/index.html +161 -100
  109. package/docs-dev/sass/components/index.html +60 -0
  110. package/docs-dev/sass/components/links/index.html +60 -0
  111. package/docs-dev/sass/components/list-inline/index.html +137 -77
  112. package/docs-dev/sass/components/list-lines/index.html +158 -98
  113. package/docs-dev/sass/components/list-ordered/index.html +60 -0
  114. package/docs-dev/sass/components/list-unordered/index.html +60 -0
  115. package/docs-dev/sass/components/menu-stack/index.html +179 -119
  116. package/docs-dev/sass/components/modal/index.html +174 -114
  117. package/docs-dev/sass/components/nav-strip/index.html +174 -114
  118. package/docs-dev/sass/components/overlay-section/index.html +161 -101
  119. package/docs-dev/sass/components/pager/index.html +174 -114
  120. package/docs-dev/sass/components/placeholder-block/index.html +174 -114
  121. package/docs-dev/sass/components/popover/index.html +174 -114
  122. package/docs-dev/sass/components/pull-quote/index.html +174 -114
  123. package/docs-dev/sass/components/ratio-box/index.html +120 -60
  124. package/docs-dev/sass/components/rule/index.html +123 -63
  125. package/docs-dev/sass/components/scroll-slider/index.html +174 -114
  126. package/docs-dev/sass/components/skip-link/index.html +94 -34
  127. package/docs-dev/sass/components/slider/index.html +174 -114
  128. package/docs-dev/sass/components/spoke-spinner/index.html +116 -56
  129. package/docs-dev/sass/components/sticky-list/index.html +206 -146
  130. package/docs-dev/sass/components/tabs/index.html +174 -114
  131. package/docs-dev/sass/components/tag/index.html +221 -161
  132. package/docs-dev/sass/components/tile-button/index.html +161 -101
  133. package/docs-dev/sass/components/tile-grid/index.html +202 -142
  134. package/docs-dev/sass/components/tile-grid-overlay/index.html +97 -37
  135. package/docs-dev/sass/components/vignette/index.html +116 -56
  136. package/docs-dev/sass/components/wysiwyg/index.html +125 -65
  137. package/docs-dev/sass/core/breakpoint/index.html +160 -100
  138. package/docs-dev/sass/core/button/index.html +526 -466
  139. package/docs-dev/sass/core/color/index.html +217 -157
  140. package/docs-dev/sass/core/cssvar/index.html +109 -49
  141. package/docs-dev/sass/core/element/index.html +495 -435
  142. package/docs-dev/sass/core/index.html +60 -0
  143. package/docs-dev/sass/core/layout/index.html +167 -107
  144. package/docs-dev/sass/core/path/index.html +92 -32
  145. package/docs-dev/sass/core/selector/index.html +109 -49
  146. package/docs-dev/sass/core/typography/index.html +344 -284
  147. package/docs-dev/sass/core/units/index.html +141 -81
  148. package/docs-dev/sass/core/utils/index.html +130 -70
  149. package/docs-dev/sass/helpers/color/index.html +60 -0
  150. package/docs-dev/sass/helpers/display/index.html +60 -0
  151. package/docs-dev/sass/helpers/index/index.html +113 -53
  152. package/docs-dev/sass/helpers/index.html +60 -0
  153. package/docs-dev/sass/helpers/typography/index.html +60 -0
  154. package/docs-dev/sass/helpers/units/index.html +107 -47
  155. package/docs-dev/sass/helpers/utilities/index.html +60 -0
  156. package/docs-dev/sass/index.html +60 -0
  157. package/js/ui/dialog.js +28 -3
  158. package/js/utils/dom.js +14 -3
  159. package/package.json +2 -2
  160. package/scss/components/_counter-list.scss +133 -0
  161. package/scss/components/_index.scss +6 -0
  162. package/types/ui/dialog.d.ts +1 -0
  163. package/types/ui/dialog.d.ts.map +1 -1
  164. package/types/utils/dom.d.ts +11 -3
  165. package/types/utils/dom.d.ts.map +1 -1
package/docs-dev/sass/components/data-grid/index.html CHANGED
@@ -286,6 +286,21 @@
286
286
  </li>
287
287
 
288
288
 
289
+ <li class="nav-tree__item ">
290
+
291
+ <a class="nav-tree__link " href="/frontend/demos/counter-list/">
292
+
293
+
294
+ <span class="nav-tree__text">
295
+ Counter List
296
+ </span>
297
+
298
+ </a>
299
+
300
+
301
+ </li>
302
+
303
+
289
304
  <li class="nav-tree__item ">
290
305
 
291
306
  <a class="nav-tree__link " href="/frontend/demos/css-icons/">
@@ -1335,6 +1350,21 @@
1335
1350
  </li>
1336
1351
 
1337
1352
 
1353
+ <li class="nav-tree__item ">
1354
+
1355
+ <a class="nav-tree__link " href="/frontend/sass/components/counter-list/">
1356
+
1357
+
1358
+ <span class="nav-tree__text">
1359
+ Counter-list
1360
+ </span>
1361
+
1362
+ </a>
1363
+
1364
+
1365
+ </li>
1366
+
1367
+
1338
1368
  <li class="nav-tree__item ">
1339
1369
 
1340
1370
  <a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
@@ -2802,6 +2832,21 @@
2802
2832
  </li>
2803
2833
 
2804
2834
 
2835
+ <li class="nav-tree__item ">
2836
+
2837
+ <a class="nav-tree__link " href="/frontend/demos/counter-list/">
2838
+
2839
+
2840
+ <span class="nav-tree__text">
2841
+ Counter List
2842
+ </span>
2843
+
2844
+ </a>
2845
+
2846
+
2847
+ </li>
2848
+
2849
+
2805
2850
  <li class="nav-tree__item ">
2806
2851
 
2807
2852
  <a class="nav-tree__link " href="/frontend/demos/css-icons/">
@@ -3851,6 +3896,21 @@
3851
3896
  </li>
3852
3897
 
3853
3898
 
3899
+ <li class="nav-tree__item ">
3900
+
3901
+ <a class="nav-tree__link " href="/frontend/sass/components/counter-list/">
3902
+
3903
+
3904
+ <span class="nav-tree__text">
3905
+ Counter-list
3906
+ </span>
3907
+
3908
+ </a>
3909
+
3910
+
3911
+ </li>
3912
+
3913
+
3854
3914
  <li class="nav-tree__item ">
3855
3915
 
3856
3916
  <a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
@@ -5106,15 +5166,6 @@
5106
5166
  <div class="toc">
5107
5167
  <ol>
5108
5168
 
5109
- <li><a href="#variables">Variables</a>
5110
-
5111
- <ol>
5112
-
5113
- <li><a href="#variable-config">$config</a>
5114
- </li>
5115
- </ol>
5116
- </li>
5117
-
5118
5169
  <li><a href="#mixins">Mixins</a>
5119
5170
 
5120
5171
  <ol>
@@ -5142,6 +5193,15 @@
5142
5193
 
5143
5194
  <li><a href="#function-get-default-breakpoint">get-default-breakpoint()</a>
5144
5195
  </li>
5196
+ </ol>
5197
+ </li>
5198
+
5199
+ <li><a href="#variables">Variables</a>
5200
+
5201
+ <ol>
5202
+
5203
+ <li><a href="#variable-config">$config</a>
5204
+ </li>
5145
5205
  </ol>
5146
5206
  </li>
5147
5207
  </ol>
@@ -5159,163 +5219,6 @@
5159
5219
  <div class="type-large">
5160
5220
  <p>A page grid layout component that uses data attribute instead of class names, for brevity and readability</p>
5161
5221
  </div>
5162
- <h2 id="variables" tabindex="-1">Variables</h2>
5163
- <div class="sassdoc-item-header">
5164
- <h3 id="variable-config" tabindex="-1">$config</h3>
5165
- <div class="sassdoc-item-header__labels">
5166
- <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
5167
- </div>
5168
- </div>
5169
- <p>Module Settings</p>
5170
- <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>
5171
- <span class="pjs-token pjs-string">"attribute"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"data-grid"</span><span class="pjs-token pjs-punctuation">,</span>
5172
- <span class="pjs-token pjs-string">"attribute-container"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"data-grid-container"</span><span class="pjs-token pjs-punctuation">,</span>
5173
- <span class="pjs-token pjs-string">"attribute-init"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"data-grid-init"</span><span class="pjs-token pjs-punctuation">,</span>
5174
- <span class="pjs-token pjs-string">"breakpoint"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-comment">// Fallback to default</span>
5175
- <span class="pjs-token pjs-string">"columns"</span><span class="pjs-token pjs-punctuation">:</span> 12<span class="pjs-token pjs-punctuation">,</span>
5176
- <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span> 14px<span class="pjs-token pjs-punctuation">,</span>
5177
- <span class="pjs-token pjs-string">"position-class-column-first"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"position-column-first"</span><span class="pjs-token pjs-punctuation">,</span>
5178
- <span class="pjs-token pjs-string">"position-class-column-last"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"position-column-last"</span><span class="pjs-token pjs-punctuation">,</span>
5179
- <span class="pjs-token pjs-string">"position-class-row-first"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"position-row-first"</span><span class="pjs-token pjs-punctuation">,</span>
5180
- <span class="pjs-token pjs-string">"position-class-row-last"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"position-row-last"</span><span class="pjs-token pjs-punctuation">,</span>
5181
- <span class="pjs-token pjs-string">"sticky-bottom"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">var</span><span class="pjs-token pjs-punctuation">(</span>--ulu-sticky-bottom-offset<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5182
- <span class="pjs-token pjs-string">"sticky-top"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">var</span><span class="pjs-token pjs-punctuation">(</span>--ulu-sticky-top-offset<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5183
- <span class="pjs-token pjs-string">"rule-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule"</span><span class="pjs-token pjs-punctuation">,</span>
5184
- <span class="pjs-token pjs-string">"rule-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
5185
- <span class="pjs-token pjs-string">"rule-fade-duration"</span> <span class="pjs-token pjs-punctuation">:</span> 400ms<span class="pjs-token pjs-punctuation">,</span>
5186
- <span class="pjs-token pjs-string">"extra-breakpoints"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5187
- <span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5188
- <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>
5189
- <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span> 15px
5190
- <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5191
- <span class="pjs-token pjs-string">"large"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5192
- <span class="pjs-token pjs-string">"breakpoint"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"large"</span><span class="pjs-token pjs-punctuation">,</span>
5193
- <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span> 20px
5194
- <span class="pjs-token pjs-punctuation">)</span>
5195
- <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5196
- <span class="pjs-token pjs-string">"extra-gutter-scales"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5197
- <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">:</span> 0.6
5198
- <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5199
- <span class="pjs-token pjs-string">"extra-rule-styles"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5200
- <span class="pjs-token pjs-string">"light"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5201
- <span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
5202
- <span class="pjs-token pjs-string">"color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule-light"</span>
5203
- <span class="pjs-token pjs-punctuation">)</span>
5204
- <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5205
- <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
5206
- <details>
5207
- <summary>File Information</summary>
5208
- <ul>
5209
- <li><strong>File:</strong> _data-grid.scss</li>
5210
- <li><strong>Group:</strong> data-grid</li>
5211
- <li><strong>Type:</strong> variable</li>
5212
- <li><strong>Lines (comments):</strong> 20-36</li>
5213
- <li><strong>Lines (code):</strong> 38-73</li>
5214
- </ul>
5215
- </details>
5216
- <h4 id="map-properties" tabindex="-1">Map Properties</h4>
5217
- <table>
5218
- <thead>
5219
- <tr>
5220
- <th style="text-align:left">Name</th>
5221
- <th style="text-align:left">Type</th>
5222
- <th style="text-align:left">Default</th>
5223
- <th style="text-align:left">Description</th>
5224
- </tr>
5225
- </thead>
5226
- <tbody>
5227
- <tr>
5228
- <td style="text-align:left">attribute</td>
5229
- <td style="text-align:left">String</td>
5230
- <td style="text-align:left">data-grid</td>
5231
- <td style="text-align:left">Default attribute to use for grid mixin.</td>
5232
- </tr>
5233
- <tr>
5234
- <td style="text-align:left">attribute-container</td>
5235
- <td style="text-align:left">String</td>
5236
- <td style="text-align:left">data-grid-container</td>
5237
- <td style="text-align:left">Default attribute to use for grid's container.</td>
5238
- </tr>
5239
- <tr>
5240
- <td style="text-align:left">columns</td>
5241
- <td style="text-align:left">Number</td>
5242
- <td style="text-align:left">12</td>
5243
- <td style="text-align:left">Default for grid mixin.</td>
5244
- </tr>
5245
- <tr>
5246
- <td style="text-align:left">gutter</td>
5247
- <td style="text-align:left">Number</td>
5248
- <td style="text-align:left">14px</td>
5249
- <td style="text-align:left">Default gutter for grid mixin.</td>
5250
- </tr>
5251
- <tr>
5252
- <td style="text-align:left">position-class-column-first</td>
5253
- <td style="text-align:left">String</td>
5254
- <td style="text-align:left">position-column-first</td>
5255
- <td style="text-align:left">Classname for position system (JS) grid uses to display rules (layout can flow, script will update classes)</td>
5256
- </tr>
5257
- <tr>
5258
- <td style="text-align:left">position-class-column-last</td>
5259
- <td style="text-align:left">String</td>
5260
- <td style="text-align:left">position-column-last</td>
5261
- <td style="text-align:left">See definition above</td>
5262
- </tr>
5263
- <tr>
5264
- <td style="text-align:left">position-class-row-first</td>
5265
- <td style="text-align:left">String</td>
5266
- <td style="text-align:left">position-row-first</td>
5267
- <td style="text-align:left">See definition above</td>
5268
- </tr>
5269
- <tr>
5270
- <td style="text-align:left">position-class-row-last</td>
5271
- <td style="text-align:left">String</td>
5272
- <td style="text-align:left">position-row-last</td>
5273
- <td style="text-align:left">See definition above</td>
5274
- </tr>
5275
- <tr>
5276
- <td style="text-align:left">sticky-bottom</td>
5277
- <td style="text-align:left">Dimension</td>
5278
- <td style="text-align:left">var(--ulu-sticky-bottom-offset, 0)</td>
5279
- <td style="text-align:left">When a column is sticky bottom this is the value for the sticky offset, set to --ulu-sticky-bottom-offset by default</td>
5280
- </tr>
5281
- <tr>
5282
- <td style="text-align:left">sticky-top</td>
5283
- <td style="text-align:left">Dimension</td>
5284
- <td style="text-align:left">var(--ulu-sticky-top-offset, 0)</td>
5285
- <td style="text-align:left">When a column is sticky top this is the value for the sticky offset, set to --ulu-sticky-top-offset by default</td>
5286
- </tr>
5287
- <tr>
5288
- <td style="text-align:left">rule-color</td>
5289
- <td style="text-align:left">String</td>
5290
- <td style="text-align:left">&quot;rule&quot;</td>
5291
- <td style="text-align:left">The color of the rule. This uses color.scss, so the value of this option should be a color variable from color.scss.</td>
5292
- </tr>
5293
- <tr>
5294
- <td style="text-align:left">rule-size</td>
5295
- <td style="text-align:left">Dimension</td>
5296
- <td style="text-align:left">1px</td>
5297
- <td style="text-align:left">The width of the rule</td>
5298
- </tr>
5299
- <tr>
5300
- <td style="text-align:left">extra-breakpoints</td>
5301
- <td style="text-align:left">Map</td>
5302
- <td style="text-align:left">Map</td>
5303
- <td style="text-align:left">Default extra breakpoints for grid mixin</td>
5304
- </tr>
5305
- <tr>
5306
- <td style="text-align:left">extra-gutter-scales</td>
5307
- <td style="text-align:left">Map</td>
5308
- <td style="text-align:left">Map</td>
5309
- <td style="text-align:left">Extra options for gutter scales.</td>
5310
- </tr>
5311
- <tr>
5312
- <td style="text-align:left">extra-rule-styles</td>
5313
- <td style="text-align:left">Map</td>
5314
- <td style="text-align:left">Map</td>
5315
- <td style="text-align:left">Extra options for rule styles.</td>
5316
- </tr>
5317
- </tbody>
5318
- </table>
5319
5222
  <h2 id="mixins" tabindex="-1">Mixins</h2>
5320
5223
  <div class="sassdoc-item-header">
5321
5224
  <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5376,7 +5279,7 @@
5376
5279
  </details>
5377
5280
  <div class="callout callout--demo crop-margins">
5378
5281
  <h4 id="demo" tabindex="-1">Demo</h4>
5379
- <p><a class="button" href="/frontend/demos/data-grid#align">Our Demo</a></p>
5282
+ <p><a class="button" href="/frontend/demos/data-grid#align">View</a></p>
5380
5283
  </div>
5381
5284
  <h4 id="examples-1" tabindex="-1">Examples</h4>
5382
5285
  <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-data-grid-styles</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
@@ -5555,6 +5458,163 @@
5555
5458
  <ul>
5556
5459
  <li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
5557
5460
  </ul>
5461
+ <h2 id="variables" tabindex="-1">Variables</h2>
5462
+ <div class="sassdoc-item-header">
5463
+ <h3 id="variable-config" tabindex="-1">$config</h3>
5464
+ <div class="sassdoc-item-header__labels">
5465
+ <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
5466
+ </div>
5467
+ </div>
5468
+ <p>Module Settings</p>
5469
+ <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>
5470
+ <span class="pjs-token pjs-string">"attribute"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"data-grid"</span><span class="pjs-token pjs-punctuation">,</span>
5471
+ <span class="pjs-token pjs-string">"attribute-container"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"data-grid-container"</span><span class="pjs-token pjs-punctuation">,</span>
5472
+ <span class="pjs-token pjs-string">"attribute-init"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"data-grid-init"</span><span class="pjs-token pjs-punctuation">,</span>
5473
+ <span class="pjs-token pjs-string">"breakpoint"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-comment">// Fallback to default</span>
5474
+ <span class="pjs-token pjs-string">"columns"</span><span class="pjs-token pjs-punctuation">:</span> 12<span class="pjs-token pjs-punctuation">,</span>
5475
+ <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span> 14px<span class="pjs-token pjs-punctuation">,</span>
5476
+ <span class="pjs-token pjs-string">"position-class-column-first"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"position-column-first"</span><span class="pjs-token pjs-punctuation">,</span>
5477
+ <span class="pjs-token pjs-string">"position-class-column-last"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"position-column-last"</span><span class="pjs-token pjs-punctuation">,</span>
5478
+ <span class="pjs-token pjs-string">"position-class-row-first"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"position-row-first"</span><span class="pjs-token pjs-punctuation">,</span>
5479
+ <span class="pjs-token pjs-string">"position-class-row-last"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"position-row-last"</span><span class="pjs-token pjs-punctuation">,</span>
5480
+ <span class="pjs-token pjs-string">"sticky-bottom"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">var</span><span class="pjs-token pjs-punctuation">(</span>--ulu-sticky-bottom-offset<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5481
+ <span class="pjs-token pjs-string">"sticky-top"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">var</span><span class="pjs-token pjs-punctuation">(</span>--ulu-sticky-top-offset<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5482
+ <span class="pjs-token pjs-string">"rule-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule"</span><span class="pjs-token pjs-punctuation">,</span>
5483
+ <span class="pjs-token pjs-string">"rule-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
5484
+ <span class="pjs-token pjs-string">"rule-fade-duration"</span> <span class="pjs-token pjs-punctuation">:</span> 400ms<span class="pjs-token pjs-punctuation">,</span>
5485
+ <span class="pjs-token pjs-string">"extra-breakpoints"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5486
+ <span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5487
+ <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>
5488
+ <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span> 15px
5489
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5490
+ <span class="pjs-token pjs-string">"large"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5491
+ <span class="pjs-token pjs-string">"breakpoint"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"large"</span><span class="pjs-token pjs-punctuation">,</span>
5492
+ <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span> 20px
5493
+ <span class="pjs-token pjs-punctuation">)</span>
5494
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5495
+ <span class="pjs-token pjs-string">"extra-gutter-scales"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5496
+ <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">:</span> 0.6
5497
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5498
+ <span class="pjs-token pjs-string">"extra-rule-styles"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5499
+ <span class="pjs-token pjs-string">"light"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5500
+ <span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
5501
+ <span class="pjs-token pjs-string">"color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule-light"</span>
5502
+ <span class="pjs-token pjs-punctuation">)</span>
5503
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5504
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
5505
+ <details>
5506
+ <summary>File Information</summary>
5507
+ <ul>
5508
+ <li><strong>File:</strong> _data-grid.scss</li>
5509
+ <li><strong>Group:</strong> data-grid</li>
5510
+ <li><strong>Type:</strong> variable</li>
5511
+ <li><strong>Lines (comments):</strong> 20-36</li>
5512
+ <li><strong>Lines (code):</strong> 38-73</li>
5513
+ </ul>
5514
+ </details>
5515
+ <h4 id="map-properties" tabindex="-1">Map Properties</h4>
5516
+ <table>
5517
+ <thead>
5518
+ <tr>
5519
+ <th style="text-align:left">Name</th>
5520
+ <th style="text-align:left">Type</th>
5521
+ <th style="text-align:left">Default</th>
5522
+ <th style="text-align:left">Description</th>
5523
+ </tr>
5524
+ </thead>
5525
+ <tbody>
5526
+ <tr>
5527
+ <td style="text-align:left">attribute</td>
5528
+ <td style="text-align:left">String</td>
5529
+ <td style="text-align:left">data-grid</td>
5530
+ <td style="text-align:left">Default attribute to use for grid mixin.</td>
5531
+ </tr>
5532
+ <tr>
5533
+ <td style="text-align:left">attribute-container</td>
5534
+ <td style="text-align:left">String</td>
5535
+ <td style="text-align:left">data-grid-container</td>
5536
+ <td style="text-align:left">Default attribute to use for grid's container.</td>
5537
+ </tr>
5538
+ <tr>
5539
+ <td style="text-align:left">columns</td>
5540
+ <td style="text-align:left">Number</td>
5541
+ <td style="text-align:left">12</td>
5542
+ <td style="text-align:left">Default for grid mixin.</td>
5543
+ </tr>
5544
+ <tr>
5545
+ <td style="text-align:left">gutter</td>
5546
+ <td style="text-align:left">Number</td>
5547
+ <td style="text-align:left">14px</td>
5548
+ <td style="text-align:left">Default gutter for grid mixin.</td>
5549
+ </tr>
5550
+ <tr>
5551
+ <td style="text-align:left">position-class-column-first</td>
5552
+ <td style="text-align:left">String</td>
5553
+ <td style="text-align:left">position-column-first</td>
5554
+ <td style="text-align:left">Classname for position system (JS) grid uses to display rules (layout can flow, script will update classes)</td>
5555
+ </tr>
5556
+ <tr>
5557
+ <td style="text-align:left">position-class-column-last</td>
5558
+ <td style="text-align:left">String</td>
5559
+ <td style="text-align:left">position-column-last</td>
5560
+ <td style="text-align:left">See definition above</td>
5561
+ </tr>
5562
+ <tr>
5563
+ <td style="text-align:left">position-class-row-first</td>
5564
+ <td style="text-align:left">String</td>
5565
+ <td style="text-align:left">position-row-first</td>
5566
+ <td style="text-align:left">See definition above</td>
5567
+ </tr>
5568
+ <tr>
5569
+ <td style="text-align:left">position-class-row-last</td>
5570
+ <td style="text-align:left">String</td>
5571
+ <td style="text-align:left">position-row-last</td>
5572
+ <td style="text-align:left">See definition above</td>
5573
+ </tr>
5574
+ <tr>
5575
+ <td style="text-align:left">sticky-bottom</td>
5576
+ <td style="text-align:left">Dimension</td>
5577
+ <td style="text-align:left">var(--ulu-sticky-bottom-offset, 0)</td>
5578
+ <td style="text-align:left">When a column is sticky bottom this is the value for the sticky offset, set to --ulu-sticky-bottom-offset by default</td>
5579
+ </tr>
5580
+ <tr>
5581
+ <td style="text-align:left">sticky-top</td>
5582
+ <td style="text-align:left">Dimension</td>
5583
+ <td style="text-align:left">var(--ulu-sticky-top-offset, 0)</td>
5584
+ <td style="text-align:left">When a column is sticky top this is the value for the sticky offset, set to --ulu-sticky-top-offset by default</td>
5585
+ </tr>
5586
+ <tr>
5587
+ <td style="text-align:left">rule-color</td>
5588
+ <td style="text-align:left">String</td>
5589
+ <td style="text-align:left">&quot;rule&quot;</td>
5590
+ <td style="text-align:left">The color of the rule. This uses color.scss, so the value of this option should be a color variable from color.scss.</td>
5591
+ </tr>
5592
+ <tr>
5593
+ <td style="text-align:left">rule-size</td>
5594
+ <td style="text-align:left">Dimension</td>
5595
+ <td style="text-align:left">1px</td>
5596
+ <td style="text-align:left">The width of the rule</td>
5597
+ </tr>
5598
+ <tr>
5599
+ <td style="text-align:left">extra-breakpoints</td>
5600
+ <td style="text-align:left">Map</td>
5601
+ <td style="text-align:left">Map</td>
5602
+ <td style="text-align:left">Default extra breakpoints for grid mixin</td>
5603
+ </tr>
5604
+ <tr>
5605
+ <td style="text-align:left">extra-gutter-scales</td>
5606
+ <td style="text-align:left">Map</td>
5607
+ <td style="text-align:left">Map</td>
5608
+ <td style="text-align:left">Extra options for gutter scales.</td>
5609
+ </tr>
5610
+ <tr>
5611
+ <td style="text-align:left">extra-rule-styles</td>
5612
+ <td style="text-align:left">Map</td>
5613
+ <td style="text-align:left">Map</td>
5614
+ <td style="text-align:left">Extra options for rule styles.</td>
5615
+ </tr>
5616
+ </tbody>
5617
+ </table>
5558
5618
 
5559
5619
  </div>
5560
5620
  </div>