noctemyth 0.2.0 → 1.0.0

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 (80) hide show
  1. package/dist/css/noctemyth-skelton.css +3171 -8838
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3171 -8838
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +55988 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +55988 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +26697 -38194
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5866 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/animations/fade.scss +2 -2
  15. package/src/backgrounds/dot.scss +28 -20
  16. package/src/backgrounds/gingham.scss +22 -21
  17. package/src/backgrounds/rhombus.scss +45 -22
  18. package/src/backgrounds/stripe.scss +19 -14
  19. package/src/backgrounds/zigzag.scss +34 -25
  20. package/src/base/accessibility.scss +68 -0
  21. package/src/base/dub.scss +34 -4
  22. package/src/base/element.scss +1 -1
  23. package/src/base/index.scss +2 -0
  24. package/src/base/normalize.scss +0 -8
  25. package/src/base/root.scss +25 -0
  26. package/src/components/accordion.scss +183 -90
  27. package/src/components/aside.scss +7 -0
  28. package/src/components/badge.scss +170 -64
  29. package/src/components/blockquote.scss +52 -27
  30. package/src/components/breadcrumbs.scss +46 -16
  31. package/src/components/button.scss +177 -88
  32. package/src/components/card.scss +147 -48
  33. package/src/components/description-list.scss +46 -0
  34. package/src/components/dialogue.scss +194 -143
  35. package/src/components/div.scss +1 -1
  36. package/src/components/figure.scss +173 -0
  37. package/src/components/footer.scss +20 -6
  38. package/src/components/hamburger.scss +77 -51
  39. package/src/components/header.scss +42 -6
  40. package/src/components/heading.scss +6 -7
  41. package/src/components/image.scss +1 -1
  42. package/src/components/index.scss +3 -0
  43. package/src/components/input.scss +110 -69
  44. package/src/components/label.scss +34 -4
  45. package/src/components/link.scss +56 -12
  46. package/src/components/list.scss +39 -9
  47. package/src/components/loader.scss +10 -8
  48. package/src/components/main.scss +1 -1
  49. package/src/components/message.scss +100 -24
  50. package/src/components/modal.scss +18 -8
  51. package/src/components/nav.scss +600 -280
  52. package/src/components/paragraph.scss +1 -2
  53. package/src/components/progress.scss +42 -16
  54. package/src/components/section.scss +1 -1
  55. package/src/components/span.scss +1 -1
  56. package/src/css-variables/animation.scss +1 -1
  57. package/src/css-variables/border.scss +1 -1
  58. package/src/css-variables/color.scss +757 -468
  59. package/src/css-variables/components/dialogue.scss +2 -2
  60. package/src/css-variables/components/header.scss +1 -0
  61. package/src/css-variables/index.scss +1 -0
  62. package/src/css-variables/layout.scss +11 -0
  63. package/src/css-variables/miscellaneous.scss +4 -4
  64. package/src/css-variables/typography.scss +1 -1
  65. package/src/functions/color.scss +13 -0
  66. package/src/functions/index.scss +1 -0
  67. package/src/functions/string.scss +12 -0
  68. package/src/layouts/centering.scss +1 -1
  69. package/src/layouts/columns.scss +57 -51
  70. package/src/layouts/container.scss +33 -31
  71. package/src/mixins/color.scss +0 -32
  72. package/src/mixins/element.scss +2 -2
  73. package/src/mixins/responsive.scss +12 -11
  74. package/src/utilities/border.scss +4 -0
  75. package/src/utilities/color.scss +112 -6
  76. package/src/variables/color.scss +1169 -1084
  77. package/src/variables/components/dialogue.scss +2 -2
  78. package/src/variables/components/header.scss +1 -0
  79. package/src/variables/layout.scss +13 -11
  80. package/src/variables/miscellaneous.scss +1 -3
package/src/components/nav.scss CHANGED
@@ -2,15 +2,543 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .nav {
5
+ @mixin nav-menu-item-base() {
6
+ @include mixins.element();
7
+ display: block;
8
+ flex-basis: 0;
9
+ flex-grow: 1;
10
+ flex-shrink: 1;
11
+ line-height: 1.5;
12
+ max-width: 100%;
13
+ padding: 0.5rem;
14
+ position: relative;
15
+ text-decoration: none;
16
+ color: var(--#{variables.$prefix}nav-menu-item-color-fore);
17
+ text-shadow:
18
+ 2px 2px 1px
19
+ oklch(
20
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
21
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
22
+ ),
23
+ -2px 2px 1px
24
+ oklch(
25
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
26
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
27
+ ),
28
+ 2px -2px 1px
29
+ oklch(
30
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
31
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
32
+ ),
33
+ -2px -2px 1px
34
+ oklch(
35
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
36
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
37
+ ),
38
+ 2px 0px 1px
39
+ oklch(
40
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
41
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
42
+ ),
43
+ 0px 2px 1px
44
+ oklch(
45
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
46
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
47
+ ),
48
+ -2px 0px 1px
49
+ oklch(
50
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
51
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
52
+ ),
53
+ 0px -2px 1px
54
+ oklch(
55
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
56
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
57
+ );
58
+ > .nav-menu-item-icon {
59
+ @include mixins.element();
60
+ filter: drop-shadow(
61
+ 2px 2px 1px var(--#{variables.$prefix}nav-menu-item-color-shadow)
62
+ )
63
+ drop-shadow(
64
+ -2px 2px 1px var(--#{variables.$prefix}nav-menu-item-color-shadow)
65
+ )
66
+ drop-shadow(
67
+ 2px -2px 1px var(--#{variables.$prefix}nav-menu-item-color-shadow)
68
+ )
69
+ drop-shadow(
70
+ -2px -2px 1px var(--#{variables.$prefix}nav-menu-item-color-shadow)
71
+ );
72
+ }
73
+ &[onclick],
74
+ &:any-link,
75
+ &.is-clickable {
76
+ cursor: pointer;
77
+ &:focus,
78
+ &.is-focus,
79
+ &.is-focused {
80
+ color: var(--#{variables.$prefix}nav-menu-item-color-focus-fore);
81
+ text-shadow:
82
+ 2px 2px 1px
83
+ oklch(
84
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
85
+ h /
86
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
87
+ ),
88
+ -2px 2px 1px
89
+ oklch(
90
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
91
+ h /
92
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
93
+ ),
94
+ 2px -2px 1px
95
+ oklch(
96
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
97
+ h /
98
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
99
+ ),
100
+ -2px -2px 1px
101
+ oklch(
102
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
103
+ h /
104
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
105
+ ),
106
+ 2px 0px 1px
107
+ oklch(
108
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
109
+ h /
110
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
111
+ ),
112
+ 0px 2px 1px
113
+ oklch(
114
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
115
+ h /
116
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
117
+ ),
118
+ -2px 0px 1px
119
+ oklch(
120
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
121
+ h /
122
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
123
+ ),
124
+ 0px -2px 1px
125
+ oklch(
126
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
127
+ h /
128
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
129
+ );
130
+ > .nav-menu-item-icon {
131
+ filter: drop-shadow(
132
+ 2px 2px 1px
133
+ oklch(
134
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
135
+ l c h /
136
+ var(
137
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
138
+ )
139
+ )
140
+ )
141
+ drop-shadow(
142
+ -2px 2px 1px
143
+ oklch(
144
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
145
+ l c h /
146
+ var(
147
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
148
+ )
149
+ )
150
+ )
151
+ drop-shadow(
152
+ 2px -2px 1px
153
+ oklch(
154
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
155
+ l c h /
156
+ var(
157
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
158
+ )
159
+ )
160
+ )
161
+ drop-shadow(
162
+ -2px -2px 1px
163
+ oklch(
164
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
165
+ l c h /
166
+ var(
167
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
168
+ )
169
+ )
170
+ );
171
+ }
172
+ }
173
+
174
+ &:hover,
175
+ &.is-hover,
176
+ &.is-hovered {
177
+ color: var(--#{variables.$prefix}nav-menu-item-color-hover-fore);
178
+ text-shadow:
179
+ 2px 2px 1px
180
+ oklch(
181
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
182
+ h /
183
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
184
+ ),
185
+ -2px 2px 1px
186
+ oklch(
187
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
188
+ h /
189
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
190
+ ),
191
+ 2px -2px 1px
192
+ oklch(
193
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
194
+ h /
195
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
196
+ ),
197
+ -2px -2px 1px
198
+ oklch(
199
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
200
+ h /
201
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
202
+ ),
203
+ 2px 0px 1px
204
+ oklch(
205
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
206
+ h /
207
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
208
+ ),
209
+ 0px 2px 1px
210
+ oklch(
211
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
212
+ h /
213
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
214
+ ),
215
+ -2px 0px 1px
216
+ oklch(
217
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
218
+ h /
219
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
220
+ ),
221
+ 0px -2px 1px
222
+ oklch(
223
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
224
+ h /
225
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
226
+ );
227
+ > .nav-menu-item-icon {
228
+ filter: drop-shadow(
229
+ 2px 2px 1px
230
+ oklch(
231
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
232
+ l c h /
233
+ var(
234
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
235
+ )
236
+ )
237
+ )
238
+ drop-shadow(
239
+ -2px 2px 1px
240
+ oklch(
241
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
242
+ l c h /
243
+ var(
244
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
245
+ )
246
+ )
247
+ )
248
+ drop-shadow(
249
+ 2px -2px 1px
250
+ oklch(
251
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
252
+ l c h /
253
+ var(
254
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
255
+ )
256
+ )
257
+ )
258
+ drop-shadow(
259
+ -2px -2px 1px
260
+ oklch(
261
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
262
+ l c h /
263
+ var(
264
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
265
+ )
266
+ )
267
+ );
268
+ }
269
+ }
270
+
271
+ &:active,
272
+ &.is-active {
273
+ color: var(--#{variables.$prefix}nav-menu-item-color-active-fore);
274
+ text-shadow:
275
+ 2px 2px 1px
276
+ oklch(
277
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
278
+ c h /
279
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
280
+ ),
281
+ -2px 2px 1px
282
+ oklch(
283
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
284
+ c h /
285
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
286
+ ),
287
+ 2px -2px 1px
288
+ oklch(
289
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
290
+ c h /
291
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
292
+ ),
293
+ -2px -2px 1px
294
+ oklch(
295
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
296
+ c h /
297
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
298
+ ),
299
+ 2px 0px 1px
300
+ oklch(
301
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
302
+ c h /
303
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
304
+ ),
305
+ 0px 2px 1px
306
+ oklch(
307
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
308
+ c h /
309
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
310
+ ),
311
+ -2px 0px 1px
312
+ oklch(
313
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
314
+ c h /
315
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
316
+ ),
317
+ 0px -2px 1px
318
+ oklch(
319
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
320
+ c h /
321
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
322
+ );
323
+ > .nav-menu-item-icon {
324
+ filter: drop-shadow(
325
+ 2px 2px 1px
326
+ oklch(
327
+ from
328
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
329
+ c h /
330
+ var(
331
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
332
+ )
333
+ )
334
+ )
335
+ drop-shadow(
336
+ -2px 2px 1px
337
+ oklch(
338
+ from
339
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
340
+ c h /
341
+ var(
342
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
343
+ )
344
+ )
345
+ )
346
+ drop-shadow(
347
+ 2px -2px 1px
348
+ oklch(
349
+ from
350
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
351
+ c h /
352
+ var(
353
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
354
+ )
355
+ )
356
+ )
357
+ drop-shadow(
358
+ -2px -2px 1px
359
+ oklch(
360
+ from
361
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
362
+ c h /
363
+ var(
364
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
365
+ )
366
+ )
367
+ );
368
+ }
369
+ }
370
+
371
+ &[disabled],
372
+ fieldset[disabled],
373
+ &.is-disabled {
374
+ color: var(--#{variables.$prefix}nav-menu-item-color-disabled-fore);
375
+ text-shadow:
376
+ 2px 2px 1px
377
+ oklch(
378
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
379
+ l c h /
380
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
381
+ ),
382
+ -2px 2px 1px
383
+ oklch(
384
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
385
+ l c h /
386
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
387
+ ),
388
+ 2px -2px 1px
389
+ oklch(
390
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
391
+ l c h /
392
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
393
+ ),
394
+ -2px -2px 1px
395
+ oklch(
396
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
397
+ l c h /
398
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
399
+ ),
400
+ 2px 0px 1px
401
+ oklch(
402
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
403
+ l c h /
404
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
405
+ ),
406
+ 0px 2px 1px
407
+ oklch(
408
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
409
+ l c h /
410
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
411
+ ),
412
+ -2px 0px 1px
413
+ oklch(
414
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
415
+ l c h /
416
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
417
+ ),
418
+ 0px -2px 1px
419
+ oklch(
420
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
421
+ l c h /
422
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
423
+ );
424
+ > .nav-menu-item-icon {
425
+ filter: drop-shadow(
426
+ 2px 2px 1px
427
+ oklch(
428
+ from
429
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
430
+ l c h /
431
+ var(
432
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
433
+ )
434
+ )
435
+ )
436
+ drop-shadow(
437
+ -2px 2px 1px
438
+ oklch(
439
+ from
440
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
441
+ l c h /
442
+ var(
443
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
444
+ )
445
+ )
446
+ )
447
+ drop-shadow(
448
+ 2px -2px 1px
449
+ oklch(
450
+ from
451
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
452
+ l c h /
453
+ var(
454
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
455
+ )
456
+ )
457
+ )
458
+ drop-shadow(
459
+ -2px -2px 1px
460
+ oklch(
461
+ from
462
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
463
+ l c h /
464
+ var(
465
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
466
+ )
467
+ )
468
+ );
469
+ }
470
+ }
471
+ }
472
+ }
473
+
474
+ :where(.nav) {
475
+ --#{variables.$prefix}nav-color-fore: var(
476
+ --#{variables.$prefix}color-default-nav-fore,
477
+ var(--#{variables.$prefix}color-default-fore)
478
+ );
479
+ --#{variables.$prefix}nav-color-back: var(
480
+ --#{variables.$prefix}color-default-nav-back,
481
+ var(--#{variables.$prefix}color-default-back)
482
+ );
483
+ --#{variables.$prefix}nav-color-border: var(
484
+ --#{variables.$prefix}color-default-nav-border,
485
+ var(--#{variables.$prefix}color-default-border)
486
+ );
487
+
488
+ --#{variables.$prefix}nav-menu-item-color-fore: var(
489
+ --#{variables.$prefix}color-default-nav-menu-item-fore,
490
+ var(--#{variables.$prefix}color-default-fore)
491
+ );
492
+ --#{variables.$prefix}nav-menu-item-color-shadow: var(
493
+ --#{variables.$prefix}color-default-nav-menu-item-shadow,
494
+ var(--#{variables.$prefix}color-default-shadow)
495
+ );
496
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha: 0.5;
497
+
498
+ --#{variables.$prefix}nav-menu-item-color-focus-fore: var(
499
+ --#{variables.$prefix}color-default-nav-menu-item-focus-fore,
500
+ var(--#{variables.$prefix}color-default-focus-fore)
501
+ );
502
+ --#{variables.$prefix}nav-menu-item-color-focus-shadow: var(
503
+ --#{variables.$prefix}color-default-nav-menu-item-focus-shadow,
504
+ var(--#{variables.$prefix}color-default-focus-shadow)
505
+ );
506
+
507
+ --#{variables.$prefix}nav-menu-item-color-hover-fore: var(
508
+ --#{variables.$prefix}color-default-nav-menu-item-hover-fore,
509
+ var(--#{variables.$prefix}color-default-hover-fore)
510
+ );
511
+ --#{variables.$prefix}nav-menu-item-color-hover-shadow: var(
512
+ --#{variables.$prefix}color-default-nav-menu-item-hover-shadow,
513
+ var(--#{variables.$prefix}color-default-hover-shadow)
514
+ );
515
+
516
+ --#{variables.$prefix}nav-menu-item-color-active-fore: var(
517
+ --#{variables.$prefix}color-default-nav-menu-item-active-fore,
518
+ var(--#{variables.$prefix}color-default-active-fore)
519
+ );
520
+ --#{variables.$prefix}nav-menu-item-color-active-shadow: var(
521
+ --#{variables.$prefix}color-default-nav-menu-item-active-shadow,
522
+ var(--#{variables.$prefix}color-default-active-shadow)
523
+ );
524
+
525
+ --#{variables.$prefix}nav-menu-item-color-disabled-fore: var(
526
+ --#{variables.$prefix}color-default-nav-menu-item-disabled-fore,
527
+ var(--#{variables.$prefix}color-default-disabled-fore)
528
+ );
529
+ --#{variables.$prefix}nav-menu-item-color-disabled-shadow: var(
530
+ --#{variables.$prefix}color-default-nav-menu-item-disabled-shadow,
531
+ var(--#{variables.$prefix}color-default-disabled-shadow)
532
+ );
533
+
6
534
  @include mixins.element();
7
535
  min-height: 4rem;
8
536
  padding: 0.25rem 0;
9
- .nav-static {
537
+ > .nav-static {
10
538
  @include mixins.element();
11
539
  @include mixins.add-responsible-visible() {
12
540
  display: flex;
13
- .nav-brand {
541
+ > .nav-brand {
14
542
  @include mixins.element();
15
543
  display: flex;
16
544
  flex-basis: 0;
@@ -19,12 +547,12 @@
19
547
  max-width: 100%;
20
548
  margin: auto;
21
549
  position: relative;
22
- .nav-brand-left,
23
- .nav-brand-center,
24
- .nav-brand-right,
25
- .left,
26
- .center,
27
- .right {
550
+ > .nav-brand-left,
551
+ > .nav-brand-center,
552
+ > .nav-brand-right,
553
+ > .left,
554
+ > .center,
555
+ > .right {
28
556
  @include mixins.element();
29
557
  display: block;
30
558
  flex-basis: 0;
@@ -34,21 +562,21 @@
34
562
  margin: auto;
35
563
  position: relative;
36
564
  }
37
- .nav-brand-left,
38
- .left {
565
+ > .nav-brand-left,
566
+ > .left {
39
567
  margin: auto auto auto 0;
40
568
  text-align: left;
41
569
  flex-basis: 30%;
42
570
  max-width: 30%;
43
571
  width: 30%;
44
572
  }
45
- .nav-brand-right,
46
- .right {
573
+ > .nav-brand-right,
574
+ > .right {
47
575
  margin: auto 0 auto auto;
48
576
  text-align: right;
49
577
  }
50
578
  }
51
- .nav-menu {
579
+ > .nav-menu {
52
580
  @include mixins.element();
53
581
  display: flex;
54
582
  flex-basis: 0;
@@ -57,77 +585,14 @@
57
585
  max-width: 100%;
58
586
  margin: auto;
59
587
  position: relative;
60
- .nav-menu-item {
61
- @include mixins.element();
62
- cursor: pointer;
63
- display: block;
64
- flex-basis: 0;
65
- flex-grow: 1;
66
- flex-shrink: 1;
67
- line-height: 1.5;
68
- margin: 0.25em;
69
- max-width: 100%;
70
- padding: 0.5rem;
71
- position: relative;
72
- text-decoration: none;
73
- color: var(--#{variables.$prefix}color-default-fore);
74
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
75
- -2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
76
- 2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
77
- -2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
78
- 2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
79
- 0px 2px 1px var(--#{variables.$prefix}color-default-shadow),
80
- -2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
81
- 0px -2px 1px var(--#{variables.$prefix}color-default-shadow);
82
- .icon {
83
- @include mixins.element();
84
- filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
85
- drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
86
- drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-shadow))
87
- drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-shadow));
88
- }
89
- &:hover {
90
- color: var(--#{variables.$prefix}color-default-fore-hover);
91
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
92
- -2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
93
- 2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
94
- -2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
95
- 2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
96
- 0px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
97
- -2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
98
- 0px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow);
99
- opacity: 0.8;
100
- .icon {
101
- filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
102
- drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
103
- drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
104
- drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow));
105
- }
106
- }
107
- &:active {
108
- color: var(--#{variables.$prefix}color-default-fore-active);
109
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
110
- -2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
111
- 2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
112
- -2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
113
- 2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
114
- 0px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
115
- -2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
116
- 0px -2px 1px var(--#{variables.$prefix}color-default-active-shadow);
117
- .icon {
118
- filter: drop-shadow(
119
- 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow)
120
- )
121
- drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow))
122
- drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow))
123
- drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow));
124
- }
125
- }
588
+ > .nav-menu-item {
589
+ @include nav-menu-item-base();
126
590
  }
127
591
  }
128
592
  }
129
593
  }
130
- .nav-accordion {
594
+
595
+ > .nav-accordion {
131
596
  @include mixins.element();
132
597
  @include mixins.add-responsible-visible() {
133
598
  display: block;
@@ -173,214 +638,69 @@
173
638
  display: block;
174
639
  }
175
640
  .nav-menu-item {
176
- @include mixins.element();
177
- color: var(--#{variables.$prefix}color-default-fore);
178
- width: 100%;
179
- display: block;
180
- cursor: pointer;
181
- line-height: 1.5;
182
- margin: 0.25em 0;
183
- max-width: 100%;
184
- padding: 0.5rem;
185
- position: relative;
186
- text-decoration: none;
187
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
188
- -2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
189
- 2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
190
- -2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
191
- 2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
192
- 0px 2px 1px var(--#{variables.$prefix}color-default-shadow),
193
- -2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
194
- 0px -2px 1px var(--#{variables.$prefix}color-default-shadow);
195
- .icon {
196
- filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
197
- drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
198
- drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-shadow))
199
- drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-shadow));
200
- }
201
- &:hover {
202
- color: var(--#{variables.$prefix}color-default-fore-hover);
203
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
204
- -2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
205
- 2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
206
- -2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
207
- 2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
208
- 0px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
209
- -2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
210
- 0px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow);
211
- .icon {
212
- filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
213
- drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
214
- drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
215
- drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow));
216
- }
217
- }
218
- &:active {
219
- color: var(--#{variables.$prefix}color-default-fore-active);
220
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
221
- -2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
222
- 2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
223
- -2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
224
- 2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
225
- 0px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
226
- -2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
227
- 0px -2px 1px var(--#{variables.$prefix}color-default-active-shadow);
228
- .icon {
229
- filter: drop-shadow(
230
- 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow)
231
- )
232
- drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow))
233
- drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow))
234
- drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow));
235
- }
236
- }
641
+ @include nav-menu-item-base();
237
642
  }
238
643
  }
239
644
  }
240
645
  }
241
646
 
242
647
  @if (not variables.$is-skelton) {
243
- @each $color in variables.$colors {
648
+ @each $color in variables.$allColors {
244
649
  $colorName: map.get($color, "name");
245
650
  &.is-#{$colorName} {
246
- color: var(--#{variables.$prefix}color-#{$colorName}-fore);
247
- .nav-accordion {
248
- .nav-menu {
249
- .nav-menu-item {
250
- color: var(--#{variables.$prefix}color-#{$colorName}-fore);
251
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
252
- -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
253
- 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
254
- -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
255
- 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
256
- 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
257
- -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
258
- 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow);
259
- .icon {
260
- filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
261
- drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
262
- drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
263
- drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow));
264
- }
265
- &:hover {
266
- color: var(--#{variables.$prefix}color-#{$colorName}-fore-hover);
267
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
268
- -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
269
- 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
270
- -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
271
- 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
272
- 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
273
- -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
274
- 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow);
275
- opacity: 0.8;
276
- .icon {
277
- filter: drop-shadow(
278
- 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
279
- )
280
- drop-shadow(
281
- -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
282
- )
283
- drop-shadow(
284
- 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
285
- )
286
- drop-shadow(
287
- -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
288
- );
289
- }
290
- }
291
- &:active {
292
- color: var(--#{variables.$prefix}color-#{$colorName}-fore-active);
293
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
294
- -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
295
- 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
296
- -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
297
- 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
298
- 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
299
- -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
300
- 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow);
301
- .icon {
302
- filter: drop-shadow(
303
- 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
304
- )
305
- drop-shadow(
306
- -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
307
- )
308
- drop-shadow(
309
- 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
310
- )
311
- drop-shadow(
312
- -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
313
- );
314
- }
315
- }
316
- }
317
- }
318
- }
651
+ --#{variables.$prefix}nav-color-fore: var(
652
+ --#{variables.$prefix}color-#{$colorName}-nav-fore,
653
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
654
+ );
655
+ --#{variables.$prefix}nav-color-back: var(
656
+ --#{variables.$prefix}color-#{$colorName}-nav-back,
657
+ var(--#{variables.$prefix}color-#{$colorName}-back)
658
+ );
659
+ --#{variables.$prefix}nav-color-border: var(
660
+ --#{variables.$prefix}color-#{$colorName}-nav-border,
661
+ var(--#{variables.$prefix}color-#{$colorName}-border)
662
+ );
319
663
 
320
- .nav-static {
321
- .nav-menu {
322
- .nav-menu-item {
323
- color: var(--#{variables.$prefix}color-#{$colorName}-fore);
324
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
325
- -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
326
- 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
327
- -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
328
- 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
329
- 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
330
- -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
331
- 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow);
332
- .icon {
333
- filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
334
- drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
335
- drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
336
- drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow));
337
- }
338
- &:hover {
339
- color: var(--#{variables.$prefix}color-#{$colorName}-fore-hover);
340
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
341
- -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
342
- 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
343
- -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
344
- 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
345
- 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
346
- -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
347
- 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow);
348
- opacity: 0.8;
349
- .icon {
350
- filter: drop-shadow(
351
- 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
352
- )
353
- drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow))
354
- drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow))
355
- drop-shadow(
356
- -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
357
- );
358
- }
359
- }
360
- &:active {
361
- color: var(--#{variables.$prefix}color-#{$colorName}-fore-active);
362
- text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
363
- -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
364
- 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
365
- -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
366
- 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
367
- 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
368
- -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
369
- 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow);
370
- .icon {
371
- filter: drop-shadow(
372
- 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
373
- )
374
- drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow))
375
- drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow))
376
- drop-shadow(
377
- -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
378
- );
379
- }
380
- }
381
- }
382
- }
383
- }
664
+ --#{variables.$prefix}nav-menu-item-color-fore: var(
665
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-fore,
666
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
667
+ );
668
+ --#{variables.$prefix}nav-menu-item-color-focus-fore: var(
669
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-fore,
670
+ var(--#{variables.$prefix}color-#{$colorName}-focus-fore)
671
+ );
672
+ --#{variables.$prefix}nav-menu-item-color-hover-fore: var(
673
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-fore,
674
+ var(--#{variables.$prefix}color-#{$colorName}-hover-fore)
675
+ );
676
+ --#{variables.$prefix}nav-menu-item-color-active-fore: var(
677
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-fore,
678
+ var(--#{variables.$prefix}color-#{$colorName}-active-fore)
679
+ );
680
+ --#{variables.$prefix}nav-menu-item-color-disabled-fore: var(
681
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-fore,
682
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-fore)
683
+ );
684
+ --#{variables.$prefix}nav-menu-item-color-shadow: var(
685
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-shadow,
686
+ var(--#{variables.$prefix}color-#{$colorName}-shadow)
687
+ );
688
+ --#{variables.$prefix}nav-menu-item-color-focus-shadow: var(
689
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-shadow,
690
+ var(--#{variables.$prefix}color-#{$colorName}-focus-shadow)
691
+ );
692
+ --#{variables.$prefix}nav-menu-item-color-hover-shadow: var(
693
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-shadow,
694
+ var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
695
+ );
696
+ --#{variables.$prefix}nav-menu-item-color-active-shadow: var(
697
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-shadow,
698
+ var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
699
+ );
700
+ --#{variables.$prefix}nav-menu-item-color-disabled-shadow: var(
701
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-shadow,
702
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-shadow)
703
+ );
384
704
  }
385
705
  }
386
706
  }