@ulu/frontend 0.1.0-beta.27 → 0.1.0-beta.29

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 (164) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/ulu-frontend.min.css +1 -1
  3. package/docs-dev/assets/main.js +832 -421
  4. package/docs-dev/assets/placeholder/icon-calendar.svg +1 -0
  5. package/docs-dev/assets/placeholder/icon-check.svg +1 -0
  6. package/docs-dev/assets/style.css +629 -233
  7. package/docs-dev/changelog/index.html +98 -8
  8. package/docs-dev/demos/accordion/index.html +38 -8
  9. package/docs-dev/demos/button/index.html +38 -8
  10. package/docs-dev/demos/button-verbose/index.html +5109 -0
  11. package/docs-dev/demos/callout/index.html +38 -8
  12. package/docs-dev/demos/captioned-figure/index.html +38 -8
  13. package/docs-dev/demos/card/index.html +105 -477
  14. package/docs-dev/demos/card-grid/index.html +88 -12
  15. package/docs-dev/demos/card-new/index.html +5088 -0
  16. package/docs-dev/demos/card-old/index.html +5223 -0
  17. package/docs-dev/demos/card.1/index.html +5223 -0
  18. package/docs-dev/demos/card.TRASH/index.html +5541 -0
  19. package/docs-dev/demos/css-icons/index.html +38 -8
  20. package/docs-dev/demos/data-grid/index.html +38 -8
  21. package/docs-dev/demos/data-table/index.html +63 -33
  22. package/docs-dev/demos/details-group/index.html +38 -8
  23. package/docs-dev/demos/file-save/index.html +38 -8
  24. package/docs-dev/demos/flipcard/index.html +38 -8
  25. package/docs-dev/demos/form-theme/index.html +38 -8
  26. package/docs-dev/demos/index.html +38 -8
  27. package/docs-dev/demos/list-inline/index.html +38 -8
  28. package/docs-dev/demos/list-lines/index.html +38 -8
  29. package/docs-dev/demos/menu-stack/index.html +38 -8
  30. package/docs-dev/demos/modals/index.html +38 -8
  31. package/docs-dev/demos/nav-strip/index.html +38 -8
  32. package/docs-dev/demos/overlay-section/index.html +38 -8
  33. package/docs-dev/demos/popovers/index.html +41 -9
  34. package/docs-dev/demos/print/index.html +38 -8
  35. package/docs-dev/demos/pull-quote/index.html +38 -8
  36. package/docs-dev/demos/rule/index.html +38 -8
  37. package/docs-dev/demos/scrollpoints/index.html +38 -8
  38. package/docs-dev/demos/spoke-spinner/index.html +38 -8
  39. package/docs-dev/demos/sticky-list/index.html +38 -8
  40. package/docs-dev/demos/tabs/index.html +38 -8
  41. package/docs-dev/demos/tag/index.html +38 -8
  42. package/docs-dev/demos/theme-toggle/index.html +38 -8
  43. package/docs-dev/demos/tiles/index.html +38 -8
  44. package/docs-dev/demos/tooltip/index.html +38 -8
  45. package/docs-dev/guide/building-stylesheet/index.html +38 -8
  46. package/docs-dev/guide/developing-ulu-scss-module/index.html +38 -8
  47. package/docs-dev/guide/index.html +38 -8
  48. package/docs-dev/index.html +38 -8
  49. package/docs-dev/javascript/events/index.html +38 -8
  50. package/docs-dev/javascript/index.html +38 -8
  51. package/docs-dev/javascript/settings/index.html +38 -8
  52. package/docs-dev/javascript/ui-breakpoints/index.html +38 -8
  53. package/docs-dev/javascript/ui-collapsible/index.html +38 -8
  54. package/docs-dev/javascript/ui-details-group/index.html +38 -8
  55. package/docs-dev/javascript/ui-dialog/index.html +38 -8
  56. package/docs-dev/javascript/ui-flipcard/index.html +38 -8
  57. package/docs-dev/javascript/ui-grid/index.html +38 -8
  58. package/docs-dev/javascript/ui-modal-builder/index.html +38 -8
  59. package/docs-dev/javascript/ui-overflow-scroller/index.html +38 -8
  60. package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +38 -8
  61. package/docs-dev/javascript/ui-page/index.html +38 -8
  62. package/docs-dev/javascript/ui-popover/index.html +38 -8
  63. package/docs-dev/javascript/ui-print/index.html +38 -8
  64. package/docs-dev/javascript/ui-print-details/index.html +38 -8
  65. package/docs-dev/javascript/ui-programmatic-modal/index.html +38 -8
  66. package/docs-dev/javascript/ui-proxy-click/index.html +38 -8
  67. package/docs-dev/javascript/ui-resizer/index.html +38 -8
  68. package/docs-dev/javascript/ui-scroll-slider/index.html +38 -8
  69. package/docs-dev/javascript/ui-scrollpoint/index.html +38 -8
  70. package/docs-dev/javascript/ui-slider/index.html +38 -8
  71. package/docs-dev/javascript/ui-tabs/index.html +38 -8
  72. package/docs-dev/javascript/ui-theme-toggle/index.html +38 -8
  73. package/docs-dev/javascript/ui-tooltip/index.html +38 -8
  74. package/docs-dev/javascript/utils-class-logger/index.html +38 -8
  75. package/docs-dev/javascript/utils-dom/index.html +38 -8
  76. package/docs-dev/javascript/utils-file-save/index.html +38 -8
  77. package/docs-dev/javascript/utils-floating-ui/index.html +38 -8
  78. package/docs-dev/javascript/utils-id/index.html +38 -8
  79. package/docs-dev/javascript/utils-pause-youtube-video/index.html +38 -8
  80. package/docs-dev/sass/base/color/index.html +38 -8
  81. package/docs-dev/sass/base/elements/index.html +38 -8
  82. package/docs-dev/sass/base/index/index.html +38 -8
  83. package/docs-dev/sass/base/index.html +38 -8
  84. package/docs-dev/sass/base/keyframes/index.html +38 -8
  85. package/docs-dev/sass/base/layout/index.html +38 -8
  86. package/docs-dev/sass/base/normalize/index.html +38 -8
  87. package/docs-dev/sass/base/print/index.html +38 -8
  88. package/docs-dev/sass/base/root/index.html +38 -8
  89. package/docs-dev/sass/base/typography/index.html +38 -8
  90. package/docs-dev/sass/components/accordion/index.html +38 -8
  91. package/docs-dev/sass/components/adaptive-spacing/index.html +38 -8
  92. package/docs-dev/sass/components/badge/index.html +38 -8
  93. package/docs-dev/sass/components/basic-hero/index.html +38 -8
  94. package/docs-dev/sass/components/button/index.html +38 -8
  95. package/docs-dev/sass/components/button-verbose/index.html +96 -17
  96. package/docs-dev/sass/components/callout/index.html +38 -8
  97. package/docs-dev/sass/components/captioned-figure/index.html +38 -8
  98. package/docs-dev/sass/components/card/index.html +44 -14
  99. package/docs-dev/sass/components/card-grid/index.html +38 -8
  100. package/docs-dev/sass/components/css-icon/index.html +38 -8
  101. package/docs-dev/sass/components/data-grid/index.html +38 -8
  102. package/docs-dev/sass/components/data-table/index.html +38 -8
  103. package/docs-dev/sass/components/fill-context/index.html +38 -8
  104. package/docs-dev/sass/components/flipcard/index.html +38 -8
  105. package/docs-dev/sass/components/flipcard-grid/index.html +38 -8
  106. package/docs-dev/sass/components/form-theme/index.html +124 -93
  107. package/docs-dev/sass/components/hero/index.html +38 -8
  108. package/docs-dev/sass/components/horizontal-rule/index.html +38 -8
  109. package/docs-dev/sass/components/image-grid/index.html +38 -8
  110. package/docs-dev/sass/components/index/index.html +38 -8
  111. package/docs-dev/sass/components/index.html +38 -8
  112. package/docs-dev/sass/components/links/index.html +38 -8
  113. package/docs-dev/sass/components/list-inline/index.html +38 -8
  114. package/docs-dev/sass/components/list-lines/index.html +38 -8
  115. package/docs-dev/sass/components/list-ordered/index.html +38 -8
  116. package/docs-dev/sass/components/list-unordered/index.html +38 -8
  117. package/docs-dev/sass/components/menu-stack/index.html +38 -8
  118. package/docs-dev/sass/components/modal/index.html +38 -8
  119. package/docs-dev/sass/components/nav-strip/index.html +38 -8
  120. package/docs-dev/sass/components/overlay-section/index.html +38 -8
  121. package/docs-dev/sass/components/pager/index.html +38 -8
  122. package/docs-dev/sass/components/placeholder-block/index.html +38 -8
  123. package/docs-dev/sass/components/popover/index.html +60 -31
  124. package/docs-dev/sass/components/pull-quote/index.html +38 -8
  125. package/docs-dev/sass/components/ratio-box/index.html +38 -8
  126. package/docs-dev/sass/components/rule/index.html +38 -8
  127. package/docs-dev/sass/components/scroll-slider/index.html +38 -8
  128. package/docs-dev/sass/components/skip-link/index.html +38 -8
  129. package/docs-dev/sass/components/slider/index.html +38 -8
  130. package/docs-dev/sass/components/spoke-spinner/index.html +38 -8
  131. package/docs-dev/sass/components/sticky-list/index.html +38 -8
  132. package/docs-dev/sass/components/tabs/index.html +38 -8
  133. package/docs-dev/sass/components/tag/index.html +38 -8
  134. package/docs-dev/sass/components/tile-button/index.html +38 -8
  135. package/docs-dev/sass/components/tile-grid/index.html +38 -8
  136. package/docs-dev/sass/components/tile-grid-overlay/index.html +38 -8
  137. package/docs-dev/sass/components/vignette/index.html +38 -8
  138. package/docs-dev/sass/components/wysiwyg/index.html +38 -8
  139. package/docs-dev/sass/core/breakpoint/index.html +38 -8
  140. package/docs-dev/sass/core/button/index.html +38 -8
  141. package/docs-dev/sass/core/color/index.html +38 -8
  142. package/docs-dev/sass/core/cssvar/index.html +38 -8
  143. package/docs-dev/sass/core/element/index.html +38 -8
  144. package/docs-dev/sass/core/index.html +38 -8
  145. package/docs-dev/sass/core/layout/index.html +38 -8
  146. package/docs-dev/sass/core/path/index.html +38 -8
  147. package/docs-dev/sass/core/selector/index.html +38 -8
  148. package/docs-dev/sass/core/typography/index.html +38 -8
  149. package/docs-dev/sass/core/units/index.html +38 -8
  150. package/docs-dev/sass/core/utils/index.html +248 -93
  151. package/docs-dev/sass/helpers/color/index.html +38 -8
  152. package/docs-dev/sass/helpers/display/index.html +38 -8
  153. package/docs-dev/sass/helpers/index/index.html +38 -8
  154. package/docs-dev/sass/helpers/index.html +38 -8
  155. package/docs-dev/sass/helpers/print/index.html +38 -8
  156. package/docs-dev/sass/helpers/typography/index.html +38 -8
  157. package/docs-dev/sass/helpers/units/index.html +38 -8
  158. package/docs-dev/sass/helpers/utilities/index.html +38 -8
  159. package/docs-dev/sass/index.html +38 -8
  160. package/package.json +8 -6
  161. package/scss/components/_button-verbose.scss +57 -9
  162. package/scss/components/_card.scss +34 -18
  163. package/scss/components/_form-theme.scss +52 -40
  164. package/scss/components/_popover.scss +16 -11
package/docs-dev/sass/components/button/index.html CHANGED
@@ -196,6 +196,21 @@
196
196
  </li>
197
197
 
198
198
 
199
+ <li class="nav-tree__item ">
200
+
201
+ <a class="nav-tree__link " href="/frontend/demos/button-verbose/">
202
+
203
+
204
+ <span class="nav-tree__text">
205
+ Button Verbose
206
+ </span>
207
+
208
+ </a>
209
+
210
+
211
+ </li>
212
+
213
+
199
214
  <li class="nav-tree__item ">
200
215
 
201
216
  <a class="nav-tree__link " href="/frontend/demos/callout/">
@@ -228,11 +243,11 @@
228
243
 
229
244
  <li class="nav-tree__item ">
230
245
 
231
- <a class="nav-tree__link " href="/frontend/demos/card/">
246
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
232
247
 
233
248
 
234
249
  <span class="nav-tree__text">
235
- Card
250
+ Card Grid
236
251
  </span>
237
252
 
238
253
  </a>
@@ -243,11 +258,11 @@
243
258
 
244
259
  <li class="nav-tree__item ">
245
260
 
246
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
261
+ <a class="nav-tree__link " href="/frontend/demos/card/">
247
262
 
248
263
 
249
264
  <span class="nav-tree__text">
250
- Card Grid
265
+ Card New
251
266
  </span>
252
267
 
253
268
  </a>
@@ -2667,6 +2682,21 @@
2667
2682
  </li>
2668
2683
 
2669
2684
 
2685
+ <li class="nav-tree__item ">
2686
+
2687
+ <a class="nav-tree__link " href="/frontend/demos/button-verbose/">
2688
+
2689
+
2690
+ <span class="nav-tree__text">
2691
+ Button Verbose
2692
+ </span>
2693
+
2694
+ </a>
2695
+
2696
+
2697
+ </li>
2698
+
2699
+
2670
2700
  <li class="nav-tree__item ">
2671
2701
 
2672
2702
  <a class="nav-tree__link " href="/frontend/demos/callout/">
@@ -2699,11 +2729,11 @@
2699
2729
 
2700
2730
  <li class="nav-tree__item ">
2701
2731
 
2702
- <a class="nav-tree__link " href="/frontend/demos/card/">
2732
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2703
2733
 
2704
2734
 
2705
2735
  <span class="nav-tree__text">
2706
- Card
2736
+ Card Grid
2707
2737
  </span>
2708
2738
 
2709
2739
  </a>
@@ -2714,11 +2744,11 @@
2714
2744
 
2715
2745
  <li class="nav-tree__item ">
2716
2746
 
2717
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2747
+ <a class="nav-tree__link " href="/frontend/demos/card/">
2718
2748
 
2719
2749
 
2720
2750
  <span class="nav-tree__text">
2721
- Card Grid
2751
+ Card New
2722
2752
  </span>
2723
2753
 
2724
2754
  </a>
package/docs-dev/sass/components/button-verbose/index.html CHANGED
@@ -196,6 +196,21 @@
196
196
  </li>
197
197
 
198
198
 
199
+ <li class="nav-tree__item ">
200
+
201
+ <a class="nav-tree__link " href="/frontend/demos/button-verbose/">
202
+
203
+
204
+ <span class="nav-tree__text">
205
+ Button Verbose
206
+ </span>
207
+
208
+ </a>
209
+
210
+
211
+ </li>
212
+
213
+
199
214
  <li class="nav-tree__item ">
200
215
 
201
216
  <a class="nav-tree__link " href="/frontend/demos/callout/">
@@ -228,11 +243,11 @@
228
243
 
229
244
  <li class="nav-tree__item ">
230
245
 
231
- <a class="nav-tree__link " href="/frontend/demos/card/">
246
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
232
247
 
233
248
 
234
249
  <span class="nav-tree__text">
235
- Card
250
+ Card Grid
236
251
  </span>
237
252
 
238
253
  </a>
@@ -243,11 +258,11 @@
243
258
 
244
259
  <li class="nav-tree__item ">
245
260
 
246
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
261
+ <a class="nav-tree__link " href="/frontend/demos/card/">
247
262
 
248
263
 
249
264
  <span class="nav-tree__text">
250
- Card Grid
265
+ Card New
251
266
  </span>
252
267
 
253
268
  </a>
@@ -2667,6 +2682,21 @@
2667
2682
  </li>
2668
2683
 
2669
2684
 
2685
+ <li class="nav-tree__item ">
2686
+
2687
+ <a class="nav-tree__link " href="/frontend/demos/button-verbose/">
2688
+
2689
+
2690
+ <span class="nav-tree__text">
2691
+ Button Verbose
2692
+ </span>
2693
+
2694
+ </a>
2695
+
2696
+
2697
+ </li>
2698
+
2699
+
2670
2700
  <li class="nav-tree__item ">
2671
2701
 
2672
2702
  <a class="nav-tree__link " href="/frontend/demos/callout/">
@@ -2699,11 +2729,11 @@
2699
2729
 
2700
2730
  <li class="nav-tree__item ">
2701
2731
 
2702
- <a class="nav-tree__link " href="/frontend/demos/card/">
2732
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2703
2733
 
2704
2734
 
2705
2735
  <span class="nav-tree__text">
2706
- Card
2736
+ Card Grid
2707
2737
  </span>
2708
2738
 
2709
2739
  </a>
@@ -2714,11 +2744,11 @@
2714
2744
 
2715
2745
  <li class="nav-tree__item ">
2716
2746
 
2717
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2747
+ <a class="nav-tree__link " href="/frontend/demos/card/">
2718
2748
 
2719
2749
 
2720
2750
  <span class="nav-tree__text">
2721
- Card Grid
2751
+ Card New
2722
2752
  </span>
2723
2753
 
2724
2754
  </a>
@@ -5070,13 +5100,14 @@
5070
5100
  <p>Module Settings</p>
5071
5101
  <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>
5072
5102
  <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
5073
- <span class="pjs-token pjs-string">"background-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
5103
+ <span class="pjs-token pjs-string">"background-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> #F7F8F7<span class="pjs-token pjs-punctuation">,</span>
5074
5104
  <span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"border-radius"</span><span class="pjs-token pjs-punctuation">,</span>
5075
5105
  <span class="pjs-token pjs-string">"box-shadow"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
5076
5106
  <span class="pjs-token pjs-string">"box-shadow-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
5077
5107
  <span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"type"</span><span class="pjs-token pjs-punctuation">,</span>
5078
5108
  <span class="pjs-token pjs-string">"color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"type"</span><span class="pjs-token pjs-punctuation">,</span>
5079
5109
  <span class="pjs-token pjs-string">"icon-color"</span><span class="pjs-token pjs-punctuation">:</span> gray<span class="pjs-token pjs-punctuation">,</span>
5110
+ <span class="pjs-token pjs-string">"icon-color-hover"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
5080
5111
  <span class="pjs-token pjs-string">"icon-font-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1.25rem<span class="pjs-token pjs-punctuation">,</span>
5081
5112
  <span class="pjs-token pjs-string">"line-height"</span> <span class="pjs-token pjs-punctuation">:</span> 1.2<span class="pjs-token pjs-punctuation">,</span>
5082
5113
  <span class="pjs-token pjs-string">"margin"</span> <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
@@ -5087,6 +5118,10 @@
5087
5118
  <span class="pjs-token pjs-string">"title-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
5088
5119
  <span class="pjs-token pjs-string">"title-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
5089
5120
  <span class="pjs-token pjs-string">"title-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link-hover"</span><span class="pjs-token pjs-punctuation">,</span>
5121
+ <span class="pjs-token pjs-string">"left-cap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
5122
+ <span class="pjs-token pjs-string">"left-cap-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
5123
+ <span class="pjs-token pjs-string">"left-cap-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link-hover"</span><span class="pjs-token pjs-punctuation">,</span>
5124
+ <span class="pjs-token pjs-string">"left-cap-width"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem
5090
5125
  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
5091
5126
  <details>
5092
5127
  <summary>File Information</summary>
@@ -5094,8 +5129,8 @@
5094
5129
  <li><strong>File:</strong> _button-verbose.scss</li>
5095
5130
  <li><strong>Group:</strong> button-verbose</li>
5096
5131
  <li><strong>Type:</strong> variable</li>
5097
- <li><strong>Lines (comments):</strong> 29-48</li>
5098
- <li><strong>Lines (code):</strong> 50-69</li>
5132
+ <li><strong>Lines (comments):</strong> 30-54</li>
5133
+ <li><strong>Lines (code):</strong> 56-80</li>
5099
5134
  </ul>
5100
5135
  </details>
5101
5136
  <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5158,6 +5193,12 @@
5158
5193
  <td style="text-align:left">Color for button icons.</td>
5159
5194
  </tr>
5160
5195
  <tr>
5196
+ <td style="text-align:left">icon-color-hover</td>
5197
+ <td style="text-align:left">Color</td>
5198
+ <td style="text-align:left">null</td>
5199
+ <td style="text-align:left">Optional color for icon when hovered</td>
5200
+ </tr>
5201
+ <tr>
5161
5202
  <td style="text-align:left">icon-font-size</td>
5162
5203
  <td style="text-align:left">Dimension</td>
5163
5204
  <td style="text-align:left">1.25rem</td>
@@ -5217,6 +5258,30 @@
5217
5258
  <td style="text-align:left">0.5em</td>
5218
5259
  <td style="text-align:left">Margin for the button's title.</td>
5219
5260
  </tr>
5261
+ <tr>
5262
+ <td style="text-align:left">left-cap</td>
5263
+ <td style="text-align:left">Boolean</td>
5264
+ <td style="text-align:left">false</td>
5265
+ <td style="text-align:left">Enable left cap style</td>
5266
+ </tr>
5267
+ <tr>
5268
+ <td style="text-align:left">left-cap-color</td>
5269
+ <td style="text-align:left">Color</td>
5270
+ <td style="text-align:left">&quot;link&quot;</td>
5271
+ <td style="text-align:left">The color for the left cap</td>
5272
+ </tr>
5273
+ <tr>
5274
+ <td style="text-align:left">left-cap-color-hover</td>
5275
+ <td style="text-align:left">color</td>
5276
+ <td style="text-align:left">&quot;link-hover&quot;</td>
5277
+ <td style="text-align:left">The color for the left cap when the button is hovered</td>
5278
+ </tr>
5279
+ <tr>
5280
+ <td style="text-align:left">left-cap-color-hover</td>
5281
+ <td style="text-align:left">Number</td>
5282
+ <td style="text-align:left">0.5rem</td>
5283
+ <td style="text-align:left">Width of the cap</td>
5284
+ </tr>
5220
5285
  </tbody>
5221
5286
  </table>
5222
5287
  <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -5233,8 +5298,8 @@
5233
5298
  <li><strong>File:</strong> _button-verbose.scss</li>
5234
5299
  <li><strong>Group:</strong> button-verbose</li>
5235
5300
  <li><strong>Type:</strong> mixin</li>
5236
- <li><strong>Lines (comments):</strong> 71-74</li>
5237
- <li><strong>Lines (code):</strong> 76-78</li>
5301
+ <li><strong>Lines (comments):</strong> 82-85</li>
5302
+ <li><strong>Lines (code):</strong> 87-89</li>
5238
5303
  </ul>
5239
5304
  </details>
5240
5305
  <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5273,12 +5338,26 @@
5273
5338
  <li><strong>File:</strong> _button-verbose.scss</li>
5274
5339
  <li><strong>Group:</strong> button-verbose</li>
5275
5340
  <li><strong>Type:</strong> mixin</li>
5276
- <li><strong>Lines (comments):</strong> 90-92</li>
5277
- <li><strong>Lines (code):</strong> 94-139</li>
5341
+ <li><strong>Lines (comments):</strong> 101-109</li>
5342
+ <li><strong>Lines (code):</strong> 111-187</li>
5278
5343
  </ul>
5279
5344
  </details>
5280
5345
  <h4 id="examples-1" tabindex="-1">Examples</h4>
5281
5346
  <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-button-verbose-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>
5347
+ <p>Basic Example</p>
5348
+ <pre class="language-html"><code class="language-html"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>a</span> <span class="pjs-token pjs-attr-name">href</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>#<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>button-verbose<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
5349
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>strong</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>button-verbose__title<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>Example Link<span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>strong</span><span class="pjs-token pjs-punctuation">></span></span>
5350
+ This is the body
5351
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>span</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>button-verbose__icon fas fa-arrow-right<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">aria-hidden</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>true<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span><span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>span</span><span class="pjs-token pjs-punctuation">></span></span>
5352
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>a</span><span class="pjs-token pjs-punctuation">></span></span></code></pre>
5353
+ <h5 id="preview" tabindex="-1">Preview</h5>
5354
+ <div>
5355
+ <a href="#" class="button-verbose">
5356
+ <strong class="button-verbose__title">Example Link</strong>
5357
+ This is the body
5358
+ <span class="button-verbose__icon fas fa-arrow-right" aria-hidden="true"></span>
5359
+ </a>
5360
+ </div>
5282
5361
  <h4 id="require-1" tabindex="-1">Require</h4>
5283
5362
  <ul>
5284
5363
  <li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
@@ -5297,8 +5376,8 @@
5297
5376
  <li><strong>File:</strong> _button-verbose.scss</li>
5298
5377
  <li><strong>Group:</strong> button-verbose</li>
5299
5378
  <li><strong>Type:</strong> function</li>
5300
- <li><strong>Lines (comments):</strong> 80-83</li>
5301
- <li><strong>Lines (code):</strong> 85-88</li>
5379
+ <li><strong>Lines (comments):</strong> 91-94</li>
5380
+ <li><strong>Lines (code):</strong> 96-99</li>
5302
5381
  </ul>
5303
5382
  </details>
5304
5383
  <h4 id="examples-2" tabindex="-1">Examples</h4>
package/docs-dev/sass/components/callout/index.html CHANGED
@@ -196,6 +196,21 @@
196
196
  </li>
197
197
 
198
198
 
199
+ <li class="nav-tree__item ">
200
+
201
+ <a class="nav-tree__link " href="/frontend/demos/button-verbose/">
202
+
203
+
204
+ <span class="nav-tree__text">
205
+ Button Verbose
206
+ </span>
207
+
208
+ </a>
209
+
210
+
211
+ </li>
212
+
213
+
199
214
  <li class="nav-tree__item ">
200
215
 
201
216
  <a class="nav-tree__link " href="/frontend/demos/callout/">
@@ -228,11 +243,11 @@
228
243
 
229
244
  <li class="nav-tree__item ">
230
245
 
231
- <a class="nav-tree__link " href="/frontend/demos/card/">
246
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
232
247
 
233
248
 
234
249
  <span class="nav-tree__text">
235
- Card
250
+ Card Grid
236
251
  </span>
237
252
 
238
253
  </a>
@@ -243,11 +258,11 @@
243
258
 
244
259
  <li class="nav-tree__item ">
245
260
 
246
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
261
+ <a class="nav-tree__link " href="/frontend/demos/card/">
247
262
 
248
263
 
249
264
  <span class="nav-tree__text">
250
- Card Grid
265
+ Card New
251
266
  </span>
252
267
 
253
268
  </a>
@@ -2667,6 +2682,21 @@
2667
2682
  </li>
2668
2683
 
2669
2684
 
2685
+ <li class="nav-tree__item ">
2686
+
2687
+ <a class="nav-tree__link " href="/frontend/demos/button-verbose/">
2688
+
2689
+
2690
+ <span class="nav-tree__text">
2691
+ Button Verbose
2692
+ </span>
2693
+
2694
+ </a>
2695
+
2696
+
2697
+ </li>
2698
+
2699
+
2670
2700
  <li class="nav-tree__item ">
2671
2701
 
2672
2702
  <a class="nav-tree__link " href="/frontend/demos/callout/">
@@ -2699,11 +2729,11 @@
2699
2729
 
2700
2730
  <li class="nav-tree__item ">
2701
2731
 
2702
- <a class="nav-tree__link " href="/frontend/demos/card/">
2732
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2703
2733
 
2704
2734
 
2705
2735
  <span class="nav-tree__text">
2706
- Card
2736
+ Card Grid
2707
2737
  </span>
2708
2738
 
2709
2739
  </a>
@@ -2714,11 +2744,11 @@
2714
2744
 
2715
2745
  <li class="nav-tree__item ">
2716
2746
 
2717
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2747
+ <a class="nav-tree__link " href="/frontend/demos/card/">
2718
2748
 
2719
2749
 
2720
2750
  <span class="nav-tree__text">
2721
- Card Grid
2751
+ Card New
2722
2752
  </span>
2723
2753
 
2724
2754
  </a>
package/docs-dev/sass/components/captioned-figure/index.html CHANGED
@@ -196,6 +196,21 @@
196
196
  </li>
197
197
 
198
198
 
199
+ <li class="nav-tree__item ">
200
+
201
+ <a class="nav-tree__link " href="/frontend/demos/button-verbose/">
202
+
203
+
204
+ <span class="nav-tree__text">
205
+ Button Verbose
206
+ </span>
207
+
208
+ </a>
209
+
210
+
211
+ </li>
212
+
213
+
199
214
  <li class="nav-tree__item ">
200
215
 
201
216
  <a class="nav-tree__link " href="/frontend/demos/callout/">
@@ -228,11 +243,11 @@
228
243
 
229
244
  <li class="nav-tree__item ">
230
245
 
231
- <a class="nav-tree__link " href="/frontend/demos/card/">
246
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
232
247
 
233
248
 
234
249
  <span class="nav-tree__text">
235
- Card
250
+ Card Grid
236
251
  </span>
237
252
 
238
253
  </a>
@@ -243,11 +258,11 @@
243
258
 
244
259
  <li class="nav-tree__item ">
245
260
 
246
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
261
+ <a class="nav-tree__link " href="/frontend/demos/card/">
247
262
 
248
263
 
249
264
  <span class="nav-tree__text">
250
- Card Grid
265
+ Card New
251
266
  </span>
252
267
 
253
268
  </a>
@@ -2667,6 +2682,21 @@
2667
2682
  </li>
2668
2683
 
2669
2684
 
2685
+ <li class="nav-tree__item ">
2686
+
2687
+ <a class="nav-tree__link " href="/frontend/demos/button-verbose/">
2688
+
2689
+
2690
+ <span class="nav-tree__text">
2691
+ Button Verbose
2692
+ </span>
2693
+
2694
+ </a>
2695
+
2696
+
2697
+ </li>
2698
+
2699
+
2670
2700
  <li class="nav-tree__item ">
2671
2701
 
2672
2702
  <a class="nav-tree__link " href="/frontend/demos/callout/">
@@ -2699,11 +2729,11 @@
2699
2729
 
2700
2730
  <li class="nav-tree__item ">
2701
2731
 
2702
- <a class="nav-tree__link " href="/frontend/demos/card/">
2732
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2703
2733
 
2704
2734
 
2705
2735
  <span class="nav-tree__text">
2706
- Card
2736
+ Card Grid
2707
2737
  </span>
2708
2738
 
2709
2739
  </a>
@@ -2714,11 +2744,11 @@
2714
2744
 
2715
2745
  <li class="nav-tree__item ">
2716
2746
 
2717
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2747
+ <a class="nav-tree__link " href="/frontend/demos/card/">
2718
2748
 
2719
2749
 
2720
2750
  <span class="nav-tree__text">
2721
- Card Grid
2751
+ Card New
2722
2752
  </span>
2723
2753
 
2724
2754
  </a>