@ulu/frontend 0.1.0-beta.19 → 0.1.0-beta.20

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 (169) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/ulu-frontend.min.css +1 -1
  3. package/dist/ulu-frontend.min.js +12 -12
  4. package/docs-dev/changelog/index.html +196 -2
  5. package/docs-dev/demos/accordion/index.html +129 -2
  6. package/docs-dev/demos/basic-hero/index.html +111 -0
  7. package/docs-dev/demos/button/index.html +129 -2
  8. package/docs-dev/demos/callout/index.html +129 -2
  9. package/docs-dev/demos/captioned-figure/index.html +129 -2
  10. package/docs-dev/demos/card/index.html +129 -2
  11. package/docs-dev/demos/css-icons/index.html +129 -2
  12. package/docs-dev/demos/data-grid/index.html +129 -2
  13. package/docs-dev/demos/data-table/index.html +154 -27
  14. package/docs-dev/demos/details-group/index.html +129 -2
  15. package/docs-dev/demos/file-save/index.html +129 -2
  16. package/docs-dev/demos/flipcard/index.html +129 -2
  17. package/docs-dev/demos/form-theme/index.html +129 -2
  18. package/docs-dev/demos/hero/index.html +12 -4
  19. package/docs-dev/demos/image-grid/index.html +12 -4
  20. package/docs-dev/demos/index.html +129 -2
  21. package/docs-dev/demos/list-inline/index.html +129 -2
  22. package/docs-dev/demos/list-lines/index.html +129 -2
  23. package/docs-dev/demos/menu-stack/index.html +129 -2
  24. package/docs-dev/demos/modals/index.html +129 -2
  25. package/docs-dev/demos/nav-strip/index.html +129 -2
  26. package/docs-dev/demos/overlay-section/index.html +129 -2
  27. package/docs-dev/demos/popovers/index.html +129 -2
  28. package/docs-dev/demos/print/index.html +129 -2
  29. package/docs-dev/demos/pull-quote/index.html +129 -2
  30. package/docs-dev/demos/rule/index.html +129 -2
  31. package/docs-dev/demos/scroll-slider/index.html +12 -4
  32. package/docs-dev/demos/scrollpoints/index.html +129 -2
  33. package/docs-dev/demos/slider/index.html +12 -4
  34. package/docs-dev/demos/spoke-spinner/index.html +129 -2
  35. package/docs-dev/demos/tabs/index.html +129 -2
  36. package/docs-dev/demos/tag/index.html +129 -2
  37. package/docs-dev/demos/theme-toggle/index.html +5039 -0
  38. package/docs-dev/demos/tile-grid-overlay/index.html +12 -4
  39. package/docs-dev/demos/tiles/index.html +129 -2
  40. package/docs-dev/demos/tooltip/index.html +129 -2
  41. package/docs-dev/guide/building-stylesheet/index.html +129 -2
  42. package/docs-dev/guide/developing-ulu-scss-module/index.html +129 -2
  43. package/docs-dev/guide/index.html +129 -2
  44. package/docs-dev/index.html +129 -2
  45. package/docs-dev/javascript/events/index.html +129 -2
  46. package/docs-dev/javascript/index.html +129 -2
  47. package/docs-dev/javascript/settings/index.html +129 -2
  48. package/docs-dev/javascript/ui-breakpoints/index.html +129 -2
  49. package/docs-dev/javascript/ui-collapsible/index.html +129 -2
  50. package/docs-dev/javascript/ui-details-group/index.html +129 -2
  51. package/docs-dev/javascript/ui-dialog/index.html +129 -2
  52. package/docs-dev/javascript/ui-flipcard/index.html +129 -2
  53. package/docs-dev/javascript/ui-grid/index.html +129 -2
  54. package/docs-dev/javascript/ui-modal-builder/index.html +129 -2
  55. package/docs-dev/javascript/ui-overflow-scroller/index.html +129 -2
  56. package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +129 -2
  57. package/docs-dev/javascript/ui-page/index.html +129 -2
  58. package/docs-dev/javascript/ui-popover/index.html +129 -2
  59. package/docs-dev/javascript/ui-print/index.html +129 -2
  60. package/docs-dev/javascript/ui-print-details/index.html +129 -2
  61. package/docs-dev/javascript/ui-programmatic-modal/index.html +129 -2
  62. package/docs-dev/javascript/ui-proxy-click/index.html +129 -2
  63. package/docs-dev/javascript/ui-resizer/index.html +129 -2
  64. package/docs-dev/javascript/ui-scroll-slider/index.html +129 -2
  65. package/docs-dev/javascript/ui-scrollpoint/index.html +129 -2
  66. package/docs-dev/javascript/ui-slider/index.html +129 -2
  67. package/docs-dev/javascript/ui-tabs/index.html +129 -2
  68. package/docs-dev/javascript/ui-theme-toggle/index.html +5178 -0
  69. package/docs-dev/javascript/ui-tooltip/index.html +129 -2
  70. package/docs-dev/javascript/utils-class-logger/index.html +129 -2
  71. package/docs-dev/javascript/utils-dom/index.html +193 -6
  72. package/docs-dev/javascript/utils-file-save/index.html +129 -2
  73. package/docs-dev/javascript/utils-floating-ui/index.html +129 -2
  74. package/docs-dev/javascript/utils-id/index.html +129 -2
  75. package/docs-dev/javascript/utils-pause-youtube-video/index.html +129 -2
  76. package/docs-dev/sass/base/color/index.html +129 -2
  77. package/docs-dev/sass/base/elements/index.html +129 -2
  78. package/docs-dev/sass/base/index/index.html +129 -2
  79. package/docs-dev/sass/base/index.html +129 -2
  80. package/docs-dev/sass/base/keyframes/index.html +129 -2
  81. package/docs-dev/sass/base/layout/index.html +129 -2
  82. package/docs-dev/sass/base/normalize/index.html +129 -2
  83. package/docs-dev/sass/base/print/index.html +129 -2
  84. package/docs-dev/sass/base/root/index.html +129 -2
  85. package/docs-dev/sass/base/typography/index.html +129 -2
  86. package/docs-dev/sass/components/accordion/index.html +129 -2
  87. package/docs-dev/sass/components/adaptive-spacing/index.html +129 -2
  88. package/docs-dev/sass/components/badge/index.html +129 -2
  89. package/docs-dev/sass/components/basic-hero/index.html +5145 -0
  90. package/docs-dev/sass/components/button/index.html +129 -2
  91. package/docs-dev/sass/components/button-verbose/index.html +129 -2
  92. package/docs-dev/sass/components/callout/index.html +129 -2
  93. package/docs-dev/sass/components/captioned-figure/index.html +129 -2
  94. package/docs-dev/sass/components/card/index.html +129 -2
  95. package/docs-dev/sass/components/card-grid/index.html +129 -2
  96. package/docs-dev/sass/components/css-icon/index.html +129 -2
  97. package/docs-dev/sass/components/data-grid/index.html +129 -2
  98. package/docs-dev/sass/components/data-table/index.html +129 -2
  99. package/docs-dev/sass/components/fill-context/index.html +129 -2
  100. package/docs-dev/sass/components/flipcard/index.html +129 -2
  101. package/docs-dev/sass/components/flipcard-grid/index.html +129 -2
  102. package/docs-dev/sass/components/form-theme/index.html +133 -6
  103. package/docs-dev/sass/components/hero/index.html +129 -2
  104. package/docs-dev/sass/components/horizontal-rule/index.html +129 -2
  105. package/docs-dev/sass/components/image-grid/index.html +129 -2
  106. package/docs-dev/sass/components/index/index.html +140 -12
  107. package/docs-dev/sass/components/index.html +129 -2
  108. package/docs-dev/sass/components/links/index.html +129 -2
  109. package/docs-dev/sass/components/list-inline/index.html +129 -2
  110. package/docs-dev/sass/components/list-lines/index.html +129 -2
  111. package/docs-dev/sass/components/list-ordered/index.html +129 -2
  112. package/docs-dev/sass/components/list-unordered/index.html +129 -2
  113. package/docs-dev/sass/components/menu-stack/index.html +129 -2
  114. package/docs-dev/sass/components/modal/index.html +129 -2
  115. package/docs-dev/sass/components/nav-strip/index.html +129 -2
  116. package/docs-dev/sass/components/overlay-section/index.html +129 -2
  117. package/docs-dev/sass/components/pager/index.html +129 -2
  118. package/docs-dev/sass/components/placeholder-block/index.html +129 -2
  119. package/docs-dev/sass/components/popover/index.html +129 -2
  120. package/docs-dev/sass/components/pull-quote/index.html +129 -2
  121. package/docs-dev/sass/components/ratio-box/index.html +129 -2
  122. package/docs-dev/sass/components/rule/index.html +129 -2
  123. package/docs-dev/sass/components/scroll-slider/index.html +129 -2
  124. package/docs-dev/sass/components/skip-link/index.html +129 -2
  125. package/docs-dev/sass/components/slider/index.html +129 -2
  126. package/docs-dev/sass/components/spoke-spinner/index.html +129 -2
  127. package/docs-dev/sass/components/tabs/index.html +129 -2
  128. package/docs-dev/sass/components/tag/index.html +129 -2
  129. package/docs-dev/sass/components/tile-button/index.html +129 -2
  130. package/docs-dev/sass/components/tile-grid/index.html +129 -2
  131. package/docs-dev/sass/components/tile-grid-overlay/index.html +129 -2
  132. package/docs-dev/sass/components/vignette/index.html +129 -2
  133. package/docs-dev/sass/components/wysiwyg/index.html +129 -2
  134. package/docs-dev/sass/core/breakpoint/index.html +129 -2
  135. package/docs-dev/sass/core/button/index.html +129 -2
  136. package/docs-dev/sass/core/color/index.html +129 -2
  137. package/docs-dev/sass/core/cssvar/index.html +129 -2
  138. package/docs-dev/sass/core/element/index.html +129 -2
  139. package/docs-dev/sass/core/index.html +129 -2
  140. package/docs-dev/sass/core/layout/index.html +129 -2
  141. package/docs-dev/sass/core/path/index.html +129 -2
  142. package/docs-dev/sass/core/selector/index.html +129 -2
  143. package/docs-dev/sass/core/typography/index.html +129 -2
  144. package/docs-dev/sass/core/units/index.html +129 -2
  145. package/docs-dev/sass/core/utils/index.html +129 -2
  146. package/docs-dev/sass/helpers/color/index.html +129 -2
  147. package/docs-dev/sass/helpers/display/index.html +129 -2
  148. package/docs-dev/sass/helpers/index/index.html +129 -2
  149. package/docs-dev/sass/helpers/index.html +129 -2
  150. package/docs-dev/sass/helpers/print/index.html +129 -2
  151. package/docs-dev/sass/helpers/typography/index.html +129 -2
  152. package/docs-dev/sass/helpers/units/index.html +129 -2
  153. package/docs-dev/sass/helpers/utilities/index.html +129 -2
  154. package/docs-dev/sass/index.html +129 -2
  155. package/js/ui/details-group.js +1 -1
  156. package/js/ui/theme-toggle.js +330 -89
  157. package/js/utils/dom.js +43 -1
  158. package/package.json +3 -2
  159. package/scss/components/_basic-hero.scss +112 -0
  160. package/scss/components/_form-theme.scss +2 -2
  161. package/scss/components/_index.scss +6 -0
  162. package/types/ui/details-group.d.ts +43 -0
  163. package/types/ui/details-group.d.ts.map +1 -0
  164. package/types/ui/index.d.ts +1 -0
  165. package/types/ui/programmatic-modal.d.ts.map +1 -1
  166. package/types/ui/theme-toggle.d.ts +58 -7
  167. package/types/ui/theme-toggle.d.ts.map +1 -1
  168. package/types/utils/dom.d.ts +19 -1
  169. package/types/utils/dom.d.ts.map +1 -1
package/docs-dev/demos/theme-toggle/index.html ADDED
@@ -0,0 +1,5039 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>
7
+ Theme Toggle
8
+ </title>
9
+ <meta name="description" content="Modular Sass Theming Library">
10
+ <meta name="generator" content="Eleventy v3.0.0">
11
+
12
+ <link rel="apple-touch-icon" sizes="180x180" href="/frontend/assets/favicons/apple-touch-icon.png">
13
+ <link rel="icon" type="image/png" sizes="32x32" href="/frontend/assets/favicons/favicon-32x32.png">
14
+ <link rel="icon" type="image/png" sizes="16x16" href="/frontend/assets/favicons/favicon-16x16.png">
15
+ <link rel="manifest" href="/frontend/assets/favicons/site.webmanifest">
16
+ <link rel="mask-icon" href="/frontend/assets/favicons/safari-pinned-tab.svg" color="#8455bd">
17
+ <link rel="shortcut icon" href="/frontend/assets/favicons/favicon.ico">
18
+ <meta name="msapplication-TileColor" content="#603cba">
19
+ <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
20
+ <meta name="theme-color" content="#ffffff">
21
+
22
+
23
+
24
+ <link rel="stylesheet" href="/frontend/assets/fonts/inter/inter.css">
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+ </head>
34
+ <body class="page theme-light">
35
+
36
+
37
+
38
+ <header class="page__header header">
39
+ <a href="#main" class="skip-link hidden-visually-focusable">
40
+ Skip to main content
41
+ </a>
42
+ <div class="header__main">
43
+ <a class="header__logo" href="/frontend/">
44
+ <div class="logo">
45
+ <span class="logo__main">Ulu</span>
46
+ <span class="logo__subtitle">Frontend</span>
47
+ </div>
48
+ </a>
49
+ <button class="header__mobile-toggle hidden-min-medium button button--icon button--secondary" data-ulu-dialog-trigger="mobile-menu" aria-label="Open Menu">
50
+ <span class="fas fa-bars" aria-hidden="true"></span>
51
+ </button>
52
+ </div>
53
+ <nav class="header__nav">
54
+ <h2 class="hidden-visually">Main Menu</h2>
55
+ <div class="header__nav-links">
56
+ <button class="button button--small button--icon button--icon-small" data-ulu-theme-toggle='{
57
+ "savePreference" : true,
58
+ "checkMediaQuery" : true,
59
+ "group" : "page"
60
+ }'>
61
+ <span class="hidden-visually">Toggle Theme to <span data-ulu-theme-toggle-label="">Dark</span></span>
62
+ <span class="fas fa-moon" data-ulu-theme-toggle-icon=""></span>
63
+ </button>
64
+ <a class="button button--small button--icon button--icon-small" href="https://www.npmjs.com/package/@ulu/frontend" aria-label="View on Github">
65
+ <span class="fab fa-github" aria-hidden="true"></span>
66
+ </a>
67
+ <a class="button button--small button--icon button--icon-small" href="https://www.npmjs.com/package/@ulu/frontend">
68
+
69
+ <span class="fab fa-npm" aria-hidden="true"></span>
70
+ </a>
71
+ </div>
72
+ <div class="header__nav-menu">
73
+
74
+ <ul class="nav-tree" data-menu-depth="1">
75
+
76
+
77
+ <li class="nav-tree__item ">
78
+ <details class="nav-tree__collapsible">
79
+ <summary class="nav-tree__toggle">
80
+
81
+ <span class="nav-tree__toggle-content">
82
+
83
+
84
+ <span class="nav-tree__icon fas fa-book" aria-hidden="true"></span>
85
+
86
+ <span class="nav-tree__text">
87
+ Guide
88
+ </span>
89
+
90
+ </span>
91
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
92
+
93
+ </summary>
94
+
95
+ <ul class="nav-tree" data-menu-depth="2">
96
+
97
+
98
+ <li class="nav-tree__item ">
99
+
100
+ <a class="nav-tree__link " href="/frontend/guide/building-stylesheet/">
101
+
102
+
103
+ <span class="nav-tree__text">
104
+ Building a Stylesheet
105
+ </span>
106
+
107
+ </a>
108
+
109
+
110
+ </li>
111
+
112
+
113
+ <li class="nav-tree__item ">
114
+
115
+ <a class="nav-tree__link " href="/frontend/guide/developing-ulu-scss-module/">
116
+
117
+
118
+ <span class="nav-tree__text">
119
+ Developing Ulu SCSS Module
120
+ </span>
121
+
122
+ </a>
123
+
124
+
125
+ </li>
126
+
127
+ </ul>
128
+
129
+ </details>
130
+ </li>
131
+
132
+
133
+ <li class="nav-tree__item is-active-trail ">
134
+ <details class="nav-tree__collapsible" open="">
135
+ <summary class="nav-tree__toggle">
136
+
137
+ <span class="nav-tree__toggle-content">
138
+
139
+
140
+ <span class="nav-tree__icon fas fa-vial" aria-hidden="true"></span>
141
+
142
+ <span class="nav-tree__text">
143
+ Demos
144
+ </span>
145
+
146
+ </span>
147
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
148
+
149
+ </summary>
150
+
151
+ <ul class="nav-tree" data-menu-depth="2">
152
+
153
+
154
+ <li class="nav-tree__item ">
155
+
156
+ <a class="nav-tree__link " href="/frontend/demos/accordion/">
157
+
158
+
159
+ <span class="nav-tree__text">
160
+ Accordion
161
+ </span>
162
+
163
+ </a>
164
+
165
+
166
+ </li>
167
+
168
+
169
+ <li class="nav-tree__item ">
170
+
171
+ <a class="nav-tree__link " href="/frontend/demos/basic-hero/">
172
+
173
+
174
+ <span class="nav-tree__text">
175
+ Basic Hero
176
+ </span>
177
+
178
+ </a>
179
+
180
+
181
+ </li>
182
+
183
+
184
+ <li class="nav-tree__item ">
185
+
186
+ <a class="nav-tree__link " href="/frontend/demos/button/">
187
+
188
+
189
+ <span class="nav-tree__text">
190
+ Button
191
+ </span>
192
+
193
+ </a>
194
+
195
+
196
+ </li>
197
+
198
+
199
+ <li class="nav-tree__item ">
200
+
201
+ <a class="nav-tree__link " href="/frontend/demos/callout/">
202
+
203
+
204
+ <span class="nav-tree__text">
205
+ Callout
206
+ </span>
207
+
208
+ </a>
209
+
210
+
211
+ </li>
212
+
213
+
214
+ <li class="nav-tree__item ">
215
+
216
+ <a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
217
+
218
+
219
+ <span class="nav-tree__text">
220
+ Captioned Figure
221
+ </span>
222
+
223
+ </a>
224
+
225
+
226
+ </li>
227
+
228
+
229
+ <li class="nav-tree__item ">
230
+
231
+ <a class="nav-tree__link " href="/frontend/demos/card/">
232
+
233
+
234
+ <span class="nav-tree__text">
235
+ Card
236
+ </span>
237
+
238
+ </a>
239
+
240
+
241
+ </li>
242
+
243
+
244
+ <li class="nav-tree__item ">
245
+
246
+ <a class="nav-tree__link " href="/frontend/demos/css-icons/">
247
+
248
+
249
+ <span class="nav-tree__text">
250
+ CSS Icons
251
+ </span>
252
+
253
+ </a>
254
+
255
+
256
+ </li>
257
+
258
+
259
+ <li class="nav-tree__item ">
260
+
261
+ <a class="nav-tree__link " href="/frontend/demos/data-grid/">
262
+
263
+
264
+ <span class="nav-tree__text">
265
+ Data grid
266
+ </span>
267
+
268
+ </a>
269
+
270
+
271
+ </li>
272
+
273
+
274
+ <li class="nav-tree__item ">
275
+
276
+ <a class="nav-tree__link " href="/frontend/demos/data-table/">
277
+
278
+
279
+ <span class="nav-tree__text">
280
+ Data Table
281
+ </span>
282
+
283
+ </a>
284
+
285
+
286
+ </li>
287
+
288
+
289
+ <li class="nav-tree__item ">
290
+
291
+ <a class="nav-tree__link " href="/frontend/demos/details-group/">
292
+
293
+
294
+ <span class="nav-tree__text">
295
+ Details Group
296
+ </span>
297
+
298
+ </a>
299
+
300
+
301
+ </li>
302
+
303
+
304
+ <li class="nav-tree__item ">
305
+
306
+ <a class="nav-tree__link " href="/frontend/demos/file-save/">
307
+
308
+
309
+ <span class="nav-tree__text">
310
+ File Save
311
+ </span>
312
+
313
+ </a>
314
+
315
+
316
+ </li>
317
+
318
+
319
+ <li class="nav-tree__item ">
320
+
321
+ <a class="nav-tree__link " href="/frontend/demos/flipcard/">
322
+
323
+
324
+ <span class="nav-tree__text">
325
+ Flip Card
326
+ </span>
327
+
328
+ </a>
329
+
330
+
331
+ </li>
332
+
333
+
334
+ <li class="nav-tree__item ">
335
+
336
+ <a class="nav-tree__link " href="/frontend/demos/form-theme/">
337
+
338
+
339
+ <span class="nav-tree__text">
340
+ Form Theme
341
+ </span>
342
+
343
+ </a>
344
+
345
+
346
+ </li>
347
+
348
+
349
+ <li class="nav-tree__item ">
350
+
351
+ <a class="nav-tree__link " href="/frontend/demos/hero/">
352
+
353
+
354
+ <span class="nav-tree__text">
355
+ Hero
356
+ </span>
357
+
358
+ </a>
359
+
360
+
361
+ </li>
362
+
363
+
364
+ <li class="nav-tree__item ">
365
+
366
+ <a class="nav-tree__link " href="/frontend/demos/image-grid/">
367
+
368
+
369
+ <span class="nav-tree__text">
370
+ Image Grid
371
+ </span>
372
+
373
+ </a>
374
+
375
+
376
+ </li>
377
+
378
+
379
+ <li class="nav-tree__item ">
380
+
381
+ <a class="nav-tree__link " href="/frontend/demos/list-inline/">
382
+
383
+
384
+ <span class="nav-tree__text">
385
+ List Inline
386
+ </span>
387
+
388
+ </a>
389
+
390
+
391
+ </li>
392
+
393
+
394
+ <li class="nav-tree__item ">
395
+
396
+ <a class="nav-tree__link " href="/frontend/demos/list-lines/">
397
+
398
+
399
+ <span class="nav-tree__text">
400
+ List Lines
401
+ </span>
402
+
403
+ </a>
404
+
405
+
406
+ </li>
407
+
408
+
409
+ <li class="nav-tree__item ">
410
+
411
+ <a class="nav-tree__link " href="/frontend/demos/menu-stack/">
412
+
413
+
414
+ <span class="nav-tree__text">
415
+ Menu Stack
416
+ </span>
417
+
418
+ </a>
419
+
420
+
421
+ </li>
422
+
423
+
424
+ <li class="nav-tree__item ">
425
+
426
+ <a class="nav-tree__link " href="/frontend/demos/modals/">
427
+
428
+
429
+ <span class="nav-tree__text">
430
+ Modals
431
+ </span>
432
+
433
+ </a>
434
+
435
+
436
+ </li>
437
+
438
+
439
+ <li class="nav-tree__item ">
440
+
441
+ <a class="nav-tree__link " href="/frontend/demos/nav-strip/">
442
+
443
+
444
+ <span class="nav-tree__text">
445
+ Nav Strip
446
+ </span>
447
+
448
+ </a>
449
+
450
+
451
+ </li>
452
+
453
+
454
+ <li class="nav-tree__item ">
455
+
456
+ <a class="nav-tree__link " href="/frontend/demos/overlay-section/">
457
+
458
+
459
+ <span class="nav-tree__text">
460
+ Overlay Section
461
+ </span>
462
+
463
+ </a>
464
+
465
+
466
+ </li>
467
+
468
+
469
+ <li class="nav-tree__item ">
470
+
471
+ <a class="nav-tree__link " href="/frontend/demos/popovers/">
472
+
473
+
474
+ <span class="nav-tree__text">
475
+ Popovers
476
+ </span>
477
+
478
+ </a>
479
+
480
+
481
+ </li>
482
+
483
+
484
+ <li class="nav-tree__item ">
485
+
486
+ <a class="nav-tree__link " href="/frontend/demos/print/">
487
+
488
+
489
+ <span class="nav-tree__text">
490
+ Print
491
+ </span>
492
+
493
+ </a>
494
+
495
+
496
+ </li>
497
+
498
+
499
+ <li class="nav-tree__item ">
500
+
501
+ <a class="nav-tree__link " href="/frontend/demos/pull-quote/">
502
+
503
+
504
+ <span class="nav-tree__text">
505
+ Pull Quote
506
+ </span>
507
+
508
+ </a>
509
+
510
+
511
+ </li>
512
+
513
+
514
+ <li class="nav-tree__item ">
515
+
516
+ <a class="nav-tree__link " href="/frontend/demos/rule/">
517
+
518
+
519
+ <span class="nav-tree__text">
520
+ Rule
521
+ </span>
522
+
523
+ </a>
524
+
525
+
526
+ </li>
527
+
528
+
529
+ <li class="nav-tree__item ">
530
+
531
+ <a class="nav-tree__link " href="/frontend/demos/scroll-slider/">
532
+
533
+
534
+ <span class="nav-tree__text">
535
+ Scroll Slider
536
+ </span>
537
+
538
+ </a>
539
+
540
+
541
+ </li>
542
+
543
+
544
+ <li class="nav-tree__item ">
545
+
546
+ <a class="nav-tree__link " href="/frontend/demos/scrollpoints/">
547
+
548
+
549
+ <span class="nav-tree__text">
550
+ Scrollpoints
551
+ </span>
552
+
553
+ </a>
554
+
555
+
556
+ </li>
557
+
558
+
559
+ <li class="nav-tree__item ">
560
+
561
+ <a class="nav-tree__link " href="/frontend/demos/slider/">
562
+
563
+
564
+ <span class="nav-tree__text">
565
+ Slider
566
+ </span>
567
+
568
+ </a>
569
+
570
+
571
+ </li>
572
+
573
+
574
+ <li class="nav-tree__item ">
575
+
576
+ <a class="nav-tree__link " href="/frontend/demos/spoke-spinner/">
577
+
578
+
579
+ <span class="nav-tree__text">
580
+ Spoke Spinner
581
+ </span>
582
+
583
+ </a>
584
+
585
+
586
+ </li>
587
+
588
+
589
+ <li class="nav-tree__item ">
590
+
591
+ <a class="nav-tree__link " href="/frontend/demos/tabs/">
592
+
593
+
594
+ <span class="nav-tree__text">
595
+ Tabs
596
+ </span>
597
+
598
+ </a>
599
+
600
+
601
+ </li>
602
+
603
+
604
+ <li class="nav-tree__item ">
605
+
606
+ <a class="nav-tree__link " href="/frontend/demos/tag/">
607
+
608
+
609
+ <span class="nav-tree__text">
610
+ Tag
611
+ </span>
612
+
613
+ </a>
614
+
615
+
616
+ </li>
617
+
618
+
619
+ <li class="nav-tree__item is-active is-active-trail ">
620
+
621
+ <a class="nav-tree__link is-active is-active-trail" href="/frontend/demos/theme-toggle/" aria-current="page">
622
+
623
+
624
+ <span class="nav-tree__text">
625
+ Theme Toggle
626
+ </span>
627
+
628
+ </a>
629
+
630
+
631
+ </li>
632
+
633
+
634
+ <li class="nav-tree__item ">
635
+
636
+ <a class="nav-tree__link " href="/frontend/demos/tile-grid-overlay/">
637
+
638
+
639
+ <span class="nav-tree__text">
640
+ Tile Grid Overlay
641
+ </span>
642
+
643
+ </a>
644
+
645
+
646
+ </li>
647
+
648
+
649
+ <li class="nav-tree__item ">
650
+
651
+ <a class="nav-tree__link " href="/frontend/demos/tiles/">
652
+
653
+
654
+ <span class="nav-tree__text">
655
+ Tiles
656
+ </span>
657
+
658
+ </a>
659
+
660
+
661
+ </li>
662
+
663
+
664
+ <li class="nav-tree__item ">
665
+
666
+ <a class="nav-tree__link " href="/frontend/demos/tooltip/">
667
+
668
+
669
+ <span class="nav-tree__text">
670
+ Tooltip
671
+ </span>
672
+
673
+ </a>
674
+
675
+
676
+ </li>
677
+
678
+ </ul>
679
+
680
+ </details>
681
+ </li>
682
+
683
+
684
+ <li class="nav-tree__item ">
685
+ <details class="nav-tree__collapsible">
686
+ <summary class="nav-tree__toggle">
687
+
688
+ <span class="nav-tree__toggle-content">
689
+
690
+
691
+ <span class="nav-tree__icon fab fa-sass" aria-hidden="true"></span>
692
+
693
+ <span class="nav-tree__text">
694
+ Sass API
695
+ </span>
696
+
697
+ </span>
698
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
699
+
700
+ </summary>
701
+
702
+ <ul class="nav-tree" data-menu-depth="2">
703
+
704
+ <li class="nav-tree__item ">
705
+
706
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/">
707
+
708
+
709
+ <span class="nav-tree__text">
710
+ Introduction
711
+ </span>
712
+
713
+ </a>
714
+
715
+
716
+ </li>
717
+
718
+
719
+ <li class="nav-tree__item ">
720
+ <details class="nav-tree__collapsible">
721
+ <summary class="nav-tree__toggle">
722
+
723
+ <span class="nav-tree__toggle-content">
724
+
725
+
726
+ <span class="nav-tree__text">
727
+ Core
728
+ </span>
729
+
730
+ </span>
731
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
732
+
733
+ </summary>
734
+
735
+ <ul class="nav-tree" data-menu-depth="3">
736
+
737
+ <li class="nav-tree__item ">
738
+
739
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/core/">
740
+
741
+
742
+ <span class="nav-tree__text">
743
+ Introduction
744
+ </span>
745
+
746
+ </a>
747
+
748
+
749
+ </li>
750
+
751
+
752
+ <li class="nav-tree__item ">
753
+
754
+ <a class="nav-tree__link " href="/frontend/sass/core/breakpoint/">
755
+
756
+
757
+ <span class="nav-tree__text">
758
+ Breakpoint
759
+ </span>
760
+
761
+ </a>
762
+
763
+
764
+ </li>
765
+
766
+
767
+ <li class="nav-tree__item ">
768
+
769
+ <a class="nav-tree__link " href="/frontend/sass/core/button/">
770
+
771
+
772
+ <span class="nav-tree__text">
773
+ Button
774
+ </span>
775
+
776
+ </a>
777
+
778
+
779
+ </li>
780
+
781
+
782
+ <li class="nav-tree__item ">
783
+
784
+ <a class="nav-tree__link " href="/frontend/sass/core/color/">
785
+
786
+
787
+ <span class="nav-tree__text">
788
+ Color
789
+ </span>
790
+
791
+ </a>
792
+
793
+
794
+ </li>
795
+
796
+
797
+ <li class="nav-tree__item ">
798
+
799
+ <a class="nav-tree__link " href="/frontend/sass/core/cssvar/">
800
+
801
+
802
+ <span class="nav-tree__text">
803
+ Cssvar
804
+ </span>
805
+
806
+ </a>
807
+
808
+
809
+ </li>
810
+
811
+
812
+ <li class="nav-tree__item ">
813
+
814
+ <a class="nav-tree__link " href="/frontend/sass/core/element/">
815
+
816
+
817
+ <span class="nav-tree__text">
818
+ Element
819
+ </span>
820
+
821
+ </a>
822
+
823
+
824
+ </li>
825
+
826
+
827
+ <li class="nav-tree__item ">
828
+
829
+ <a class="nav-tree__link " href="/frontend/sass/core/layout/">
830
+
831
+
832
+ <span class="nav-tree__text">
833
+ Layout
834
+ </span>
835
+
836
+ </a>
837
+
838
+
839
+ </li>
840
+
841
+
842
+ <li class="nav-tree__item ">
843
+
844
+ <a class="nav-tree__link " href="/frontend/sass/core/path/">
845
+
846
+
847
+ <span class="nav-tree__text">
848
+ Path
849
+ </span>
850
+
851
+ </a>
852
+
853
+
854
+ </li>
855
+
856
+
857
+ <li class="nav-tree__item ">
858
+
859
+ <a class="nav-tree__link " href="/frontend/sass/core/selector/">
860
+
861
+
862
+ <span class="nav-tree__text">
863
+ Selector
864
+ </span>
865
+
866
+ </a>
867
+
868
+
869
+ </li>
870
+
871
+
872
+ <li class="nav-tree__item ">
873
+
874
+ <a class="nav-tree__link " href="/frontend/sass/core/typography/">
875
+
876
+
877
+ <span class="nav-tree__text">
878
+ Typography
879
+ </span>
880
+
881
+ </a>
882
+
883
+
884
+ </li>
885
+
886
+
887
+ <li class="nav-tree__item ">
888
+
889
+ <a class="nav-tree__link " href="/frontend/sass/core/units/">
890
+
891
+
892
+ <span class="nav-tree__text">
893
+ Units
894
+ </span>
895
+
896
+ </a>
897
+
898
+
899
+ </li>
900
+
901
+
902
+ <li class="nav-tree__item ">
903
+
904
+ <a class="nav-tree__link " href="/frontend/sass/core/utils/">
905
+
906
+
907
+ <span class="nav-tree__text">
908
+ Utils
909
+ </span>
910
+
911
+ </a>
912
+
913
+
914
+ </li>
915
+
916
+ </ul>
917
+
918
+ </details>
919
+ </li>
920
+
921
+
922
+ <li class="nav-tree__item ">
923
+ <details class="nav-tree__collapsible">
924
+ <summary class="nav-tree__toggle">
925
+
926
+ <span class="nav-tree__toggle-content">
927
+
928
+
929
+ <span class="nav-tree__text">
930
+ Base
931
+ </span>
932
+
933
+ </span>
934
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
935
+
936
+ </summary>
937
+
938
+ <ul class="nav-tree" data-menu-depth="3">
939
+
940
+ <li class="nav-tree__item ">
941
+
942
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/base/">
943
+
944
+
945
+ <span class="nav-tree__text">
946
+ Introduction
947
+ </span>
948
+
949
+ </a>
950
+
951
+
952
+ </li>
953
+
954
+
955
+ <li class="nav-tree__item ">
956
+
957
+ <a class="nav-tree__link " href="/frontend/sass/base/color/">
958
+
959
+
960
+ <span class="nav-tree__text">
961
+ Color
962
+ </span>
963
+
964
+ </a>
965
+
966
+
967
+ </li>
968
+
969
+
970
+ <li class="nav-tree__item ">
971
+
972
+ <a class="nav-tree__link " href="/frontend/sass/base/elements/">
973
+
974
+
975
+ <span class="nav-tree__text">
976
+ Elements
977
+ </span>
978
+
979
+ </a>
980
+
981
+
982
+ </li>
983
+
984
+
985
+ <li class="nav-tree__item ">
986
+
987
+ <a class="nav-tree__link " href="/frontend/sass/base/index/">
988
+
989
+
990
+ <span class="nav-tree__text">
991
+ Index
992
+ </span>
993
+
994
+ </a>
995
+
996
+
997
+ </li>
998
+
999
+
1000
+ <li class="nav-tree__item ">
1001
+
1002
+ <a class="nav-tree__link " href="/frontend/sass/base/keyframes/">
1003
+
1004
+
1005
+ <span class="nav-tree__text">
1006
+ Keyframes
1007
+ </span>
1008
+
1009
+ </a>
1010
+
1011
+
1012
+ </li>
1013
+
1014
+
1015
+ <li class="nav-tree__item ">
1016
+
1017
+ <a class="nav-tree__link " href="/frontend/sass/base/layout/">
1018
+
1019
+
1020
+ <span class="nav-tree__text">
1021
+ Layout
1022
+ </span>
1023
+
1024
+ </a>
1025
+
1026
+
1027
+ </li>
1028
+
1029
+
1030
+ <li class="nav-tree__item ">
1031
+
1032
+ <a class="nav-tree__link " href="/frontend/sass/base/normalize/">
1033
+
1034
+
1035
+ <span class="nav-tree__text">
1036
+ Normalize
1037
+ </span>
1038
+
1039
+ </a>
1040
+
1041
+
1042
+ </li>
1043
+
1044
+
1045
+ <li class="nav-tree__item ">
1046
+
1047
+ <a class="nav-tree__link " href="/frontend/sass/base/print/">
1048
+
1049
+
1050
+ <span class="nav-tree__text">
1051
+ Print
1052
+ </span>
1053
+
1054
+ </a>
1055
+
1056
+
1057
+ </li>
1058
+
1059
+
1060
+ <li class="nav-tree__item ">
1061
+
1062
+ <a class="nav-tree__link " href="/frontend/sass/base/root/">
1063
+
1064
+
1065
+ <span class="nav-tree__text">
1066
+ Root
1067
+ </span>
1068
+
1069
+ </a>
1070
+
1071
+
1072
+ </li>
1073
+
1074
+
1075
+ <li class="nav-tree__item ">
1076
+
1077
+ <a class="nav-tree__link " href="/frontend/sass/base/typography/">
1078
+
1079
+
1080
+ <span class="nav-tree__text">
1081
+ Typography
1082
+ </span>
1083
+
1084
+ </a>
1085
+
1086
+
1087
+ </li>
1088
+
1089
+ </ul>
1090
+
1091
+ </details>
1092
+ </li>
1093
+
1094
+
1095
+ <li class="nav-tree__item ">
1096
+ <details class="nav-tree__collapsible">
1097
+ <summary class="nav-tree__toggle">
1098
+
1099
+ <span class="nav-tree__toggle-content">
1100
+
1101
+
1102
+ <span class="nav-tree__text">
1103
+ Components
1104
+ </span>
1105
+
1106
+ </span>
1107
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
1108
+
1109
+ </summary>
1110
+
1111
+ <ul class="nav-tree" data-menu-depth="3">
1112
+
1113
+ <li class="nav-tree__item ">
1114
+
1115
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
1116
+
1117
+
1118
+ <span class="nav-tree__text">
1119
+ Introduction
1120
+ </span>
1121
+
1122
+ </a>
1123
+
1124
+
1125
+ </li>
1126
+
1127
+
1128
+ <li class="nav-tree__item ">
1129
+
1130
+ <a class="nav-tree__link " href="/frontend/sass/components/accordion/">
1131
+
1132
+
1133
+ <span class="nav-tree__text">
1134
+ Accordion
1135
+ </span>
1136
+
1137
+ </a>
1138
+
1139
+
1140
+ </li>
1141
+
1142
+
1143
+ <li class="nav-tree__item ">
1144
+
1145
+ <a class="nav-tree__link " href="/frontend/sass/components/adaptive-spacing/">
1146
+
1147
+
1148
+ <span class="nav-tree__text">
1149
+ Adaptive-spacing
1150
+ </span>
1151
+
1152
+ </a>
1153
+
1154
+
1155
+ </li>
1156
+
1157
+
1158
+ <li class="nav-tree__item ">
1159
+
1160
+ <a class="nav-tree__link " href="/frontend/sass/components/badge/">
1161
+
1162
+
1163
+ <span class="nav-tree__text">
1164
+ Badge
1165
+ </span>
1166
+
1167
+ </a>
1168
+
1169
+
1170
+ </li>
1171
+
1172
+
1173
+ <li class="nav-tree__item ">
1174
+
1175
+ <a class="nav-tree__link " href="/frontend/sass/components/basic-hero/">
1176
+
1177
+
1178
+ <span class="nav-tree__text">
1179
+ Basic-hero
1180
+ </span>
1181
+
1182
+ </a>
1183
+
1184
+
1185
+ </li>
1186
+
1187
+
1188
+ <li class="nav-tree__item ">
1189
+
1190
+ <a class="nav-tree__link " href="/frontend/sass/components/button/">
1191
+
1192
+
1193
+ <span class="nav-tree__text">
1194
+ Button
1195
+ </span>
1196
+
1197
+ </a>
1198
+
1199
+
1200
+ </li>
1201
+
1202
+
1203
+ <li class="nav-tree__item ">
1204
+
1205
+ <a class="nav-tree__link " href="/frontend/sass/components/button-verbose/">
1206
+
1207
+
1208
+ <span class="nav-tree__text">
1209
+ Button-verbose
1210
+ </span>
1211
+
1212
+ </a>
1213
+
1214
+
1215
+ </li>
1216
+
1217
+
1218
+ <li class="nav-tree__item ">
1219
+
1220
+ <a class="nav-tree__link " href="/frontend/sass/components/callout/">
1221
+
1222
+
1223
+ <span class="nav-tree__text">
1224
+ Callout
1225
+ </span>
1226
+
1227
+ </a>
1228
+
1229
+
1230
+ </li>
1231
+
1232
+
1233
+ <li class="nav-tree__item ">
1234
+
1235
+ <a class="nav-tree__link " href="/frontend/sass/components/captioned-figure/">
1236
+
1237
+
1238
+ <span class="nav-tree__text">
1239
+ Captioned-figure
1240
+ </span>
1241
+
1242
+ </a>
1243
+
1244
+
1245
+ </li>
1246
+
1247
+
1248
+ <li class="nav-tree__item ">
1249
+
1250
+ <a class="nav-tree__link " href="/frontend/sass/components/card/">
1251
+
1252
+
1253
+ <span class="nav-tree__text">
1254
+ Card
1255
+ </span>
1256
+
1257
+ </a>
1258
+
1259
+
1260
+ </li>
1261
+
1262
+
1263
+ <li class="nav-tree__item ">
1264
+
1265
+ <a class="nav-tree__link " href="/frontend/sass/components/card-grid/">
1266
+
1267
+
1268
+ <span class="nav-tree__text">
1269
+ Card-grid
1270
+ </span>
1271
+
1272
+ </a>
1273
+
1274
+
1275
+ </li>
1276
+
1277
+
1278
+ <li class="nav-tree__item ">
1279
+
1280
+ <a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
1281
+
1282
+
1283
+ <span class="nav-tree__text">
1284
+ Css-icon
1285
+ </span>
1286
+
1287
+ </a>
1288
+
1289
+
1290
+ </li>
1291
+
1292
+
1293
+ <li class="nav-tree__item ">
1294
+
1295
+ <a class="nav-tree__link " href="/frontend/sass/components/data-grid/">
1296
+
1297
+
1298
+ <span class="nav-tree__text">
1299
+ Data-grid
1300
+ </span>
1301
+
1302
+ </a>
1303
+
1304
+
1305
+ </li>
1306
+
1307
+
1308
+ <li class="nav-tree__item ">
1309
+
1310
+ <a class="nav-tree__link " href="/frontend/sass/components/data-table/">
1311
+
1312
+
1313
+ <span class="nav-tree__text">
1314
+ Data-table
1315
+ </span>
1316
+
1317
+ </a>
1318
+
1319
+
1320
+ </li>
1321
+
1322
+
1323
+ <li class="nav-tree__item ">
1324
+
1325
+ <a class="nav-tree__link " href="/frontend/sass/components/fill-context/">
1326
+
1327
+
1328
+ <span class="nav-tree__text">
1329
+ Fill-context
1330
+ </span>
1331
+
1332
+ </a>
1333
+
1334
+
1335
+ </li>
1336
+
1337
+
1338
+ <li class="nav-tree__item ">
1339
+
1340
+ <a class="nav-tree__link " href="/frontend/sass/components/flipcard/">
1341
+
1342
+
1343
+ <span class="nav-tree__text">
1344
+ Flipcard
1345
+ </span>
1346
+
1347
+ </a>
1348
+
1349
+
1350
+ </li>
1351
+
1352
+
1353
+ <li class="nav-tree__item ">
1354
+
1355
+ <a class="nav-tree__link " href="/frontend/sass/components/flipcard-grid/">
1356
+
1357
+
1358
+ <span class="nav-tree__text">
1359
+ Flipcard-grid
1360
+ </span>
1361
+
1362
+ </a>
1363
+
1364
+
1365
+ </li>
1366
+
1367
+
1368
+ <li class="nav-tree__item ">
1369
+
1370
+ <a class="nav-tree__link " href="/frontend/sass/components/form-theme/">
1371
+
1372
+
1373
+ <span class="nav-tree__text">
1374
+ Form-theme
1375
+ </span>
1376
+
1377
+ </a>
1378
+
1379
+
1380
+ </li>
1381
+
1382
+
1383
+ <li class="nav-tree__item ">
1384
+
1385
+ <a class="nav-tree__link " href="/frontend/sass/components/hero/">
1386
+
1387
+
1388
+ <span class="nav-tree__text">
1389
+ Hero
1390
+ </span>
1391
+
1392
+ </a>
1393
+
1394
+
1395
+ </li>
1396
+
1397
+
1398
+ <li class="nav-tree__item ">
1399
+
1400
+ <a class="nav-tree__link " href="/frontend/sass/components/horizontal-rule/">
1401
+
1402
+
1403
+ <span class="nav-tree__text">
1404
+ Horizontal-rule
1405
+ </span>
1406
+
1407
+ </a>
1408
+
1409
+
1410
+ </li>
1411
+
1412
+
1413
+ <li class="nav-tree__item ">
1414
+
1415
+ <a class="nav-tree__link " href="/frontend/sass/components/image-grid/">
1416
+
1417
+
1418
+ <span class="nav-tree__text">
1419
+ Image-grid
1420
+ </span>
1421
+
1422
+ </a>
1423
+
1424
+
1425
+ </li>
1426
+
1427
+
1428
+ <li class="nav-tree__item ">
1429
+
1430
+ <a class="nav-tree__link " href="/frontend/sass/components/index/">
1431
+
1432
+
1433
+ <span class="nav-tree__text">
1434
+ Index
1435
+ </span>
1436
+
1437
+ </a>
1438
+
1439
+
1440
+ </li>
1441
+
1442
+
1443
+ <li class="nav-tree__item ">
1444
+
1445
+ <a class="nav-tree__link " href="/frontend/sass/components/links/">
1446
+
1447
+
1448
+ <span class="nav-tree__text">
1449
+ Links
1450
+ </span>
1451
+
1452
+ </a>
1453
+
1454
+
1455
+ </li>
1456
+
1457
+
1458
+ <li class="nav-tree__item ">
1459
+
1460
+ <a class="nav-tree__link " href="/frontend/sass/components/list-inline/">
1461
+
1462
+
1463
+ <span class="nav-tree__text">
1464
+ List-inline
1465
+ </span>
1466
+
1467
+ </a>
1468
+
1469
+
1470
+ </li>
1471
+
1472
+
1473
+ <li class="nav-tree__item ">
1474
+
1475
+ <a class="nav-tree__link " href="/frontend/sass/components/list-lines/">
1476
+
1477
+
1478
+ <span class="nav-tree__text">
1479
+ List-lines
1480
+ </span>
1481
+
1482
+ </a>
1483
+
1484
+
1485
+ </li>
1486
+
1487
+
1488
+ <li class="nav-tree__item ">
1489
+
1490
+ <a class="nav-tree__link " href="/frontend/sass/components/list-ordered/">
1491
+
1492
+
1493
+ <span class="nav-tree__text">
1494
+ List-ordered
1495
+ </span>
1496
+
1497
+ </a>
1498
+
1499
+
1500
+ </li>
1501
+
1502
+
1503
+ <li class="nav-tree__item ">
1504
+
1505
+ <a class="nav-tree__link " href="/frontend/sass/components/list-unordered/">
1506
+
1507
+
1508
+ <span class="nav-tree__text">
1509
+ List-unordered
1510
+ </span>
1511
+
1512
+ </a>
1513
+
1514
+
1515
+ </li>
1516
+
1517
+
1518
+ <li class="nav-tree__item ">
1519
+
1520
+ <a class="nav-tree__link " href="/frontend/sass/components/menu-stack/">
1521
+
1522
+
1523
+ <span class="nav-tree__text">
1524
+ Menu-stack
1525
+ </span>
1526
+
1527
+ </a>
1528
+
1529
+
1530
+ </li>
1531
+
1532
+
1533
+ <li class="nav-tree__item ">
1534
+
1535
+ <a class="nav-tree__link " href="/frontend/sass/components/modal/">
1536
+
1537
+
1538
+ <span class="nav-tree__text">
1539
+ Modal
1540
+ </span>
1541
+
1542
+ </a>
1543
+
1544
+
1545
+ </li>
1546
+
1547
+
1548
+ <li class="nav-tree__item ">
1549
+
1550
+ <a class="nav-tree__link " href="/frontend/sass/components/nav-strip/">
1551
+
1552
+
1553
+ <span class="nav-tree__text">
1554
+ Nav-strip
1555
+ </span>
1556
+
1557
+ </a>
1558
+
1559
+
1560
+ </li>
1561
+
1562
+
1563
+ <li class="nav-tree__item ">
1564
+
1565
+ <a class="nav-tree__link " href="/frontend/sass/components/overlay-section/">
1566
+
1567
+
1568
+ <span class="nav-tree__text">
1569
+ Overlay-section
1570
+ </span>
1571
+
1572
+ </a>
1573
+
1574
+
1575
+ </li>
1576
+
1577
+
1578
+ <li class="nav-tree__item ">
1579
+
1580
+ <a class="nav-tree__link " href="/frontend/sass/components/pager/">
1581
+
1582
+
1583
+ <span class="nav-tree__text">
1584
+ Pager
1585
+ </span>
1586
+
1587
+ </a>
1588
+
1589
+
1590
+ </li>
1591
+
1592
+
1593
+ <li class="nav-tree__item ">
1594
+
1595
+ <a class="nav-tree__link " href="/frontend/sass/components/placeholder-block/">
1596
+
1597
+
1598
+ <span class="nav-tree__text">
1599
+ Placeholder-block
1600
+ </span>
1601
+
1602
+ </a>
1603
+
1604
+
1605
+ </li>
1606
+
1607
+
1608
+ <li class="nav-tree__item ">
1609
+
1610
+ <a class="nav-tree__link " href="/frontend/sass/components/popover/">
1611
+
1612
+
1613
+ <span class="nav-tree__text">
1614
+ Popover
1615
+ </span>
1616
+
1617
+ </a>
1618
+
1619
+
1620
+ </li>
1621
+
1622
+
1623
+ <li class="nav-tree__item ">
1624
+
1625
+ <a class="nav-tree__link " href="/frontend/sass/components/pull-quote/">
1626
+
1627
+
1628
+ <span class="nav-tree__text">
1629
+ Pull-quote
1630
+ </span>
1631
+
1632
+ </a>
1633
+
1634
+
1635
+ </li>
1636
+
1637
+
1638
+ <li class="nav-tree__item ">
1639
+
1640
+ <a class="nav-tree__link " href="/frontend/sass/components/ratio-box/">
1641
+
1642
+
1643
+ <span class="nav-tree__text">
1644
+ Ratio-box
1645
+ </span>
1646
+
1647
+ </a>
1648
+
1649
+
1650
+ </li>
1651
+
1652
+
1653
+ <li class="nav-tree__item ">
1654
+
1655
+ <a class="nav-tree__link " href="/frontend/sass/components/rule/">
1656
+
1657
+
1658
+ <span class="nav-tree__text">
1659
+ Rule
1660
+ </span>
1661
+
1662
+ </a>
1663
+
1664
+
1665
+ </li>
1666
+
1667
+
1668
+ <li class="nav-tree__item ">
1669
+
1670
+ <a class="nav-tree__link " href="/frontend/sass/components/scroll-slider/">
1671
+
1672
+
1673
+ <span class="nav-tree__text">
1674
+ Scroll-slider
1675
+ </span>
1676
+
1677
+ </a>
1678
+
1679
+
1680
+ </li>
1681
+
1682
+
1683
+ <li class="nav-tree__item ">
1684
+
1685
+ <a class="nav-tree__link " href="/frontend/sass/components/skip-link/">
1686
+
1687
+
1688
+ <span class="nav-tree__text">
1689
+ Skip-link
1690
+ </span>
1691
+
1692
+ </a>
1693
+
1694
+
1695
+ </li>
1696
+
1697
+
1698
+ <li class="nav-tree__item ">
1699
+
1700
+ <a class="nav-tree__link " href="/frontend/sass/components/slider/">
1701
+
1702
+
1703
+ <span class="nav-tree__text">
1704
+ Slider
1705
+ </span>
1706
+
1707
+ </a>
1708
+
1709
+
1710
+ </li>
1711
+
1712
+
1713
+ <li class="nav-tree__item ">
1714
+
1715
+ <a class="nav-tree__link " href="/frontend/sass/components/spoke-spinner/">
1716
+
1717
+
1718
+ <span class="nav-tree__text">
1719
+ Spoke-spinner
1720
+ </span>
1721
+
1722
+ </a>
1723
+
1724
+
1725
+ </li>
1726
+
1727
+
1728
+ <li class="nav-tree__item ">
1729
+
1730
+ <a class="nav-tree__link " href="/frontend/sass/components/tabs/">
1731
+
1732
+
1733
+ <span class="nav-tree__text">
1734
+ Tabs
1735
+ </span>
1736
+
1737
+ </a>
1738
+
1739
+
1740
+ </li>
1741
+
1742
+
1743
+ <li class="nav-tree__item ">
1744
+
1745
+ <a class="nav-tree__link " href="/frontend/sass/components/tag/">
1746
+
1747
+
1748
+ <span class="nav-tree__text">
1749
+ Tag
1750
+ </span>
1751
+
1752
+ </a>
1753
+
1754
+
1755
+ </li>
1756
+
1757
+
1758
+ <li class="nav-tree__item ">
1759
+
1760
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-button/">
1761
+
1762
+
1763
+ <span class="nav-tree__text">
1764
+ Tile-button
1765
+ </span>
1766
+
1767
+ </a>
1768
+
1769
+
1770
+ </li>
1771
+
1772
+
1773
+ <li class="nav-tree__item ">
1774
+
1775
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-grid/">
1776
+
1777
+
1778
+ <span class="nav-tree__text">
1779
+ Tile-grid
1780
+ </span>
1781
+
1782
+ </a>
1783
+
1784
+
1785
+ </li>
1786
+
1787
+
1788
+ <li class="nav-tree__item ">
1789
+
1790
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-grid-overlay/">
1791
+
1792
+
1793
+ <span class="nav-tree__text">
1794
+ Tile-grid-overlay
1795
+ </span>
1796
+
1797
+ </a>
1798
+
1799
+
1800
+ </li>
1801
+
1802
+
1803
+ <li class="nav-tree__item ">
1804
+
1805
+ <a class="nav-tree__link " href="/frontend/sass/components/vignette/">
1806
+
1807
+
1808
+ <span class="nav-tree__text">
1809
+ Vignette
1810
+ </span>
1811
+
1812
+ </a>
1813
+
1814
+
1815
+ </li>
1816
+
1817
+
1818
+ <li class="nav-tree__item ">
1819
+
1820
+ <a class="nav-tree__link " href="/frontend/sass/components/wysiwyg/">
1821
+
1822
+
1823
+ <span class="nav-tree__text">
1824
+ Wysiwyg
1825
+ </span>
1826
+
1827
+ </a>
1828
+
1829
+
1830
+ </li>
1831
+
1832
+ </ul>
1833
+
1834
+ </details>
1835
+ </li>
1836
+
1837
+
1838
+ <li class="nav-tree__item ">
1839
+ <details class="nav-tree__collapsible">
1840
+ <summary class="nav-tree__toggle">
1841
+
1842
+ <span class="nav-tree__toggle-content">
1843
+
1844
+
1845
+ <span class="nav-tree__text">
1846
+ Helpers
1847
+ </span>
1848
+
1849
+ </span>
1850
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
1851
+
1852
+ </summary>
1853
+
1854
+ <ul class="nav-tree" data-menu-depth="3">
1855
+
1856
+ <li class="nav-tree__item ">
1857
+
1858
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/helpers/">
1859
+
1860
+
1861
+ <span class="nav-tree__text">
1862
+ Introduction
1863
+ </span>
1864
+
1865
+ </a>
1866
+
1867
+
1868
+ </li>
1869
+
1870
+
1871
+ <li class="nav-tree__item ">
1872
+
1873
+ <a class="nav-tree__link " href="/frontend/sass/helpers/color/">
1874
+
1875
+
1876
+ <span class="nav-tree__text">
1877
+ Color
1878
+ </span>
1879
+
1880
+ </a>
1881
+
1882
+
1883
+ </li>
1884
+
1885
+
1886
+ <li class="nav-tree__item ">
1887
+
1888
+ <a class="nav-tree__link " href="/frontend/sass/helpers/display/">
1889
+
1890
+
1891
+ <span class="nav-tree__text">
1892
+ Display
1893
+ </span>
1894
+
1895
+ </a>
1896
+
1897
+
1898
+ </li>
1899
+
1900
+
1901
+ <li class="nav-tree__item ">
1902
+
1903
+ <a class="nav-tree__link " href="/frontend/sass/helpers/index/">
1904
+
1905
+
1906
+ <span class="nav-tree__text">
1907
+ Index
1908
+ </span>
1909
+
1910
+ </a>
1911
+
1912
+
1913
+ </li>
1914
+
1915
+
1916
+ <li class="nav-tree__item ">
1917
+
1918
+ <a class="nav-tree__link " href="/frontend/sass/helpers/print/">
1919
+
1920
+
1921
+ <span class="nav-tree__text">
1922
+ Print
1923
+ </span>
1924
+
1925
+ </a>
1926
+
1927
+
1928
+ </li>
1929
+
1930
+
1931
+ <li class="nav-tree__item ">
1932
+
1933
+ <a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
1934
+
1935
+
1936
+ <span class="nav-tree__text">
1937
+ Typography
1938
+ </span>
1939
+
1940
+ </a>
1941
+
1942
+
1943
+ </li>
1944
+
1945
+
1946
+ <li class="nav-tree__item ">
1947
+
1948
+ <a class="nav-tree__link " href="/frontend/sass/helpers/units/">
1949
+
1950
+
1951
+ <span class="nav-tree__text">
1952
+ Units
1953
+ </span>
1954
+
1955
+ </a>
1956
+
1957
+
1958
+ </li>
1959
+
1960
+
1961
+ <li class="nav-tree__item ">
1962
+
1963
+ <a class="nav-tree__link " href="/frontend/sass/helpers/utilities/">
1964
+
1965
+
1966
+ <span class="nav-tree__text">
1967
+ Utilities
1968
+ </span>
1969
+
1970
+ </a>
1971
+
1972
+
1973
+ </li>
1974
+
1975
+ </ul>
1976
+
1977
+ </details>
1978
+ </li>
1979
+
1980
+ </ul>
1981
+
1982
+ </details>
1983
+ </li>
1984
+
1985
+
1986
+ <li class="nav-tree__item ">
1987
+ <details class="nav-tree__collapsible">
1988
+ <summary class="nav-tree__toggle">
1989
+
1990
+ <span class="nav-tree__toggle-content">
1991
+
1992
+
1993
+ <span class="nav-tree__icon fab fa-js" aria-hidden="true"></span>
1994
+
1995
+ <span class="nav-tree__text">
1996
+ Javascript API
1997
+ </span>
1998
+
1999
+ </span>
2000
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
2001
+
2002
+ </summary>
2003
+
2004
+ <ul class="nav-tree" data-menu-depth="2">
2005
+
2006
+ <li class="nav-tree__item ">
2007
+
2008
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/javascript/">
2009
+
2010
+
2011
+ <span class="nav-tree__text">
2012
+ Introduction
2013
+ </span>
2014
+
2015
+ </a>
2016
+
2017
+
2018
+ </li>
2019
+
2020
+
2021
+ <li class="nav-tree__item ">
2022
+
2023
+ <a class="nav-tree__link " href="/frontend/javascript/events/">
2024
+
2025
+
2026
+ <span class="nav-tree__text">
2027
+ events
2028
+ </span>
2029
+
2030
+ </a>
2031
+
2032
+
2033
+ </li>
2034
+
2035
+
2036
+ <li class="nav-tree__item ">
2037
+
2038
+ <a class="nav-tree__link " href="/frontend/javascript/settings/">
2039
+
2040
+
2041
+ <span class="nav-tree__text">
2042
+ settings
2043
+ </span>
2044
+
2045
+ </a>
2046
+
2047
+
2048
+ </li>
2049
+
2050
+
2051
+ <li class="nav-tree__item ">
2052
+
2053
+ <a class="nav-tree__link " href="/frontend/javascript/ui-breakpoints/">
2054
+
2055
+
2056
+ <span class="nav-tree__text">
2057
+ ui/breakpoints
2058
+ </span>
2059
+
2060
+ </a>
2061
+
2062
+
2063
+ </li>
2064
+
2065
+
2066
+ <li class="nav-tree__item ">
2067
+
2068
+ <a class="nav-tree__link " href="/frontend/javascript/ui-collapsible/">
2069
+
2070
+
2071
+ <span class="nav-tree__text">
2072
+ ui/collapsible
2073
+ </span>
2074
+
2075
+ </a>
2076
+
2077
+
2078
+ </li>
2079
+
2080
+
2081
+ <li class="nav-tree__item ">
2082
+
2083
+ <a class="nav-tree__link " href="/frontend/javascript/ui-details-group/">
2084
+
2085
+
2086
+ <span class="nav-tree__text">
2087
+ ui/details-group
2088
+ </span>
2089
+
2090
+ </a>
2091
+
2092
+
2093
+ </li>
2094
+
2095
+
2096
+ <li class="nav-tree__item ">
2097
+
2098
+ <a class="nav-tree__link " href="/frontend/javascript/ui-dialog/">
2099
+
2100
+
2101
+ <span class="nav-tree__text">
2102
+ ui/dialog
2103
+ </span>
2104
+
2105
+ </a>
2106
+
2107
+
2108
+ </li>
2109
+
2110
+
2111
+ <li class="nav-tree__item ">
2112
+
2113
+ <a class="nav-tree__link " href="/frontend/javascript/ui-flipcard/">
2114
+
2115
+
2116
+ <span class="nav-tree__text">
2117
+ ui/flipcard
2118
+ </span>
2119
+
2120
+ </a>
2121
+
2122
+
2123
+ </li>
2124
+
2125
+
2126
+ <li class="nav-tree__item ">
2127
+
2128
+ <a class="nav-tree__link " href="/frontend/javascript/ui-grid/">
2129
+
2130
+
2131
+ <span class="nav-tree__text">
2132
+ ui/grid
2133
+ </span>
2134
+
2135
+ </a>
2136
+
2137
+
2138
+ </li>
2139
+
2140
+
2141
+ <li class="nav-tree__item ">
2142
+
2143
+ <a class="nav-tree__link " href="/frontend/javascript/ui-modal-builder/">
2144
+
2145
+
2146
+ <span class="nav-tree__text">
2147
+ ui/modal-builder
2148
+ </span>
2149
+
2150
+ </a>
2151
+
2152
+
2153
+ </li>
2154
+
2155
+
2156
+ <li class="nav-tree__item ">
2157
+
2158
+ <a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller/">
2159
+
2160
+
2161
+ <span class="nav-tree__text">
2162
+ ui/overflow-scroller
2163
+ </span>
2164
+
2165
+ </a>
2166
+
2167
+
2168
+ </li>
2169
+
2170
+
2171
+ <li class="nav-tree__item ">
2172
+
2173
+ <a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller-pager/">
2174
+
2175
+
2176
+ <span class="nav-tree__text">
2177
+ ui/overflow-scroller-pager
2178
+ </span>
2179
+
2180
+ </a>
2181
+
2182
+
2183
+ </li>
2184
+
2185
+
2186
+ <li class="nav-tree__item ">
2187
+
2188
+ <a class="nav-tree__link " href="/frontend/javascript/ui-page/">
2189
+
2190
+
2191
+ <span class="nav-tree__text">
2192
+ ui/page
2193
+ </span>
2194
+
2195
+ </a>
2196
+
2197
+
2198
+ </li>
2199
+
2200
+
2201
+ <li class="nav-tree__item ">
2202
+
2203
+ <a class="nav-tree__link " href="/frontend/javascript/ui-popover/">
2204
+
2205
+
2206
+ <span class="nav-tree__text">
2207
+ ui/popover
2208
+ </span>
2209
+
2210
+ </a>
2211
+
2212
+
2213
+ </li>
2214
+
2215
+
2216
+ <li class="nav-tree__item ">
2217
+
2218
+ <a class="nav-tree__link " href="/frontend/javascript/ui-print/">
2219
+
2220
+
2221
+ <span class="nav-tree__text">
2222
+ ui/print
2223
+ </span>
2224
+
2225
+ </a>
2226
+
2227
+
2228
+ </li>
2229
+
2230
+
2231
+ <li class="nav-tree__item ">
2232
+
2233
+ <a class="nav-tree__link " href="/frontend/javascript/ui-print-details/">
2234
+
2235
+
2236
+ <span class="nav-tree__text">
2237
+ ui/print-details
2238
+ </span>
2239
+
2240
+ </a>
2241
+
2242
+
2243
+ </li>
2244
+
2245
+
2246
+ <li class="nav-tree__item ">
2247
+
2248
+ <a class="nav-tree__link " href="/frontend/javascript/ui-programmatic-modal/">
2249
+
2250
+
2251
+ <span class="nav-tree__text">
2252
+ ui/programmatic-modal
2253
+ </span>
2254
+
2255
+ </a>
2256
+
2257
+
2258
+ </li>
2259
+
2260
+
2261
+ <li class="nav-tree__item ">
2262
+
2263
+ <a class="nav-tree__link " href="/frontend/javascript/ui-proxy-click/">
2264
+
2265
+
2266
+ <span class="nav-tree__text">
2267
+ ui/proxy-click
2268
+ </span>
2269
+
2270
+ </a>
2271
+
2272
+
2273
+ </li>
2274
+
2275
+
2276
+ <li class="nav-tree__item ">
2277
+
2278
+ <a class="nav-tree__link " href="/frontend/javascript/ui-resizer/">
2279
+
2280
+
2281
+ <span class="nav-tree__text">
2282
+ ui/resizer
2283
+ </span>
2284
+
2285
+ </a>
2286
+
2287
+
2288
+ </li>
2289
+
2290
+
2291
+ <li class="nav-tree__item ">
2292
+
2293
+ <a class="nav-tree__link " href="/frontend/javascript/ui-scroll-slider/">
2294
+
2295
+
2296
+ <span class="nav-tree__text">
2297
+ ui/scroll-slider
2298
+ </span>
2299
+
2300
+ </a>
2301
+
2302
+
2303
+ </li>
2304
+
2305
+
2306
+ <li class="nav-tree__item ">
2307
+
2308
+ <a class="nav-tree__link " href="/frontend/javascript/ui-scrollpoint/">
2309
+
2310
+
2311
+ <span class="nav-tree__text">
2312
+ ui/scrollpoint
2313
+ </span>
2314
+
2315
+ </a>
2316
+
2317
+
2318
+ </li>
2319
+
2320
+
2321
+ <li class="nav-tree__item ">
2322
+
2323
+ <a class="nav-tree__link " href="/frontend/javascript/ui-slider/">
2324
+
2325
+
2326
+ <span class="nav-tree__text">
2327
+ ui/slider
2328
+ </span>
2329
+
2330
+ </a>
2331
+
2332
+
2333
+ </li>
2334
+
2335
+
2336
+ <li class="nav-tree__item ">
2337
+
2338
+ <a class="nav-tree__link " href="/frontend/javascript/ui-tabs/">
2339
+
2340
+
2341
+ <span class="nav-tree__text">
2342
+ ui/tabs
2343
+ </span>
2344
+
2345
+ </a>
2346
+
2347
+
2348
+ </li>
2349
+
2350
+
2351
+ <li class="nav-tree__item ">
2352
+
2353
+ <a class="nav-tree__link " href="/frontend/javascript/ui-theme-toggle/">
2354
+
2355
+
2356
+ <span class="nav-tree__text">
2357
+ ui/theme-toggle
2358
+ </span>
2359
+
2360
+ </a>
2361
+
2362
+
2363
+ </li>
2364
+
2365
+
2366
+ <li class="nav-tree__item ">
2367
+
2368
+ <a class="nav-tree__link " href="/frontend/javascript/ui-tooltip/">
2369
+
2370
+
2371
+ <span class="nav-tree__text">
2372
+ ui/tooltip
2373
+ </span>
2374
+
2375
+ </a>
2376
+
2377
+
2378
+ </li>
2379
+
2380
+
2381
+ <li class="nav-tree__item ">
2382
+
2383
+ <a class="nav-tree__link " href="/frontend/javascript/utils-class-logger/">
2384
+
2385
+
2386
+ <span class="nav-tree__text">
2387
+ utils/class-logger
2388
+ </span>
2389
+
2390
+ </a>
2391
+
2392
+
2393
+ </li>
2394
+
2395
+
2396
+ <li class="nav-tree__item ">
2397
+
2398
+ <a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
2399
+
2400
+
2401
+ <span class="nav-tree__text">
2402
+ utils/dom
2403
+ </span>
2404
+
2405
+ </a>
2406
+
2407
+
2408
+ </li>
2409
+
2410
+
2411
+ <li class="nav-tree__item ">
2412
+
2413
+ <a class="nav-tree__link " href="/frontend/javascript/utils-file-save/">
2414
+
2415
+
2416
+ <span class="nav-tree__text">
2417
+ utils/file-save
2418
+ </span>
2419
+
2420
+ </a>
2421
+
2422
+
2423
+ </li>
2424
+
2425
+
2426
+ <li class="nav-tree__item ">
2427
+
2428
+ <a class="nav-tree__link " href="/frontend/javascript/utils-floating-ui/">
2429
+
2430
+
2431
+ <span class="nav-tree__text">
2432
+ utils/floating-ui
2433
+ </span>
2434
+
2435
+ </a>
2436
+
2437
+
2438
+ </li>
2439
+
2440
+
2441
+ <li class="nav-tree__item ">
2442
+
2443
+ <a class="nav-tree__link " href="/frontend/javascript/utils-id/">
2444
+
2445
+
2446
+ <span class="nav-tree__text">
2447
+ utils/id
2448
+ </span>
2449
+
2450
+ </a>
2451
+
2452
+
2453
+ </li>
2454
+
2455
+
2456
+ <li class="nav-tree__item ">
2457
+
2458
+ <a class="nav-tree__link " href="/frontend/javascript/utils-pause-youtube-video/">
2459
+
2460
+
2461
+ <span class="nav-tree__text">
2462
+ utils/pause-youtube-video
2463
+ </span>
2464
+
2465
+ </a>
2466
+
2467
+
2468
+ </li>
2469
+
2470
+ </ul>
2471
+
2472
+ </details>
2473
+ </li>
2474
+
2475
+
2476
+ <li class="nav-tree__item nav-tree__item--separator-before">
2477
+
2478
+ <a class="nav-tree__link " href="/frontend/changelog/">
2479
+
2480
+
2481
+ <span class="nav-tree__icon fas fa-clock-rotate-left" aria-hidden="true"></span>
2482
+
2483
+ <span class="nav-tree__text">
2484
+ Changelog
2485
+ </span>
2486
+
2487
+ </a>
2488
+
2489
+
2490
+ </li>
2491
+
2492
+ </ul>
2493
+
2494
+ </div>
2495
+ <div id="mobile-menu" data-ulu-modal-builder='{
2496
+ "title" : "Menu",
2497
+ "position" : "right"
2498
+ }'>
2499
+
2500
+ <ul class="nav-tree" data-menu-depth="1">
2501
+
2502
+
2503
+ <li class="nav-tree__item ">
2504
+ <details class="nav-tree__collapsible">
2505
+ <summary class="nav-tree__toggle">
2506
+
2507
+ <span class="nav-tree__toggle-content">
2508
+
2509
+
2510
+ <span class="nav-tree__icon fas fa-book" aria-hidden="true"></span>
2511
+
2512
+ <span class="nav-tree__text">
2513
+ Guide
2514
+ </span>
2515
+
2516
+ </span>
2517
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
2518
+
2519
+ </summary>
2520
+
2521
+ <ul class="nav-tree" data-menu-depth="2">
2522
+
2523
+
2524
+ <li class="nav-tree__item ">
2525
+
2526
+ <a class="nav-tree__link " href="/frontend/guide/building-stylesheet/">
2527
+
2528
+
2529
+ <span class="nav-tree__text">
2530
+ Building a Stylesheet
2531
+ </span>
2532
+
2533
+ </a>
2534
+
2535
+
2536
+ </li>
2537
+
2538
+
2539
+ <li class="nav-tree__item ">
2540
+
2541
+ <a class="nav-tree__link " href="/frontend/guide/developing-ulu-scss-module/">
2542
+
2543
+
2544
+ <span class="nav-tree__text">
2545
+ Developing Ulu SCSS Module
2546
+ </span>
2547
+
2548
+ </a>
2549
+
2550
+
2551
+ </li>
2552
+
2553
+ </ul>
2554
+
2555
+ </details>
2556
+ </li>
2557
+
2558
+
2559
+ <li class="nav-tree__item is-active-trail ">
2560
+ <details class="nav-tree__collapsible" open="">
2561
+ <summary class="nav-tree__toggle">
2562
+
2563
+ <span class="nav-tree__toggle-content">
2564
+
2565
+
2566
+ <span class="nav-tree__icon fas fa-vial" aria-hidden="true"></span>
2567
+
2568
+ <span class="nav-tree__text">
2569
+ Demos
2570
+ </span>
2571
+
2572
+ </span>
2573
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
2574
+
2575
+ </summary>
2576
+
2577
+ <ul class="nav-tree" data-menu-depth="2">
2578
+
2579
+
2580
+ <li class="nav-tree__item ">
2581
+
2582
+ <a class="nav-tree__link " href="/frontend/demos/accordion/">
2583
+
2584
+
2585
+ <span class="nav-tree__text">
2586
+ Accordion
2587
+ </span>
2588
+
2589
+ </a>
2590
+
2591
+
2592
+ </li>
2593
+
2594
+
2595
+ <li class="nav-tree__item ">
2596
+
2597
+ <a class="nav-tree__link " href="/frontend/demos/basic-hero/">
2598
+
2599
+
2600
+ <span class="nav-tree__text">
2601
+ Basic Hero
2602
+ </span>
2603
+
2604
+ </a>
2605
+
2606
+
2607
+ </li>
2608
+
2609
+
2610
+ <li class="nav-tree__item ">
2611
+
2612
+ <a class="nav-tree__link " href="/frontend/demos/button/">
2613
+
2614
+
2615
+ <span class="nav-tree__text">
2616
+ Button
2617
+ </span>
2618
+
2619
+ </a>
2620
+
2621
+
2622
+ </li>
2623
+
2624
+
2625
+ <li class="nav-tree__item ">
2626
+
2627
+ <a class="nav-tree__link " href="/frontend/demos/callout/">
2628
+
2629
+
2630
+ <span class="nav-tree__text">
2631
+ Callout
2632
+ </span>
2633
+
2634
+ </a>
2635
+
2636
+
2637
+ </li>
2638
+
2639
+
2640
+ <li class="nav-tree__item ">
2641
+
2642
+ <a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
2643
+
2644
+
2645
+ <span class="nav-tree__text">
2646
+ Captioned Figure
2647
+ </span>
2648
+
2649
+ </a>
2650
+
2651
+
2652
+ </li>
2653
+
2654
+
2655
+ <li class="nav-tree__item ">
2656
+
2657
+ <a class="nav-tree__link " href="/frontend/demos/card/">
2658
+
2659
+
2660
+ <span class="nav-tree__text">
2661
+ Card
2662
+ </span>
2663
+
2664
+ </a>
2665
+
2666
+
2667
+ </li>
2668
+
2669
+
2670
+ <li class="nav-tree__item ">
2671
+
2672
+ <a class="nav-tree__link " href="/frontend/demos/css-icons/">
2673
+
2674
+
2675
+ <span class="nav-tree__text">
2676
+ CSS Icons
2677
+ </span>
2678
+
2679
+ </a>
2680
+
2681
+
2682
+ </li>
2683
+
2684
+
2685
+ <li class="nav-tree__item ">
2686
+
2687
+ <a class="nav-tree__link " href="/frontend/demos/data-grid/">
2688
+
2689
+
2690
+ <span class="nav-tree__text">
2691
+ Data grid
2692
+ </span>
2693
+
2694
+ </a>
2695
+
2696
+
2697
+ </li>
2698
+
2699
+
2700
+ <li class="nav-tree__item ">
2701
+
2702
+ <a class="nav-tree__link " href="/frontend/demos/data-table/">
2703
+
2704
+
2705
+ <span class="nav-tree__text">
2706
+ Data Table
2707
+ </span>
2708
+
2709
+ </a>
2710
+
2711
+
2712
+ </li>
2713
+
2714
+
2715
+ <li class="nav-tree__item ">
2716
+
2717
+ <a class="nav-tree__link " href="/frontend/demos/details-group/">
2718
+
2719
+
2720
+ <span class="nav-tree__text">
2721
+ Details Group
2722
+ </span>
2723
+
2724
+ </a>
2725
+
2726
+
2727
+ </li>
2728
+
2729
+
2730
+ <li class="nav-tree__item ">
2731
+
2732
+ <a class="nav-tree__link " href="/frontend/demos/file-save/">
2733
+
2734
+
2735
+ <span class="nav-tree__text">
2736
+ File Save
2737
+ </span>
2738
+
2739
+ </a>
2740
+
2741
+
2742
+ </li>
2743
+
2744
+
2745
+ <li class="nav-tree__item ">
2746
+
2747
+ <a class="nav-tree__link " href="/frontend/demos/flipcard/">
2748
+
2749
+
2750
+ <span class="nav-tree__text">
2751
+ Flip Card
2752
+ </span>
2753
+
2754
+ </a>
2755
+
2756
+
2757
+ </li>
2758
+
2759
+
2760
+ <li class="nav-tree__item ">
2761
+
2762
+ <a class="nav-tree__link " href="/frontend/demos/form-theme/">
2763
+
2764
+
2765
+ <span class="nav-tree__text">
2766
+ Form Theme
2767
+ </span>
2768
+
2769
+ </a>
2770
+
2771
+
2772
+ </li>
2773
+
2774
+
2775
+ <li class="nav-tree__item ">
2776
+
2777
+ <a class="nav-tree__link " href="/frontend/demos/hero/">
2778
+
2779
+
2780
+ <span class="nav-tree__text">
2781
+ Hero
2782
+ </span>
2783
+
2784
+ </a>
2785
+
2786
+
2787
+ </li>
2788
+
2789
+
2790
+ <li class="nav-tree__item ">
2791
+
2792
+ <a class="nav-tree__link " href="/frontend/demos/image-grid/">
2793
+
2794
+
2795
+ <span class="nav-tree__text">
2796
+ Image Grid
2797
+ </span>
2798
+
2799
+ </a>
2800
+
2801
+
2802
+ </li>
2803
+
2804
+
2805
+ <li class="nav-tree__item ">
2806
+
2807
+ <a class="nav-tree__link " href="/frontend/demos/list-inline/">
2808
+
2809
+
2810
+ <span class="nav-tree__text">
2811
+ List Inline
2812
+ </span>
2813
+
2814
+ </a>
2815
+
2816
+
2817
+ </li>
2818
+
2819
+
2820
+ <li class="nav-tree__item ">
2821
+
2822
+ <a class="nav-tree__link " href="/frontend/demos/list-lines/">
2823
+
2824
+
2825
+ <span class="nav-tree__text">
2826
+ List Lines
2827
+ </span>
2828
+
2829
+ </a>
2830
+
2831
+
2832
+ </li>
2833
+
2834
+
2835
+ <li class="nav-tree__item ">
2836
+
2837
+ <a class="nav-tree__link " href="/frontend/demos/menu-stack/">
2838
+
2839
+
2840
+ <span class="nav-tree__text">
2841
+ Menu Stack
2842
+ </span>
2843
+
2844
+ </a>
2845
+
2846
+
2847
+ </li>
2848
+
2849
+
2850
+ <li class="nav-tree__item ">
2851
+
2852
+ <a class="nav-tree__link " href="/frontend/demos/modals/">
2853
+
2854
+
2855
+ <span class="nav-tree__text">
2856
+ Modals
2857
+ </span>
2858
+
2859
+ </a>
2860
+
2861
+
2862
+ </li>
2863
+
2864
+
2865
+ <li class="nav-tree__item ">
2866
+
2867
+ <a class="nav-tree__link " href="/frontend/demos/nav-strip/">
2868
+
2869
+
2870
+ <span class="nav-tree__text">
2871
+ Nav Strip
2872
+ </span>
2873
+
2874
+ </a>
2875
+
2876
+
2877
+ </li>
2878
+
2879
+
2880
+ <li class="nav-tree__item ">
2881
+
2882
+ <a class="nav-tree__link " href="/frontend/demos/overlay-section/">
2883
+
2884
+
2885
+ <span class="nav-tree__text">
2886
+ Overlay Section
2887
+ </span>
2888
+
2889
+ </a>
2890
+
2891
+
2892
+ </li>
2893
+
2894
+
2895
+ <li class="nav-tree__item ">
2896
+
2897
+ <a class="nav-tree__link " href="/frontend/demos/popovers/">
2898
+
2899
+
2900
+ <span class="nav-tree__text">
2901
+ Popovers
2902
+ </span>
2903
+
2904
+ </a>
2905
+
2906
+
2907
+ </li>
2908
+
2909
+
2910
+ <li class="nav-tree__item ">
2911
+
2912
+ <a class="nav-tree__link " href="/frontend/demos/print/">
2913
+
2914
+
2915
+ <span class="nav-tree__text">
2916
+ Print
2917
+ </span>
2918
+
2919
+ </a>
2920
+
2921
+
2922
+ </li>
2923
+
2924
+
2925
+ <li class="nav-tree__item ">
2926
+
2927
+ <a class="nav-tree__link " href="/frontend/demos/pull-quote/">
2928
+
2929
+
2930
+ <span class="nav-tree__text">
2931
+ Pull Quote
2932
+ </span>
2933
+
2934
+ </a>
2935
+
2936
+
2937
+ </li>
2938
+
2939
+
2940
+ <li class="nav-tree__item ">
2941
+
2942
+ <a class="nav-tree__link " href="/frontend/demos/rule/">
2943
+
2944
+
2945
+ <span class="nav-tree__text">
2946
+ Rule
2947
+ </span>
2948
+
2949
+ </a>
2950
+
2951
+
2952
+ </li>
2953
+
2954
+
2955
+ <li class="nav-tree__item ">
2956
+
2957
+ <a class="nav-tree__link " href="/frontend/demos/scroll-slider/">
2958
+
2959
+
2960
+ <span class="nav-tree__text">
2961
+ Scroll Slider
2962
+ </span>
2963
+
2964
+ </a>
2965
+
2966
+
2967
+ </li>
2968
+
2969
+
2970
+ <li class="nav-tree__item ">
2971
+
2972
+ <a class="nav-tree__link " href="/frontend/demos/scrollpoints/">
2973
+
2974
+
2975
+ <span class="nav-tree__text">
2976
+ Scrollpoints
2977
+ </span>
2978
+
2979
+ </a>
2980
+
2981
+
2982
+ </li>
2983
+
2984
+
2985
+ <li class="nav-tree__item ">
2986
+
2987
+ <a class="nav-tree__link " href="/frontend/demos/slider/">
2988
+
2989
+
2990
+ <span class="nav-tree__text">
2991
+ Slider
2992
+ </span>
2993
+
2994
+ </a>
2995
+
2996
+
2997
+ </li>
2998
+
2999
+
3000
+ <li class="nav-tree__item ">
3001
+
3002
+ <a class="nav-tree__link " href="/frontend/demos/spoke-spinner/">
3003
+
3004
+
3005
+ <span class="nav-tree__text">
3006
+ Spoke Spinner
3007
+ </span>
3008
+
3009
+ </a>
3010
+
3011
+
3012
+ </li>
3013
+
3014
+
3015
+ <li class="nav-tree__item ">
3016
+
3017
+ <a class="nav-tree__link " href="/frontend/demos/tabs/">
3018
+
3019
+
3020
+ <span class="nav-tree__text">
3021
+ Tabs
3022
+ </span>
3023
+
3024
+ </a>
3025
+
3026
+
3027
+ </li>
3028
+
3029
+
3030
+ <li class="nav-tree__item ">
3031
+
3032
+ <a class="nav-tree__link " href="/frontend/demos/tag/">
3033
+
3034
+
3035
+ <span class="nav-tree__text">
3036
+ Tag
3037
+ </span>
3038
+
3039
+ </a>
3040
+
3041
+
3042
+ </li>
3043
+
3044
+
3045
+ <li class="nav-tree__item is-active is-active-trail ">
3046
+
3047
+ <a class="nav-tree__link is-active is-active-trail" href="/frontend/demos/theme-toggle/" aria-current="page">
3048
+
3049
+
3050
+ <span class="nav-tree__text">
3051
+ Theme Toggle
3052
+ </span>
3053
+
3054
+ </a>
3055
+
3056
+
3057
+ </li>
3058
+
3059
+
3060
+ <li class="nav-tree__item ">
3061
+
3062
+ <a class="nav-tree__link " href="/frontend/demos/tile-grid-overlay/">
3063
+
3064
+
3065
+ <span class="nav-tree__text">
3066
+ Tile Grid Overlay
3067
+ </span>
3068
+
3069
+ </a>
3070
+
3071
+
3072
+ </li>
3073
+
3074
+
3075
+ <li class="nav-tree__item ">
3076
+
3077
+ <a class="nav-tree__link " href="/frontend/demos/tiles/">
3078
+
3079
+
3080
+ <span class="nav-tree__text">
3081
+ Tiles
3082
+ </span>
3083
+
3084
+ </a>
3085
+
3086
+
3087
+ </li>
3088
+
3089
+
3090
+ <li class="nav-tree__item ">
3091
+
3092
+ <a class="nav-tree__link " href="/frontend/demos/tooltip/">
3093
+
3094
+
3095
+ <span class="nav-tree__text">
3096
+ Tooltip
3097
+ </span>
3098
+
3099
+ </a>
3100
+
3101
+
3102
+ </li>
3103
+
3104
+ </ul>
3105
+
3106
+ </details>
3107
+ </li>
3108
+
3109
+
3110
+ <li class="nav-tree__item ">
3111
+ <details class="nav-tree__collapsible">
3112
+ <summary class="nav-tree__toggle">
3113
+
3114
+ <span class="nav-tree__toggle-content">
3115
+
3116
+
3117
+ <span class="nav-tree__icon fab fa-sass" aria-hidden="true"></span>
3118
+
3119
+ <span class="nav-tree__text">
3120
+ Sass API
3121
+ </span>
3122
+
3123
+ </span>
3124
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
3125
+
3126
+ </summary>
3127
+
3128
+ <ul class="nav-tree" data-menu-depth="2">
3129
+
3130
+ <li class="nav-tree__item ">
3131
+
3132
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/">
3133
+
3134
+
3135
+ <span class="nav-tree__text">
3136
+ Introduction
3137
+ </span>
3138
+
3139
+ </a>
3140
+
3141
+
3142
+ </li>
3143
+
3144
+
3145
+ <li class="nav-tree__item ">
3146
+ <details class="nav-tree__collapsible">
3147
+ <summary class="nav-tree__toggle">
3148
+
3149
+ <span class="nav-tree__toggle-content">
3150
+
3151
+
3152
+ <span class="nav-tree__text">
3153
+ Core
3154
+ </span>
3155
+
3156
+ </span>
3157
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
3158
+
3159
+ </summary>
3160
+
3161
+ <ul class="nav-tree" data-menu-depth="3">
3162
+
3163
+ <li class="nav-tree__item ">
3164
+
3165
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/core/">
3166
+
3167
+
3168
+ <span class="nav-tree__text">
3169
+ Introduction
3170
+ </span>
3171
+
3172
+ </a>
3173
+
3174
+
3175
+ </li>
3176
+
3177
+
3178
+ <li class="nav-tree__item ">
3179
+
3180
+ <a class="nav-tree__link " href="/frontend/sass/core/breakpoint/">
3181
+
3182
+
3183
+ <span class="nav-tree__text">
3184
+ Breakpoint
3185
+ </span>
3186
+
3187
+ </a>
3188
+
3189
+
3190
+ </li>
3191
+
3192
+
3193
+ <li class="nav-tree__item ">
3194
+
3195
+ <a class="nav-tree__link " href="/frontend/sass/core/button/">
3196
+
3197
+
3198
+ <span class="nav-tree__text">
3199
+ Button
3200
+ </span>
3201
+
3202
+ </a>
3203
+
3204
+
3205
+ </li>
3206
+
3207
+
3208
+ <li class="nav-tree__item ">
3209
+
3210
+ <a class="nav-tree__link " href="/frontend/sass/core/color/">
3211
+
3212
+
3213
+ <span class="nav-tree__text">
3214
+ Color
3215
+ </span>
3216
+
3217
+ </a>
3218
+
3219
+
3220
+ </li>
3221
+
3222
+
3223
+ <li class="nav-tree__item ">
3224
+
3225
+ <a class="nav-tree__link " href="/frontend/sass/core/cssvar/">
3226
+
3227
+
3228
+ <span class="nav-tree__text">
3229
+ Cssvar
3230
+ </span>
3231
+
3232
+ </a>
3233
+
3234
+
3235
+ </li>
3236
+
3237
+
3238
+ <li class="nav-tree__item ">
3239
+
3240
+ <a class="nav-tree__link " href="/frontend/sass/core/element/">
3241
+
3242
+
3243
+ <span class="nav-tree__text">
3244
+ Element
3245
+ </span>
3246
+
3247
+ </a>
3248
+
3249
+
3250
+ </li>
3251
+
3252
+
3253
+ <li class="nav-tree__item ">
3254
+
3255
+ <a class="nav-tree__link " href="/frontend/sass/core/layout/">
3256
+
3257
+
3258
+ <span class="nav-tree__text">
3259
+ Layout
3260
+ </span>
3261
+
3262
+ </a>
3263
+
3264
+
3265
+ </li>
3266
+
3267
+
3268
+ <li class="nav-tree__item ">
3269
+
3270
+ <a class="nav-tree__link " href="/frontend/sass/core/path/">
3271
+
3272
+
3273
+ <span class="nav-tree__text">
3274
+ Path
3275
+ </span>
3276
+
3277
+ </a>
3278
+
3279
+
3280
+ </li>
3281
+
3282
+
3283
+ <li class="nav-tree__item ">
3284
+
3285
+ <a class="nav-tree__link " href="/frontend/sass/core/selector/">
3286
+
3287
+
3288
+ <span class="nav-tree__text">
3289
+ Selector
3290
+ </span>
3291
+
3292
+ </a>
3293
+
3294
+
3295
+ </li>
3296
+
3297
+
3298
+ <li class="nav-tree__item ">
3299
+
3300
+ <a class="nav-tree__link " href="/frontend/sass/core/typography/">
3301
+
3302
+
3303
+ <span class="nav-tree__text">
3304
+ Typography
3305
+ </span>
3306
+
3307
+ </a>
3308
+
3309
+
3310
+ </li>
3311
+
3312
+
3313
+ <li class="nav-tree__item ">
3314
+
3315
+ <a class="nav-tree__link " href="/frontend/sass/core/units/">
3316
+
3317
+
3318
+ <span class="nav-tree__text">
3319
+ Units
3320
+ </span>
3321
+
3322
+ </a>
3323
+
3324
+
3325
+ </li>
3326
+
3327
+
3328
+ <li class="nav-tree__item ">
3329
+
3330
+ <a class="nav-tree__link " href="/frontend/sass/core/utils/">
3331
+
3332
+
3333
+ <span class="nav-tree__text">
3334
+ Utils
3335
+ </span>
3336
+
3337
+ </a>
3338
+
3339
+
3340
+ </li>
3341
+
3342
+ </ul>
3343
+
3344
+ </details>
3345
+ </li>
3346
+
3347
+
3348
+ <li class="nav-tree__item ">
3349
+ <details class="nav-tree__collapsible">
3350
+ <summary class="nav-tree__toggle">
3351
+
3352
+ <span class="nav-tree__toggle-content">
3353
+
3354
+
3355
+ <span class="nav-tree__text">
3356
+ Base
3357
+ </span>
3358
+
3359
+ </span>
3360
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
3361
+
3362
+ </summary>
3363
+
3364
+ <ul class="nav-tree" data-menu-depth="3">
3365
+
3366
+ <li class="nav-tree__item ">
3367
+
3368
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/base/">
3369
+
3370
+
3371
+ <span class="nav-tree__text">
3372
+ Introduction
3373
+ </span>
3374
+
3375
+ </a>
3376
+
3377
+
3378
+ </li>
3379
+
3380
+
3381
+ <li class="nav-tree__item ">
3382
+
3383
+ <a class="nav-tree__link " href="/frontend/sass/base/color/">
3384
+
3385
+
3386
+ <span class="nav-tree__text">
3387
+ Color
3388
+ </span>
3389
+
3390
+ </a>
3391
+
3392
+
3393
+ </li>
3394
+
3395
+
3396
+ <li class="nav-tree__item ">
3397
+
3398
+ <a class="nav-tree__link " href="/frontend/sass/base/elements/">
3399
+
3400
+
3401
+ <span class="nav-tree__text">
3402
+ Elements
3403
+ </span>
3404
+
3405
+ </a>
3406
+
3407
+
3408
+ </li>
3409
+
3410
+
3411
+ <li class="nav-tree__item ">
3412
+
3413
+ <a class="nav-tree__link " href="/frontend/sass/base/index/">
3414
+
3415
+
3416
+ <span class="nav-tree__text">
3417
+ Index
3418
+ </span>
3419
+
3420
+ </a>
3421
+
3422
+
3423
+ </li>
3424
+
3425
+
3426
+ <li class="nav-tree__item ">
3427
+
3428
+ <a class="nav-tree__link " href="/frontend/sass/base/keyframes/">
3429
+
3430
+
3431
+ <span class="nav-tree__text">
3432
+ Keyframes
3433
+ </span>
3434
+
3435
+ </a>
3436
+
3437
+
3438
+ </li>
3439
+
3440
+
3441
+ <li class="nav-tree__item ">
3442
+
3443
+ <a class="nav-tree__link " href="/frontend/sass/base/layout/">
3444
+
3445
+
3446
+ <span class="nav-tree__text">
3447
+ Layout
3448
+ </span>
3449
+
3450
+ </a>
3451
+
3452
+
3453
+ </li>
3454
+
3455
+
3456
+ <li class="nav-tree__item ">
3457
+
3458
+ <a class="nav-tree__link " href="/frontend/sass/base/normalize/">
3459
+
3460
+
3461
+ <span class="nav-tree__text">
3462
+ Normalize
3463
+ </span>
3464
+
3465
+ </a>
3466
+
3467
+
3468
+ </li>
3469
+
3470
+
3471
+ <li class="nav-tree__item ">
3472
+
3473
+ <a class="nav-tree__link " href="/frontend/sass/base/print/">
3474
+
3475
+
3476
+ <span class="nav-tree__text">
3477
+ Print
3478
+ </span>
3479
+
3480
+ </a>
3481
+
3482
+
3483
+ </li>
3484
+
3485
+
3486
+ <li class="nav-tree__item ">
3487
+
3488
+ <a class="nav-tree__link " href="/frontend/sass/base/root/">
3489
+
3490
+
3491
+ <span class="nav-tree__text">
3492
+ Root
3493
+ </span>
3494
+
3495
+ </a>
3496
+
3497
+
3498
+ </li>
3499
+
3500
+
3501
+ <li class="nav-tree__item ">
3502
+
3503
+ <a class="nav-tree__link " href="/frontend/sass/base/typography/">
3504
+
3505
+
3506
+ <span class="nav-tree__text">
3507
+ Typography
3508
+ </span>
3509
+
3510
+ </a>
3511
+
3512
+
3513
+ </li>
3514
+
3515
+ </ul>
3516
+
3517
+ </details>
3518
+ </li>
3519
+
3520
+
3521
+ <li class="nav-tree__item ">
3522
+ <details class="nav-tree__collapsible">
3523
+ <summary class="nav-tree__toggle">
3524
+
3525
+ <span class="nav-tree__toggle-content">
3526
+
3527
+
3528
+ <span class="nav-tree__text">
3529
+ Components
3530
+ </span>
3531
+
3532
+ </span>
3533
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
3534
+
3535
+ </summary>
3536
+
3537
+ <ul class="nav-tree" data-menu-depth="3">
3538
+
3539
+ <li class="nav-tree__item ">
3540
+
3541
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
3542
+
3543
+
3544
+ <span class="nav-tree__text">
3545
+ Introduction
3546
+ </span>
3547
+
3548
+ </a>
3549
+
3550
+
3551
+ </li>
3552
+
3553
+
3554
+ <li class="nav-tree__item ">
3555
+
3556
+ <a class="nav-tree__link " href="/frontend/sass/components/accordion/">
3557
+
3558
+
3559
+ <span class="nav-tree__text">
3560
+ Accordion
3561
+ </span>
3562
+
3563
+ </a>
3564
+
3565
+
3566
+ </li>
3567
+
3568
+
3569
+ <li class="nav-tree__item ">
3570
+
3571
+ <a class="nav-tree__link " href="/frontend/sass/components/adaptive-spacing/">
3572
+
3573
+
3574
+ <span class="nav-tree__text">
3575
+ Adaptive-spacing
3576
+ </span>
3577
+
3578
+ </a>
3579
+
3580
+
3581
+ </li>
3582
+
3583
+
3584
+ <li class="nav-tree__item ">
3585
+
3586
+ <a class="nav-tree__link " href="/frontend/sass/components/badge/">
3587
+
3588
+
3589
+ <span class="nav-tree__text">
3590
+ Badge
3591
+ </span>
3592
+
3593
+ </a>
3594
+
3595
+
3596
+ </li>
3597
+
3598
+
3599
+ <li class="nav-tree__item ">
3600
+
3601
+ <a class="nav-tree__link " href="/frontend/sass/components/basic-hero/">
3602
+
3603
+
3604
+ <span class="nav-tree__text">
3605
+ Basic-hero
3606
+ </span>
3607
+
3608
+ </a>
3609
+
3610
+
3611
+ </li>
3612
+
3613
+
3614
+ <li class="nav-tree__item ">
3615
+
3616
+ <a class="nav-tree__link " href="/frontend/sass/components/button/">
3617
+
3618
+
3619
+ <span class="nav-tree__text">
3620
+ Button
3621
+ </span>
3622
+
3623
+ </a>
3624
+
3625
+
3626
+ </li>
3627
+
3628
+
3629
+ <li class="nav-tree__item ">
3630
+
3631
+ <a class="nav-tree__link " href="/frontend/sass/components/button-verbose/">
3632
+
3633
+
3634
+ <span class="nav-tree__text">
3635
+ Button-verbose
3636
+ </span>
3637
+
3638
+ </a>
3639
+
3640
+
3641
+ </li>
3642
+
3643
+
3644
+ <li class="nav-tree__item ">
3645
+
3646
+ <a class="nav-tree__link " href="/frontend/sass/components/callout/">
3647
+
3648
+
3649
+ <span class="nav-tree__text">
3650
+ Callout
3651
+ </span>
3652
+
3653
+ </a>
3654
+
3655
+
3656
+ </li>
3657
+
3658
+
3659
+ <li class="nav-tree__item ">
3660
+
3661
+ <a class="nav-tree__link " href="/frontend/sass/components/captioned-figure/">
3662
+
3663
+
3664
+ <span class="nav-tree__text">
3665
+ Captioned-figure
3666
+ </span>
3667
+
3668
+ </a>
3669
+
3670
+
3671
+ </li>
3672
+
3673
+
3674
+ <li class="nav-tree__item ">
3675
+
3676
+ <a class="nav-tree__link " href="/frontend/sass/components/card/">
3677
+
3678
+
3679
+ <span class="nav-tree__text">
3680
+ Card
3681
+ </span>
3682
+
3683
+ </a>
3684
+
3685
+
3686
+ </li>
3687
+
3688
+
3689
+ <li class="nav-tree__item ">
3690
+
3691
+ <a class="nav-tree__link " href="/frontend/sass/components/card-grid/">
3692
+
3693
+
3694
+ <span class="nav-tree__text">
3695
+ Card-grid
3696
+ </span>
3697
+
3698
+ </a>
3699
+
3700
+
3701
+ </li>
3702
+
3703
+
3704
+ <li class="nav-tree__item ">
3705
+
3706
+ <a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
3707
+
3708
+
3709
+ <span class="nav-tree__text">
3710
+ Css-icon
3711
+ </span>
3712
+
3713
+ </a>
3714
+
3715
+
3716
+ </li>
3717
+
3718
+
3719
+ <li class="nav-tree__item ">
3720
+
3721
+ <a class="nav-tree__link " href="/frontend/sass/components/data-grid/">
3722
+
3723
+
3724
+ <span class="nav-tree__text">
3725
+ Data-grid
3726
+ </span>
3727
+
3728
+ </a>
3729
+
3730
+
3731
+ </li>
3732
+
3733
+
3734
+ <li class="nav-tree__item ">
3735
+
3736
+ <a class="nav-tree__link " href="/frontend/sass/components/data-table/">
3737
+
3738
+
3739
+ <span class="nav-tree__text">
3740
+ Data-table
3741
+ </span>
3742
+
3743
+ </a>
3744
+
3745
+
3746
+ </li>
3747
+
3748
+
3749
+ <li class="nav-tree__item ">
3750
+
3751
+ <a class="nav-tree__link " href="/frontend/sass/components/fill-context/">
3752
+
3753
+
3754
+ <span class="nav-tree__text">
3755
+ Fill-context
3756
+ </span>
3757
+
3758
+ </a>
3759
+
3760
+
3761
+ </li>
3762
+
3763
+
3764
+ <li class="nav-tree__item ">
3765
+
3766
+ <a class="nav-tree__link " href="/frontend/sass/components/flipcard/">
3767
+
3768
+
3769
+ <span class="nav-tree__text">
3770
+ Flipcard
3771
+ </span>
3772
+
3773
+ </a>
3774
+
3775
+
3776
+ </li>
3777
+
3778
+
3779
+ <li class="nav-tree__item ">
3780
+
3781
+ <a class="nav-tree__link " href="/frontend/sass/components/flipcard-grid/">
3782
+
3783
+
3784
+ <span class="nav-tree__text">
3785
+ Flipcard-grid
3786
+ </span>
3787
+
3788
+ </a>
3789
+
3790
+
3791
+ </li>
3792
+
3793
+
3794
+ <li class="nav-tree__item ">
3795
+
3796
+ <a class="nav-tree__link " href="/frontend/sass/components/form-theme/">
3797
+
3798
+
3799
+ <span class="nav-tree__text">
3800
+ Form-theme
3801
+ </span>
3802
+
3803
+ </a>
3804
+
3805
+
3806
+ </li>
3807
+
3808
+
3809
+ <li class="nav-tree__item ">
3810
+
3811
+ <a class="nav-tree__link " href="/frontend/sass/components/hero/">
3812
+
3813
+
3814
+ <span class="nav-tree__text">
3815
+ Hero
3816
+ </span>
3817
+
3818
+ </a>
3819
+
3820
+
3821
+ </li>
3822
+
3823
+
3824
+ <li class="nav-tree__item ">
3825
+
3826
+ <a class="nav-tree__link " href="/frontend/sass/components/horizontal-rule/">
3827
+
3828
+
3829
+ <span class="nav-tree__text">
3830
+ Horizontal-rule
3831
+ </span>
3832
+
3833
+ </a>
3834
+
3835
+
3836
+ </li>
3837
+
3838
+
3839
+ <li class="nav-tree__item ">
3840
+
3841
+ <a class="nav-tree__link " href="/frontend/sass/components/image-grid/">
3842
+
3843
+
3844
+ <span class="nav-tree__text">
3845
+ Image-grid
3846
+ </span>
3847
+
3848
+ </a>
3849
+
3850
+
3851
+ </li>
3852
+
3853
+
3854
+ <li class="nav-tree__item ">
3855
+
3856
+ <a class="nav-tree__link " href="/frontend/sass/components/index/">
3857
+
3858
+
3859
+ <span class="nav-tree__text">
3860
+ Index
3861
+ </span>
3862
+
3863
+ </a>
3864
+
3865
+
3866
+ </li>
3867
+
3868
+
3869
+ <li class="nav-tree__item ">
3870
+
3871
+ <a class="nav-tree__link " href="/frontend/sass/components/links/">
3872
+
3873
+
3874
+ <span class="nav-tree__text">
3875
+ Links
3876
+ </span>
3877
+
3878
+ </a>
3879
+
3880
+
3881
+ </li>
3882
+
3883
+
3884
+ <li class="nav-tree__item ">
3885
+
3886
+ <a class="nav-tree__link " href="/frontend/sass/components/list-inline/">
3887
+
3888
+
3889
+ <span class="nav-tree__text">
3890
+ List-inline
3891
+ </span>
3892
+
3893
+ </a>
3894
+
3895
+
3896
+ </li>
3897
+
3898
+
3899
+ <li class="nav-tree__item ">
3900
+
3901
+ <a class="nav-tree__link " href="/frontend/sass/components/list-lines/">
3902
+
3903
+
3904
+ <span class="nav-tree__text">
3905
+ List-lines
3906
+ </span>
3907
+
3908
+ </a>
3909
+
3910
+
3911
+ </li>
3912
+
3913
+
3914
+ <li class="nav-tree__item ">
3915
+
3916
+ <a class="nav-tree__link " href="/frontend/sass/components/list-ordered/">
3917
+
3918
+
3919
+ <span class="nav-tree__text">
3920
+ List-ordered
3921
+ </span>
3922
+
3923
+ </a>
3924
+
3925
+
3926
+ </li>
3927
+
3928
+
3929
+ <li class="nav-tree__item ">
3930
+
3931
+ <a class="nav-tree__link " href="/frontend/sass/components/list-unordered/">
3932
+
3933
+
3934
+ <span class="nav-tree__text">
3935
+ List-unordered
3936
+ </span>
3937
+
3938
+ </a>
3939
+
3940
+
3941
+ </li>
3942
+
3943
+
3944
+ <li class="nav-tree__item ">
3945
+
3946
+ <a class="nav-tree__link " href="/frontend/sass/components/menu-stack/">
3947
+
3948
+
3949
+ <span class="nav-tree__text">
3950
+ Menu-stack
3951
+ </span>
3952
+
3953
+ </a>
3954
+
3955
+
3956
+ </li>
3957
+
3958
+
3959
+ <li class="nav-tree__item ">
3960
+
3961
+ <a class="nav-tree__link " href="/frontend/sass/components/modal/">
3962
+
3963
+
3964
+ <span class="nav-tree__text">
3965
+ Modal
3966
+ </span>
3967
+
3968
+ </a>
3969
+
3970
+
3971
+ </li>
3972
+
3973
+
3974
+ <li class="nav-tree__item ">
3975
+
3976
+ <a class="nav-tree__link " href="/frontend/sass/components/nav-strip/">
3977
+
3978
+
3979
+ <span class="nav-tree__text">
3980
+ Nav-strip
3981
+ </span>
3982
+
3983
+ </a>
3984
+
3985
+
3986
+ </li>
3987
+
3988
+
3989
+ <li class="nav-tree__item ">
3990
+
3991
+ <a class="nav-tree__link " href="/frontend/sass/components/overlay-section/">
3992
+
3993
+
3994
+ <span class="nav-tree__text">
3995
+ Overlay-section
3996
+ </span>
3997
+
3998
+ </a>
3999
+
4000
+
4001
+ </li>
4002
+
4003
+
4004
+ <li class="nav-tree__item ">
4005
+
4006
+ <a class="nav-tree__link " href="/frontend/sass/components/pager/">
4007
+
4008
+
4009
+ <span class="nav-tree__text">
4010
+ Pager
4011
+ </span>
4012
+
4013
+ </a>
4014
+
4015
+
4016
+ </li>
4017
+
4018
+
4019
+ <li class="nav-tree__item ">
4020
+
4021
+ <a class="nav-tree__link " href="/frontend/sass/components/placeholder-block/">
4022
+
4023
+
4024
+ <span class="nav-tree__text">
4025
+ Placeholder-block
4026
+ </span>
4027
+
4028
+ </a>
4029
+
4030
+
4031
+ </li>
4032
+
4033
+
4034
+ <li class="nav-tree__item ">
4035
+
4036
+ <a class="nav-tree__link " href="/frontend/sass/components/popover/">
4037
+
4038
+
4039
+ <span class="nav-tree__text">
4040
+ Popover
4041
+ </span>
4042
+
4043
+ </a>
4044
+
4045
+
4046
+ </li>
4047
+
4048
+
4049
+ <li class="nav-tree__item ">
4050
+
4051
+ <a class="nav-tree__link " href="/frontend/sass/components/pull-quote/">
4052
+
4053
+
4054
+ <span class="nav-tree__text">
4055
+ Pull-quote
4056
+ </span>
4057
+
4058
+ </a>
4059
+
4060
+
4061
+ </li>
4062
+
4063
+
4064
+ <li class="nav-tree__item ">
4065
+
4066
+ <a class="nav-tree__link " href="/frontend/sass/components/ratio-box/">
4067
+
4068
+
4069
+ <span class="nav-tree__text">
4070
+ Ratio-box
4071
+ </span>
4072
+
4073
+ </a>
4074
+
4075
+
4076
+ </li>
4077
+
4078
+
4079
+ <li class="nav-tree__item ">
4080
+
4081
+ <a class="nav-tree__link " href="/frontend/sass/components/rule/">
4082
+
4083
+
4084
+ <span class="nav-tree__text">
4085
+ Rule
4086
+ </span>
4087
+
4088
+ </a>
4089
+
4090
+
4091
+ </li>
4092
+
4093
+
4094
+ <li class="nav-tree__item ">
4095
+
4096
+ <a class="nav-tree__link " href="/frontend/sass/components/scroll-slider/">
4097
+
4098
+
4099
+ <span class="nav-tree__text">
4100
+ Scroll-slider
4101
+ </span>
4102
+
4103
+ </a>
4104
+
4105
+
4106
+ </li>
4107
+
4108
+
4109
+ <li class="nav-tree__item ">
4110
+
4111
+ <a class="nav-tree__link " href="/frontend/sass/components/skip-link/">
4112
+
4113
+
4114
+ <span class="nav-tree__text">
4115
+ Skip-link
4116
+ </span>
4117
+
4118
+ </a>
4119
+
4120
+
4121
+ </li>
4122
+
4123
+
4124
+ <li class="nav-tree__item ">
4125
+
4126
+ <a class="nav-tree__link " href="/frontend/sass/components/slider/">
4127
+
4128
+
4129
+ <span class="nav-tree__text">
4130
+ Slider
4131
+ </span>
4132
+
4133
+ </a>
4134
+
4135
+
4136
+ </li>
4137
+
4138
+
4139
+ <li class="nav-tree__item ">
4140
+
4141
+ <a class="nav-tree__link " href="/frontend/sass/components/spoke-spinner/">
4142
+
4143
+
4144
+ <span class="nav-tree__text">
4145
+ Spoke-spinner
4146
+ </span>
4147
+
4148
+ </a>
4149
+
4150
+
4151
+ </li>
4152
+
4153
+
4154
+ <li class="nav-tree__item ">
4155
+
4156
+ <a class="nav-tree__link " href="/frontend/sass/components/tabs/">
4157
+
4158
+
4159
+ <span class="nav-tree__text">
4160
+ Tabs
4161
+ </span>
4162
+
4163
+ </a>
4164
+
4165
+
4166
+ </li>
4167
+
4168
+
4169
+ <li class="nav-tree__item ">
4170
+
4171
+ <a class="nav-tree__link " href="/frontend/sass/components/tag/">
4172
+
4173
+
4174
+ <span class="nav-tree__text">
4175
+ Tag
4176
+ </span>
4177
+
4178
+ </a>
4179
+
4180
+
4181
+ </li>
4182
+
4183
+
4184
+ <li class="nav-tree__item ">
4185
+
4186
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-button/">
4187
+
4188
+
4189
+ <span class="nav-tree__text">
4190
+ Tile-button
4191
+ </span>
4192
+
4193
+ </a>
4194
+
4195
+
4196
+ </li>
4197
+
4198
+
4199
+ <li class="nav-tree__item ">
4200
+
4201
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-grid/">
4202
+
4203
+
4204
+ <span class="nav-tree__text">
4205
+ Tile-grid
4206
+ </span>
4207
+
4208
+ </a>
4209
+
4210
+
4211
+ </li>
4212
+
4213
+
4214
+ <li class="nav-tree__item ">
4215
+
4216
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-grid-overlay/">
4217
+
4218
+
4219
+ <span class="nav-tree__text">
4220
+ Tile-grid-overlay
4221
+ </span>
4222
+
4223
+ </a>
4224
+
4225
+
4226
+ </li>
4227
+
4228
+
4229
+ <li class="nav-tree__item ">
4230
+
4231
+ <a class="nav-tree__link " href="/frontend/sass/components/vignette/">
4232
+
4233
+
4234
+ <span class="nav-tree__text">
4235
+ Vignette
4236
+ </span>
4237
+
4238
+ </a>
4239
+
4240
+
4241
+ </li>
4242
+
4243
+
4244
+ <li class="nav-tree__item ">
4245
+
4246
+ <a class="nav-tree__link " href="/frontend/sass/components/wysiwyg/">
4247
+
4248
+
4249
+ <span class="nav-tree__text">
4250
+ Wysiwyg
4251
+ </span>
4252
+
4253
+ </a>
4254
+
4255
+
4256
+ </li>
4257
+
4258
+ </ul>
4259
+
4260
+ </details>
4261
+ </li>
4262
+
4263
+
4264
+ <li class="nav-tree__item ">
4265
+ <details class="nav-tree__collapsible">
4266
+ <summary class="nav-tree__toggle">
4267
+
4268
+ <span class="nav-tree__toggle-content">
4269
+
4270
+
4271
+ <span class="nav-tree__text">
4272
+ Helpers
4273
+ </span>
4274
+
4275
+ </span>
4276
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
4277
+
4278
+ </summary>
4279
+
4280
+ <ul class="nav-tree" data-menu-depth="3">
4281
+
4282
+ <li class="nav-tree__item ">
4283
+
4284
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/helpers/">
4285
+
4286
+
4287
+ <span class="nav-tree__text">
4288
+ Introduction
4289
+ </span>
4290
+
4291
+ </a>
4292
+
4293
+
4294
+ </li>
4295
+
4296
+
4297
+ <li class="nav-tree__item ">
4298
+
4299
+ <a class="nav-tree__link " href="/frontend/sass/helpers/color/">
4300
+
4301
+
4302
+ <span class="nav-tree__text">
4303
+ Color
4304
+ </span>
4305
+
4306
+ </a>
4307
+
4308
+
4309
+ </li>
4310
+
4311
+
4312
+ <li class="nav-tree__item ">
4313
+
4314
+ <a class="nav-tree__link " href="/frontend/sass/helpers/display/">
4315
+
4316
+
4317
+ <span class="nav-tree__text">
4318
+ Display
4319
+ </span>
4320
+
4321
+ </a>
4322
+
4323
+
4324
+ </li>
4325
+
4326
+
4327
+ <li class="nav-tree__item ">
4328
+
4329
+ <a class="nav-tree__link " href="/frontend/sass/helpers/index/">
4330
+
4331
+
4332
+ <span class="nav-tree__text">
4333
+ Index
4334
+ </span>
4335
+
4336
+ </a>
4337
+
4338
+
4339
+ </li>
4340
+
4341
+
4342
+ <li class="nav-tree__item ">
4343
+
4344
+ <a class="nav-tree__link " href="/frontend/sass/helpers/print/">
4345
+
4346
+
4347
+ <span class="nav-tree__text">
4348
+ Print
4349
+ </span>
4350
+
4351
+ </a>
4352
+
4353
+
4354
+ </li>
4355
+
4356
+
4357
+ <li class="nav-tree__item ">
4358
+
4359
+ <a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
4360
+
4361
+
4362
+ <span class="nav-tree__text">
4363
+ Typography
4364
+ </span>
4365
+
4366
+ </a>
4367
+
4368
+
4369
+ </li>
4370
+
4371
+
4372
+ <li class="nav-tree__item ">
4373
+
4374
+ <a class="nav-tree__link " href="/frontend/sass/helpers/units/">
4375
+
4376
+
4377
+ <span class="nav-tree__text">
4378
+ Units
4379
+ </span>
4380
+
4381
+ </a>
4382
+
4383
+
4384
+ </li>
4385
+
4386
+
4387
+ <li class="nav-tree__item ">
4388
+
4389
+ <a class="nav-tree__link " href="/frontend/sass/helpers/utilities/">
4390
+
4391
+
4392
+ <span class="nav-tree__text">
4393
+ Utilities
4394
+ </span>
4395
+
4396
+ </a>
4397
+
4398
+
4399
+ </li>
4400
+
4401
+ </ul>
4402
+
4403
+ </details>
4404
+ </li>
4405
+
4406
+ </ul>
4407
+
4408
+ </details>
4409
+ </li>
4410
+
4411
+
4412
+ <li class="nav-tree__item ">
4413
+ <details class="nav-tree__collapsible">
4414
+ <summary class="nav-tree__toggle">
4415
+
4416
+ <span class="nav-tree__toggle-content">
4417
+
4418
+
4419
+ <span class="nav-tree__icon fab fa-js" aria-hidden="true"></span>
4420
+
4421
+ <span class="nav-tree__text">
4422
+ Javascript API
4423
+ </span>
4424
+
4425
+ </span>
4426
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
4427
+
4428
+ </summary>
4429
+
4430
+ <ul class="nav-tree" data-menu-depth="2">
4431
+
4432
+ <li class="nav-tree__item ">
4433
+
4434
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/javascript/">
4435
+
4436
+
4437
+ <span class="nav-tree__text">
4438
+ Introduction
4439
+ </span>
4440
+
4441
+ </a>
4442
+
4443
+
4444
+ </li>
4445
+
4446
+
4447
+ <li class="nav-tree__item ">
4448
+
4449
+ <a class="nav-tree__link " href="/frontend/javascript/events/">
4450
+
4451
+
4452
+ <span class="nav-tree__text">
4453
+ events
4454
+ </span>
4455
+
4456
+ </a>
4457
+
4458
+
4459
+ </li>
4460
+
4461
+
4462
+ <li class="nav-tree__item ">
4463
+
4464
+ <a class="nav-tree__link " href="/frontend/javascript/settings/">
4465
+
4466
+
4467
+ <span class="nav-tree__text">
4468
+ settings
4469
+ </span>
4470
+
4471
+ </a>
4472
+
4473
+
4474
+ </li>
4475
+
4476
+
4477
+ <li class="nav-tree__item ">
4478
+
4479
+ <a class="nav-tree__link " href="/frontend/javascript/ui-breakpoints/">
4480
+
4481
+
4482
+ <span class="nav-tree__text">
4483
+ ui/breakpoints
4484
+ </span>
4485
+
4486
+ </a>
4487
+
4488
+
4489
+ </li>
4490
+
4491
+
4492
+ <li class="nav-tree__item ">
4493
+
4494
+ <a class="nav-tree__link " href="/frontend/javascript/ui-collapsible/">
4495
+
4496
+
4497
+ <span class="nav-tree__text">
4498
+ ui/collapsible
4499
+ </span>
4500
+
4501
+ </a>
4502
+
4503
+
4504
+ </li>
4505
+
4506
+
4507
+ <li class="nav-tree__item ">
4508
+
4509
+ <a class="nav-tree__link " href="/frontend/javascript/ui-details-group/">
4510
+
4511
+
4512
+ <span class="nav-tree__text">
4513
+ ui/details-group
4514
+ </span>
4515
+
4516
+ </a>
4517
+
4518
+
4519
+ </li>
4520
+
4521
+
4522
+ <li class="nav-tree__item ">
4523
+
4524
+ <a class="nav-tree__link " href="/frontend/javascript/ui-dialog/">
4525
+
4526
+
4527
+ <span class="nav-tree__text">
4528
+ ui/dialog
4529
+ </span>
4530
+
4531
+ </a>
4532
+
4533
+
4534
+ </li>
4535
+
4536
+
4537
+ <li class="nav-tree__item ">
4538
+
4539
+ <a class="nav-tree__link " href="/frontend/javascript/ui-flipcard/">
4540
+
4541
+
4542
+ <span class="nav-tree__text">
4543
+ ui/flipcard
4544
+ </span>
4545
+
4546
+ </a>
4547
+
4548
+
4549
+ </li>
4550
+
4551
+
4552
+ <li class="nav-tree__item ">
4553
+
4554
+ <a class="nav-tree__link " href="/frontend/javascript/ui-grid/">
4555
+
4556
+
4557
+ <span class="nav-tree__text">
4558
+ ui/grid
4559
+ </span>
4560
+
4561
+ </a>
4562
+
4563
+
4564
+ </li>
4565
+
4566
+
4567
+ <li class="nav-tree__item ">
4568
+
4569
+ <a class="nav-tree__link " href="/frontend/javascript/ui-modal-builder/">
4570
+
4571
+
4572
+ <span class="nav-tree__text">
4573
+ ui/modal-builder
4574
+ </span>
4575
+
4576
+ </a>
4577
+
4578
+
4579
+ </li>
4580
+
4581
+
4582
+ <li class="nav-tree__item ">
4583
+
4584
+ <a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller/">
4585
+
4586
+
4587
+ <span class="nav-tree__text">
4588
+ ui/overflow-scroller
4589
+ </span>
4590
+
4591
+ </a>
4592
+
4593
+
4594
+ </li>
4595
+
4596
+
4597
+ <li class="nav-tree__item ">
4598
+
4599
+ <a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller-pager/">
4600
+
4601
+
4602
+ <span class="nav-tree__text">
4603
+ ui/overflow-scroller-pager
4604
+ </span>
4605
+
4606
+ </a>
4607
+
4608
+
4609
+ </li>
4610
+
4611
+
4612
+ <li class="nav-tree__item ">
4613
+
4614
+ <a class="nav-tree__link " href="/frontend/javascript/ui-page/">
4615
+
4616
+
4617
+ <span class="nav-tree__text">
4618
+ ui/page
4619
+ </span>
4620
+
4621
+ </a>
4622
+
4623
+
4624
+ </li>
4625
+
4626
+
4627
+ <li class="nav-tree__item ">
4628
+
4629
+ <a class="nav-tree__link " href="/frontend/javascript/ui-popover/">
4630
+
4631
+
4632
+ <span class="nav-tree__text">
4633
+ ui/popover
4634
+ </span>
4635
+
4636
+ </a>
4637
+
4638
+
4639
+ </li>
4640
+
4641
+
4642
+ <li class="nav-tree__item ">
4643
+
4644
+ <a class="nav-tree__link " href="/frontend/javascript/ui-print/">
4645
+
4646
+
4647
+ <span class="nav-tree__text">
4648
+ ui/print
4649
+ </span>
4650
+
4651
+ </a>
4652
+
4653
+
4654
+ </li>
4655
+
4656
+
4657
+ <li class="nav-tree__item ">
4658
+
4659
+ <a class="nav-tree__link " href="/frontend/javascript/ui-print-details/">
4660
+
4661
+
4662
+ <span class="nav-tree__text">
4663
+ ui/print-details
4664
+ </span>
4665
+
4666
+ </a>
4667
+
4668
+
4669
+ </li>
4670
+
4671
+
4672
+ <li class="nav-tree__item ">
4673
+
4674
+ <a class="nav-tree__link " href="/frontend/javascript/ui-programmatic-modal/">
4675
+
4676
+
4677
+ <span class="nav-tree__text">
4678
+ ui/programmatic-modal
4679
+ </span>
4680
+
4681
+ </a>
4682
+
4683
+
4684
+ </li>
4685
+
4686
+
4687
+ <li class="nav-tree__item ">
4688
+
4689
+ <a class="nav-tree__link " href="/frontend/javascript/ui-proxy-click/">
4690
+
4691
+
4692
+ <span class="nav-tree__text">
4693
+ ui/proxy-click
4694
+ </span>
4695
+
4696
+ </a>
4697
+
4698
+
4699
+ </li>
4700
+
4701
+
4702
+ <li class="nav-tree__item ">
4703
+
4704
+ <a class="nav-tree__link " href="/frontend/javascript/ui-resizer/">
4705
+
4706
+
4707
+ <span class="nav-tree__text">
4708
+ ui/resizer
4709
+ </span>
4710
+
4711
+ </a>
4712
+
4713
+
4714
+ </li>
4715
+
4716
+
4717
+ <li class="nav-tree__item ">
4718
+
4719
+ <a class="nav-tree__link " href="/frontend/javascript/ui-scroll-slider/">
4720
+
4721
+
4722
+ <span class="nav-tree__text">
4723
+ ui/scroll-slider
4724
+ </span>
4725
+
4726
+ </a>
4727
+
4728
+
4729
+ </li>
4730
+
4731
+
4732
+ <li class="nav-tree__item ">
4733
+
4734
+ <a class="nav-tree__link " href="/frontend/javascript/ui-scrollpoint/">
4735
+
4736
+
4737
+ <span class="nav-tree__text">
4738
+ ui/scrollpoint
4739
+ </span>
4740
+
4741
+ </a>
4742
+
4743
+
4744
+ </li>
4745
+
4746
+
4747
+ <li class="nav-tree__item ">
4748
+
4749
+ <a class="nav-tree__link " href="/frontend/javascript/ui-slider/">
4750
+
4751
+
4752
+ <span class="nav-tree__text">
4753
+ ui/slider
4754
+ </span>
4755
+
4756
+ </a>
4757
+
4758
+
4759
+ </li>
4760
+
4761
+
4762
+ <li class="nav-tree__item ">
4763
+
4764
+ <a class="nav-tree__link " href="/frontend/javascript/ui-tabs/">
4765
+
4766
+
4767
+ <span class="nav-tree__text">
4768
+ ui/tabs
4769
+ </span>
4770
+
4771
+ </a>
4772
+
4773
+
4774
+ </li>
4775
+
4776
+
4777
+ <li class="nav-tree__item ">
4778
+
4779
+ <a class="nav-tree__link " href="/frontend/javascript/ui-theme-toggle/">
4780
+
4781
+
4782
+ <span class="nav-tree__text">
4783
+ ui/theme-toggle
4784
+ </span>
4785
+
4786
+ </a>
4787
+
4788
+
4789
+ </li>
4790
+
4791
+
4792
+ <li class="nav-tree__item ">
4793
+
4794
+ <a class="nav-tree__link " href="/frontend/javascript/ui-tooltip/">
4795
+
4796
+
4797
+ <span class="nav-tree__text">
4798
+ ui/tooltip
4799
+ </span>
4800
+
4801
+ </a>
4802
+
4803
+
4804
+ </li>
4805
+
4806
+
4807
+ <li class="nav-tree__item ">
4808
+
4809
+ <a class="nav-tree__link " href="/frontend/javascript/utils-class-logger/">
4810
+
4811
+
4812
+ <span class="nav-tree__text">
4813
+ utils/class-logger
4814
+ </span>
4815
+
4816
+ </a>
4817
+
4818
+
4819
+ </li>
4820
+
4821
+
4822
+ <li class="nav-tree__item ">
4823
+
4824
+ <a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
4825
+
4826
+
4827
+ <span class="nav-tree__text">
4828
+ utils/dom
4829
+ </span>
4830
+
4831
+ </a>
4832
+
4833
+
4834
+ </li>
4835
+
4836
+
4837
+ <li class="nav-tree__item ">
4838
+
4839
+ <a class="nav-tree__link " href="/frontend/javascript/utils-file-save/">
4840
+
4841
+
4842
+ <span class="nav-tree__text">
4843
+ utils/file-save
4844
+ </span>
4845
+
4846
+ </a>
4847
+
4848
+
4849
+ </li>
4850
+
4851
+
4852
+ <li class="nav-tree__item ">
4853
+
4854
+ <a class="nav-tree__link " href="/frontend/javascript/utils-floating-ui/">
4855
+
4856
+
4857
+ <span class="nav-tree__text">
4858
+ utils/floating-ui
4859
+ </span>
4860
+
4861
+ </a>
4862
+
4863
+
4864
+ </li>
4865
+
4866
+
4867
+ <li class="nav-tree__item ">
4868
+
4869
+ <a class="nav-tree__link " href="/frontend/javascript/utils-id/">
4870
+
4871
+
4872
+ <span class="nav-tree__text">
4873
+ utils/id
4874
+ </span>
4875
+
4876
+ </a>
4877
+
4878
+
4879
+ </li>
4880
+
4881
+
4882
+ <li class="nav-tree__item ">
4883
+
4884
+ <a class="nav-tree__link " href="/frontend/javascript/utils-pause-youtube-video/">
4885
+
4886
+
4887
+ <span class="nav-tree__text">
4888
+ utils/pause-youtube-video
4889
+ </span>
4890
+
4891
+ </a>
4892
+
4893
+
4894
+ </li>
4895
+
4896
+ </ul>
4897
+
4898
+ </details>
4899
+ </li>
4900
+
4901
+
4902
+ <li class="nav-tree__item nav-tree__item--separator-before">
4903
+
4904
+ <a class="nav-tree__link " href="/frontend/changelog/">
4905
+
4906
+
4907
+ <span class="nav-tree__icon fas fa-clock-rotate-left" aria-hidden="true"></span>
4908
+
4909
+ <span class="nav-tree__text">
4910
+ Changelog
4911
+ </span>
4912
+
4913
+ </a>
4914
+
4915
+
4916
+ </li>
4917
+
4918
+ </ul>
4919
+
4920
+ </div>
4921
+ </nav>
4922
+ </header>
4923
+
4924
+ <div class="page__toc page-toc">
4925
+
4926
+ </div>
4927
+
4928
+ <main id="main" class="page__body">
4929
+
4930
+
4931
+
4932
+
4933
+ <div class="page__body-top container ">
4934
+ <h1 class="page__title h1">Theme Toggle</h1>
4935
+
4936
+ <p class="type-large type-light">
4937
+ Test show how theme toggle (javascript module) can be used contextually/independently. It&#39;s also used on the site container.
4938
+ </p>
4939
+
4940
+
4941
+ <hr class="rule rule--light rule--margin-large">
4942
+
4943
+ <style>
4944
+ .theme-toggle-demo {
4945
+ border: 2px solid black;
4946
+ padding: 3rem;
4947
+ margin: 1rem 0 2rem 0;
4948
+ }
4949
+ .theme-toggle-demo.theme-light {
4950
+ background: white;
4951
+ }
4952
+ .theme-toggle-demo.theme-dark {
4953
+ background: DimGray;
4954
+ }
4955
+ </style>
4956
+ <h2 class="h2">Contextual Test</h2>
4957
+ <p><button class="button" data-ulu-theme-toggle='{
4958
+ "target" : ".theme-target-demo-1",
4959
+ "group" : "group-1"
4960
+ }'>
4961
+ <span class="button__icon fas fa-moon" data-ulu-theme-toggle-icon=""></span>
4962
+ <span>Toggle</span>
4963
+ </button></p>
4964
+ <p>
4965
+ Testing two buttons control one area
4966
+ <button class="link" data-ulu-theme-toggle-remote="group-1">
4967
+ Change Theme to <span data-ulu-theme-toggle-label="">Dark</span>
4968
+ </button>
4969
+ </p>
4970
+ <div class="theme-target-demo-1 theme-toggle-demo theme-dark">
4971
+ <p>
4972
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.
4973
+ </p>
4974
+ <p><button class="button">Placeholder Button</button></p>
4975
+ </div>
4976
+ <div class="theme-target-demo-1 theme-toggle-demo theme-dark">
4977
+ This is a separate container (for testing multiple targets)
4978
+ <p>
4979
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.
4980
+ </p>
4981
+ <p><button class="button">Placeholder Button</button></p>
4982
+ </div>
4983
+ <h2 class="h2">Contextual Test Inverse</h2>
4984
+ <p>
4985
+ <em>Clicking the button will also test adding an additional remote button for testing.</em>
4986
+ </p>
4987
+ <p><button class="button" data-ulu-theme-toggle='{
4988
+ "target" : "#demo-theme-2",
4989
+ "group" : "group-2"
4990
+ }' data-demo-insert="">
4991
+ <span class="button__icon fas fa-sun" data-ulu-theme-toggle-icon=""></span>
4992
+ <span>Toggle</span>
4993
+ </button></p>
4994
+ <div id="demo-theme-2" class="theme-toggle-demo theme-light">
4995
+ <p>
4996
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.
4997
+ </p>
4998
+ <button class="button">Placeholder Button</button>
4999
+ </div>
5000
+ <script>
5001
+ // Quick script to test remote
5002
+ (() => {
5003
+ const button = document.querySelector("[data-demo-insert]");
5004
+ const createRemote = () => {
5005
+ const remote = document.createElement("button");
5006
+ remote.setAttribute("data-ulu-theme-toggle-remote", "group-2");
5007
+ remote.classList.add("link");
5008
+ remote.textContent = "Test Inserted Remote";
5009
+ return remote;
5010
+ };
5011
+
5012
+ button.addEventListener("click", () => {
5013
+ const remote = createRemote();
5014
+ button.insertAdjacentElement('afterend', remote);
5015
+ document.dispatchEvent(new CustomEvent("ulu:pageModified", { bubbles: true }));
5016
+ });
5017
+ })();
5018
+ </script>
5019
+ <h2 class="h2">Test Changing Sites Theme</h2>
5020
+ <p>
5021
+ <em>The button below should toggle the sites theme</em>
5022
+ </p>
5023
+ <button class="button" data-ulu-theme-toggle-remote="page">
5024
+ <span class="button__icon fas fa-moon" data-ulu-theme-toggle-icon=""></span>
5025
+ <span>Toggle from: <span data-ulu-theme-toggle-label=""></span></span>
5026
+ </button>
5027
+ </div>
5028
+
5029
+ </main>
5030
+ <footer></footer>
5031
+
5032
+
5033
+ <script src="http://localhost:5173/@vite/client" type="module"></script>
5034
+ <script src="http://localhost:5173/docs-src/src/main.js" type="module"></script>
5035
+
5036
+
5037
+
5038
+ </body>
5039
+ </html>