@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-sizes">$sizes</a>
5177
+ </li>
5178
+ </ol>
5179
+ </li>
5180
+
5169
5181
  <li><a href="#mixins">Mixins</a>
5170
5182
 
5171
5183
  <ol>
@@ -5214,18 +5226,6 @@
5214
5226
 
5215
5227
  <li><a href="#function-exists">exists()</a>
5216
5228
  </li>
5217
- </ol>
5218
- </li>
5219
-
5220
- <li><a href="#variables">Variables</a>
5221
-
5222
- <ol>
5223
-
5224
- <li><a href="#variable-config">$config</a>
5225
- </li>
5226
-
5227
- <li><a href="#variable-sizes">$sizes</a>
5228
- </li>
5229
5229
  </ol>
5230
5230
  </li>
5231
5231
  </ol>
@@ -5243,6 +5243,94 @@
5243
5243
  <div class="type-large">
5244
5244
  <p>Utilities for working with breakpoints</p>
5245
5245
  </div>
5246
+ <h2 id="variables" tabindex="-1">Variables</h2>
5247
+ <div class="sassdoc-item-header">
5248
+ <h3 id="variable-config" tabindex="-1">$config</h3>
5249
+ <div class="sassdoc-item-header__labels">
5250
+ <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
5251
+ </div>
5252
+ </div>
5253
+ <p>Module Settings</p>
5254
+ <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>
5255
+ <span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">:</span> 16px<span class="pjs-token pjs-punctuation">,</span>
5256
+ <span class="pjs-token pjs-string">"default"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">,</span>
5257
+ <span class="pjs-token pjs-string">"gap"</span><span class="pjs-token pjs-punctuation">:</span> 0.01em<span class="pjs-token pjs-punctuation">,</span>
5258
+ <span class="pjs-token pjs-string">"null-name"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"none"</span><span class="pjs-token pjs-punctuation">,</span>
5259
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
5260
+ <details>
5261
+ <summary>File Information</summary>
5262
+ <ul>
5263
+ <li><strong>File:</strong> _breakpoint.scss</li>
5264
+ <li><strong>Group:</strong> breakpoint</li>
5265
+ <li><strong>Type:</strong> variable</li>
5266
+ <li><strong>Lines (comments):</strong> 10-15</li>
5267
+ <li><strong>Lines (code):</strong> 17-22</li>
5268
+ </ul>
5269
+ </details>
5270
+ <h4 id="map-properties" tabindex="-1">Map Properties</h4>
5271
+ <table>
5272
+ <thead>
5273
+ <tr>
5274
+ <th style="text-align:left">Name</th>
5275
+ <th style="text-align:left">Type</th>
5276
+ <th style="text-align:left">Default</th>
5277
+ <th style="text-align:left">Description</th>
5278
+ </tr>
5279
+ </thead>
5280
+ <tbody>
5281
+ <tr>
5282
+ <td style="text-align:left">base</td>
5283
+ <td style="text-align:left">Number</td>
5284
+ <td style="text-align:left">16px</td>
5285
+ <td style="text-align:left">Assumed pixel base, can change based on users font settings so this is just to get us in the ballpark. Note this is not the base font size but the user agent's or user's browser preference. This number is just being used for calculating estimated em sizes from average base. Since pixels are easier to understand but since we allow the user to set their font size. All of our css is relative to that, including most of the layout (rems, other relative units)</td>
5286
+ </tr>
5287
+ <tr>
5288
+ <td style="text-align:left">gap</td>
5289
+ <td style="text-align:left">Number</td>
5290
+ <td style="text-align:left">0.01em</td>
5291
+ <td style="text-align:left">The amount to offset min from max media queries incase you are using both (prevent overlap)</td>
5292
+ </tr>
5293
+ <tr>
5294
+ <td style="text-align:left">null-name</td>
5295
+ <td style="text-align:left">String</td>
5296
+ <td style="text-align:left">&quot;none&quot;</td>
5297
+ <td style="text-align:left">The name of the space from 0 to the first breakpoint (doesn't really matter) used when passing breakpoints to JS via content property (see breakpoint.embed-for-scripts() or cssvar.declare-breakpoint-sizes()) to pass breakpoints to JS. The js ui/breakpoints.js module provides methods for interacting with breakpoints in JS.</td>
5298
+ </tr>
5299
+ <tr>
5300
+ <td style="text-align:left">default</td>
5301
+ <td style="text-align:left">String</td>
5302
+ <td style="text-align:left">&quot;small&quot;</td>
5303
+ <td style="text-align:left">The name of the breakpoint that is considered the major change (ie desktop to mobile) used by other modules/components</td>
5304
+ </tr>
5305
+ </tbody>
5306
+ </table>
5307
+ <div class="sassdoc-item-header">
5308
+ <h3 id="variable-sizes" tabindex="-1">$sizes</h3>
5309
+ <div class="sassdoc-item-header__labels">
5310
+ <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
5311
+ </div>
5312
+ </div>
5313
+ <p>The default breakpoint sizes</p>
5314
+ <ul>
5315
+ <li>Map of breakpoints</li>
5316
+ <li>Each property is the breakpoints name</li>
5317
+ <li>Each value is that breakpoints point (set in em by default)</li>
5318
+ </ul>
5319
+ <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5320
+ <span class="pjs-token pjs-string">"small"</span> <span class="pjs-token pjs-punctuation">:</span> utils.<span class="pjs-token pjs-function">pixel-to-em</span><span class="pjs-token pjs-punctuation">(</span>680px<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5321
+ <span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> utils.<span class="pjs-token pjs-function">pixel-to-em</span><span class="pjs-token pjs-punctuation">(</span>1200px<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5322
+ <span class="pjs-token pjs-string">"large"</span> <span class="pjs-token pjs-punctuation">:</span> utils.<span class="pjs-token pjs-function">pixel-to-em</span><span class="pjs-token pjs-punctuation">(</span>1500px<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span>
5323
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
5324
+ <details>
5325
+ <summary>File Information</summary>
5326
+ <ul>
5327
+ <li><strong>File:</strong> _breakpoint.scss</li>
5328
+ <li><strong>Group:</strong> breakpoint</li>
5329
+ <li><strong>Type:</strong> variable</li>
5330
+ <li><strong>Lines (comments):</strong> 47-51</li>
5331
+ <li><strong>Lines (code):</strong> 53-57</li>
5332
+ </ul>
5333
+ </details>
5246
5334
  <h2 id="mixins" tabindex="-1">Mixins</h2>
5247
5335
  <div class="sassdoc-item-header">
5248
5336
  <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5891,94 +5979,6 @@
5891
5979
  <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
5892
5980
  <li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
5893
5981
  </ul>
5894
- <h2 id="variables" tabindex="-1">Variables</h2>
5895
- <div class="sassdoc-item-header">
5896
- <h3 id="variable-config" tabindex="-1">$config</h3>
5897
- <div class="sassdoc-item-header__labels">
5898
- <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
5899
- </div>
5900
- </div>
5901
- <p>Module Settings</p>
5902
- <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>
5903
- <span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">:</span> 16px<span class="pjs-token pjs-punctuation">,</span>
5904
- <span class="pjs-token pjs-string">"default"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">,</span>
5905
- <span class="pjs-token pjs-string">"gap"</span><span class="pjs-token pjs-punctuation">:</span> 0.01em<span class="pjs-token pjs-punctuation">,</span>
5906
- <span class="pjs-token pjs-string">"null-name"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"none"</span><span class="pjs-token pjs-punctuation">,</span>
5907
- <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
5908
- <details>
5909
- <summary>File Information</summary>
5910
- <ul>
5911
- <li><strong>File:</strong> _breakpoint.scss</li>
5912
- <li><strong>Group:</strong> breakpoint</li>
5913
- <li><strong>Type:</strong> variable</li>
5914
- <li><strong>Lines (comments):</strong> 10-15</li>
5915
- <li><strong>Lines (code):</strong> 17-22</li>
5916
- </ul>
5917
- </details>
5918
- <h4 id="map-properties" tabindex="-1">Map Properties</h4>
5919
- <table>
5920
- <thead>
5921
- <tr>
5922
- <th style="text-align:left">Name</th>
5923
- <th style="text-align:left">Type</th>
5924
- <th style="text-align:left">Default</th>
5925
- <th style="text-align:left">Description</th>
5926
- </tr>
5927
- </thead>
5928
- <tbody>
5929
- <tr>
5930
- <td style="text-align:left">base</td>
5931
- <td style="text-align:left">Number</td>
5932
- <td style="text-align:left">16px</td>
5933
- <td style="text-align:left">Assumed pixel base, can change based on users font settings so this is just to get us in the ballpark. Note this is not the base font size but the user agent's or user's browser preference. This number is just being used for calculating estimated em sizes from average base. Since pixels are easier to understand but since we allow the user to set their font size. All of our css is relative to that, including most of the layout (rems, other relative units)</td>
5934
- </tr>
5935
- <tr>
5936
- <td style="text-align:left">gap</td>
5937
- <td style="text-align:left">Number</td>
5938
- <td style="text-align:left">0.01em</td>
5939
- <td style="text-align:left">The amount to offset min from max media queries incase you are using both (prevent overlap)</td>
5940
- </tr>
5941
- <tr>
5942
- <td style="text-align:left">null-name</td>
5943
- <td style="text-align:left">String</td>
5944
- <td style="text-align:left">&quot;none&quot;</td>
5945
- <td style="text-align:left">The name of the space from 0 to the first breakpoint (doesn't really matter) used when passing breakpoints to JS via content property (see breakpoint.embed-for-scripts() or cssvar.declare-breakpoint-sizes()) to pass breakpoints to JS. The js ui/breakpoints.js module provides methods for interacting with breakpoints in JS.</td>
5946
- </tr>
5947
- <tr>
5948
- <td style="text-align:left">default</td>
5949
- <td style="text-align:left">String</td>
5950
- <td style="text-align:left">&quot;small&quot;</td>
5951
- <td style="text-align:left">The name of the breakpoint that is considered the major change (ie desktop to mobile) used by other modules/components</td>
5952
- </tr>
5953
- </tbody>
5954
- </table>
5955
- <div class="sassdoc-item-header">
5956
- <h3 id="variable-sizes" tabindex="-1">$sizes</h3>
5957
- <div class="sassdoc-item-header__labels">
5958
- <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
5959
- </div>
5960
- </div>
5961
- <p>The default breakpoint sizes</p>
5962
- <ul>
5963
- <li>Map of breakpoints</li>
5964
- <li>Each property is the breakpoints name</li>
5965
- <li>Each value is that breakpoints point (set in em by default)</li>
5966
- </ul>
5967
- <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5968
- <span class="pjs-token pjs-string">"small"</span> <span class="pjs-token pjs-punctuation">:</span> utils.<span class="pjs-token pjs-function">pixel-to-em</span><span class="pjs-token pjs-punctuation">(</span>680px<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5969
- <span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> utils.<span class="pjs-token pjs-function">pixel-to-em</span><span class="pjs-token pjs-punctuation">(</span>1200px<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5970
- <span class="pjs-token pjs-string">"large"</span> <span class="pjs-token pjs-punctuation">:</span> utils.<span class="pjs-token pjs-function">pixel-to-em</span><span class="pjs-token pjs-punctuation">(</span>1500px<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span>
5971
- <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
5972
- <details>
5973
- <summary>File Information</summary>
5974
- <ul>
5975
- <li><strong>File:</strong> _breakpoint.scss</li>
5976
- <li><strong>Group:</strong> breakpoint</li>
5977
- <li><strong>Type:</strong> variable</li>
5978
- <li><strong>Lines (comments):</strong> 47-51</li>
5979
- <li><strong>Lines (code):</strong> 53-57</li>
5980
- </ul>
5981
- </details>
5982
5982
 
5983
5983
  </div>
5984
5984
  </div>