noctemyth 0.2.0 → 0.3.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 (62) hide show
  1. package/dist/css/noctemyth-skelton.css +3126 -5336
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3126 -5336
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +38455 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +38455 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +22250 -37070
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5326 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/backgrounds/dot.scss +39 -15
  15. package/src/backgrounds/gingham.scss +35 -18
  16. package/src/backgrounds/rhombus.scss +58 -19
  17. package/src/backgrounds/stripe.scss +30 -9
  18. package/src/backgrounds/zigzag.scss +43 -18
  19. package/src/base/dub.scss +15 -2
  20. package/src/base/element.scss +1 -1
  21. package/src/components/accordion.scss +254 -88
  22. package/src/components/badge.scss +215 -63
  23. package/src/components/blockquote.scss +74 -25
  24. package/src/components/breadcrumbs.scss +66 -15
  25. package/src/components/button.scss +204 -76
  26. package/src/components/card.scss +204 -47
  27. package/src/components/dialogue.scss +209 -140
  28. package/src/components/div.scss +1 -1
  29. package/src/components/footer.scss +28 -5
  30. package/src/components/hamburger.scss +89 -50
  31. package/src/components/header.scss +71 -5
  32. package/src/components/heading.scss +6 -6
  33. package/src/components/image.scss +1 -0
  34. package/src/components/input.scss +141 -69
  35. package/src/components/label.scss +51 -3
  36. package/src/components/link.scss +72 -9
  37. package/src/components/list.scss +2 -2
  38. package/src/components/loader.scss +18 -7
  39. package/src/components/main.scss +1 -1
  40. package/src/components/message.scss +142 -23
  41. package/src/components/modal.scss +26 -7
  42. package/src/components/nav.scss +655 -279
  43. package/src/components/paragraph.scss +1 -1
  44. package/src/components/progress.scss +40 -15
  45. package/src/components/section.scss +1 -1
  46. package/src/components/span.scss +1 -1
  47. package/src/css-variables/color.scss +582 -465
  48. package/src/css-variables/components/dialogue.scss +2 -2
  49. package/src/css-variables/miscellaneous.scss +1 -1
  50. package/src/functions/color.scss +13 -0
  51. package/src/functions/index.scss +1 -0
  52. package/src/functions/string.scss +12 -0
  53. package/src/layouts/centering.scss +1 -1
  54. package/src/layouts/columns.scss +3 -2
  55. package/src/layouts/container.scss +1 -1
  56. package/src/mixins/color.scss +0 -32
  57. package/src/mixins/element.scss +2 -2
  58. package/src/mixins/responsive.scss +2 -1
  59. package/src/utilities/color.scss +2 -6
  60. package/src/variables/color.scss +949 -909
  61. package/src/variables/components/dialogue.scss +2 -2
  62. package/src/variables/miscellaneous.scss +1 -1
package/src/components/nav.scss CHANGED
@@ -2,15 +2,540 @@
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
+ &:hover,
174
+ &.is-hovered,
175
+ &.is-hovered {
176
+ color: var(--#{variables.$prefix}nav-menu-item-color-hover-fore);
177
+ text-shadow:
178
+ 2px 2px 1px
179
+ oklch(
180
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
181
+ h /
182
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
183
+ ),
184
+ -2px 2px 1px
185
+ oklch(
186
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
187
+ h /
188
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
189
+ ),
190
+ 2px -2px 1px
191
+ oklch(
192
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
193
+ h /
194
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
195
+ ),
196
+ -2px -2px 1px
197
+ oklch(
198
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
199
+ h /
200
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
201
+ ),
202
+ 2px 0px 1px
203
+ oklch(
204
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
205
+ h /
206
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
207
+ ),
208
+ 0px 2px 1px
209
+ oklch(
210
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
211
+ h /
212
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
213
+ ),
214
+ -2px 0px 1px
215
+ oklch(
216
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
217
+ h /
218
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
219
+ ),
220
+ 0px -2px 1px
221
+ oklch(
222
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
223
+ h /
224
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
225
+ );
226
+ > .nav-menu-item-icon {
227
+ filter: drop-shadow(
228
+ 2px 2px 1px
229
+ oklch(
230
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
231
+ l c h /
232
+ var(
233
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
234
+ )
235
+ )
236
+ )
237
+ drop-shadow(
238
+ -2px 2px 1px
239
+ oklch(
240
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
241
+ l c h /
242
+ var(
243
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
244
+ )
245
+ )
246
+ )
247
+ drop-shadow(
248
+ 2px -2px 1px
249
+ oklch(
250
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
251
+ l c h /
252
+ var(
253
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
254
+ )
255
+ )
256
+ )
257
+ drop-shadow(
258
+ -2px -2px 1px
259
+ oklch(
260
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
261
+ l c h /
262
+ var(
263
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
264
+ )
265
+ )
266
+ );
267
+ }
268
+ }
269
+ &:active,
270
+ &.is-active {
271
+ color: var(--#{variables.$prefix}nav-menu-item-color-active-fore);
272
+ text-shadow:
273
+ 2px 2px 1px
274
+ oklch(
275
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
276
+ c h /
277
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
278
+ ),
279
+ -2px 2px 1px
280
+ oklch(
281
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
282
+ c h /
283
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
284
+ ),
285
+ 2px -2px 1px
286
+ oklch(
287
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
288
+ c h /
289
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
290
+ ),
291
+ -2px -2px 1px
292
+ oklch(
293
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
294
+ c h /
295
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
296
+ ),
297
+ 2px 0px 1px
298
+ oklch(
299
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
300
+ c h /
301
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
302
+ ),
303
+ 0px 2px 1px
304
+ oklch(
305
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
306
+ c h /
307
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
308
+ ),
309
+ -2px 0px 1px
310
+ oklch(
311
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
312
+ c h /
313
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
314
+ ),
315
+ 0px -2px 1px
316
+ oklch(
317
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
318
+ c h /
319
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
320
+ );
321
+ > .nav-menu-item-icon {
322
+ filter: drop-shadow(
323
+ 2px 2px 1px
324
+ oklch(
325
+ from
326
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
327
+ c h /
328
+ var(
329
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
330
+ )
331
+ )
332
+ )
333
+ drop-shadow(
334
+ -2px 2px 1px
335
+ oklch(
336
+ from
337
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
338
+ c h /
339
+ var(
340
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
341
+ )
342
+ )
343
+ )
344
+ drop-shadow(
345
+ 2px -2px 1px
346
+ oklch(
347
+ from
348
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
349
+ c h /
350
+ var(
351
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
352
+ )
353
+ )
354
+ )
355
+ drop-shadow(
356
+ -2px -2px 1px
357
+ oklch(
358
+ from
359
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
360
+ c h /
361
+ var(
362
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
363
+ )
364
+ )
365
+ );
366
+ }
367
+ }
368
+ &[disabled],
369
+ fieldset[disabled],
370
+ &.is-disabled {
371
+ color: var(--#{variables.$prefix}nav-menu-item-color-disabled-fore);
372
+ text-shadow:
373
+ 2px 2px 1px
374
+ oklch(
375
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
376
+ l c h /
377
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
378
+ ),
379
+ -2px 2px 1px
380
+ oklch(
381
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
382
+ l c h /
383
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
384
+ ),
385
+ 2px -2px 1px
386
+ oklch(
387
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
388
+ l c h /
389
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
390
+ ),
391
+ -2px -2px 1px
392
+ oklch(
393
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
394
+ l c h /
395
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
396
+ ),
397
+ 2px 0px 1px
398
+ oklch(
399
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
400
+ l c h /
401
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
402
+ ),
403
+ 0px 2px 1px
404
+ oklch(
405
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
406
+ l c h /
407
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
408
+ ),
409
+ -2px 0px 1px
410
+ oklch(
411
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
412
+ l c h /
413
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
414
+ ),
415
+ 0px -2px 1px
416
+ oklch(
417
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
418
+ l c h /
419
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
420
+ );
421
+ > .nav-menu-item-icon {
422
+ filter: drop-shadow(
423
+ 2px 2px 1px
424
+ oklch(
425
+ from
426
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
427
+ l c h /
428
+ var(
429
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
430
+ )
431
+ )
432
+ )
433
+ drop-shadow(
434
+ -2px 2px 1px
435
+ oklch(
436
+ from
437
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
438
+ l c h /
439
+ var(
440
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
441
+ )
442
+ )
443
+ )
444
+ drop-shadow(
445
+ 2px -2px 1px
446
+ oklch(
447
+ from
448
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
449
+ l c h /
450
+ var(
451
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
452
+ )
453
+ )
454
+ )
455
+ drop-shadow(
456
+ -2px -2px 1px
457
+ oklch(
458
+ from
459
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
460
+ l c h /
461
+ var(
462
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
463
+ )
464
+ )
465
+ );
466
+ }
467
+ }
468
+ }
469
+ }
470
+
471
+ :where(.nav) {
472
+ --#{variables.$prefix}nav-color-fore: var(
473
+ --#{variables.$prefix}color-default-nav-fore,
474
+ var(--#{variables.$prefix}color-default-fore)
475
+ );
476
+ --#{variables.$prefix}nav-color-back: var(
477
+ --#{variables.$prefix}color-default-nav-back,
478
+ var(--#{variables.$prefix}color-default-back)
479
+ );
480
+ --#{variables.$prefix}nav-color-border: var(
481
+ --#{variables.$prefix}color-default-nav-border,
482
+ var(--#{variables.$prefix}color-default-border)
483
+ );
484
+
485
+ --#{variables.$prefix}nav-menu-item-color-fore: var(
486
+ --#{variables.$prefix}color-default-nav-menu-item-fore,
487
+ var(--#{variables.$prefix}color-default-fore)
488
+ );
489
+ --#{variables.$prefix}nav-menu-item-color-shadow: var(
490
+ --#{variables.$prefix}color-default-nav-menu-item-shadow,
491
+ var(--#{variables.$prefix}color-default-shadow)
492
+ );
493
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha: 0.5;
494
+
495
+ --#{variables.$prefix}nav-menu-item-color-focus-fore: var(
496
+ --#{variables.$prefix}color-default-nav-menu-item-focus-fore,
497
+ var(--#{variables.$prefix}color-default-focus-fore)
498
+ );
499
+ --#{variables.$prefix}nav-menu-item-color-focus-shadow: var(
500
+ --#{variables.$prefix}color-default-nav-menu-item-focus-shadow,
501
+ var(--#{variables.$prefix}color-default-focus-shadow)
502
+ );
503
+
504
+ --#{variables.$prefix}nav-menu-item-color-hover-fore: var(
505
+ --#{variables.$prefix}color-default-nav-menu-item-hover-fore,
506
+ var(--#{variables.$prefix}color-default-hover-fore)
507
+ );
508
+ --#{variables.$prefix}nav-menu-item-color-hover-shadow: var(
509
+ --#{variables.$prefix}color-default-nav-menu-item-hover-shadow,
510
+ var(--#{variables.$prefix}color-default-hover-shadow)
511
+ );
512
+
513
+ --#{variables.$prefix}nav-menu-item-color-active-fore: var(
514
+ --#{variables.$prefix}color-default-nav-menu-item-active-fore,
515
+ var(--#{variables.$prefix}color-default-active-fore)
516
+ );
517
+ --#{variables.$prefix}nav-menu-item-color-active-shadow: var(
518
+ --#{variables.$prefix}color-default-nav-menu-item-active-shadow,
519
+ var(--#{variables.$prefix}color-default-active-shadow)
520
+ );
521
+
522
+ --#{variables.$prefix}nav-menu-item-color-disabled-fore: var(
523
+ --#{variables.$prefix}color-default-nav-menu-item-disabled-fore,
524
+ var(--#{variables.$prefix}color-default-disabled-fore)
525
+ );
526
+ --#{variables.$prefix}nav-menu-item-color-disabled-shadow: var(
527
+ --#{variables.$prefix}color-default-nav-menu-item-disabled-shadow,
528
+ var(--#{variables.$prefix}color-default-disabled-shadow)
529
+ );
530
+
6
531
  @include mixins.element();
7
532
  min-height: 4rem;
8
533
  padding: 0.25rem 0;
9
- .nav-static {
534
+ > .nav-static {
10
535
  @include mixins.element();
11
536
  @include mixins.add-responsible-visible() {
12
537
  display: flex;
13
- .nav-brand {
538
+ > .nav-brand {
14
539
  @include mixins.element();
15
540
  display: flex;
16
541
  flex-basis: 0;
@@ -19,12 +544,12 @@
19
544
  max-width: 100%;
20
545
  margin: auto;
21
546
  position: relative;
22
- .nav-brand-left,
23
- .nav-brand-center,
24
- .nav-brand-right,
25
- .left,
26
- .center,
27
- .right {
547
+ > .nav-brand-left,
548
+ > .nav-brand-center,
549
+ > .nav-brand-right,
550
+ > .left,
551
+ > .center,
552
+ > .right {
28
553
  @include mixins.element();
29
554
  display: block;
30
555
  flex-basis: 0;
@@ -34,21 +559,21 @@
34
559
  margin: auto;
35
560
  position: relative;
36
561
  }
37
- .nav-brand-left,
38
- .left {
562
+ > .nav-brand-left,
563
+ > .left {
39
564
  margin: auto auto auto 0;
40
565
  text-align: left;
41
566
  flex-basis: 30%;
42
567
  max-width: 30%;
43
568
  width: 30%;
44
569
  }
45
- .nav-brand-right,
46
- .right {
570
+ > .nav-brand-right,
571
+ > .right {
47
572
  margin: auto 0 auto auto;
48
573
  text-align: right;
49
574
  }
50
575
  }
51
- .nav-menu {
576
+ > .nav-menu {
52
577
  @include mixins.element();
53
578
  display: flex;
54
579
  flex-basis: 0;
@@ -57,77 +582,14 @@
57
582
  max-width: 100%;
58
583
  margin: auto;
59
584
  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
- }
585
+ > .nav-menu-item {
586
+ @include nav-menu-item-base();
126
587
  }
127
588
  }
128
589
  }
129
590
  }
130
- .nav-accordion {
591
+
592
+ > .nav-accordion {
131
593
  @include mixins.element();
132
594
  @include mixins.add-responsible-visible() {
133
595
  display: block;
@@ -173,67 +635,7 @@
173
635
  display: block;
174
636
  }
175
637
  .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
- }
638
+ @include nav-menu-item-base();
237
639
  }
238
640
  }
239
641
  }
@@ -243,144 +645,118 @@
243
645
  @each $color in variables.$colors {
244
646
  $colorName: map.get($color, "name");
245
647
  &.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
- }
648
+ --#{variables.$prefix}nav-color-fore: var(
649
+ --#{variables.$prefix}color-#{$colorName}-nav-fore,
650
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
651
+ );
652
+ --#{variables.$prefix}nav-color-back: var(
653
+ --#{variables.$prefix}color-#{$colorName}-nav-back,
654
+ var(--#{variables.$prefix}color-#{$colorName}-back)
655
+ );
656
+ --#{variables.$prefix}nav-color-border: var(
657
+ --#{variables.$prefix}color-#{$colorName}-nav-border,
658
+ var(--#{variables.$prefix}color-#{$colorName}-border)
659
+ );
319
660
 
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
- }
661
+ --#{variables.$prefix}nav-menu-item-color-fore: var(
662
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-fore,
663
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
664
+ );
665
+ --#{variables.$prefix}nav-menu-item-color-focus-fore: var(
666
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-fore,
667
+ var(--#{variables.$prefix}color-#{$colorName}-focus-fore)
668
+ );
669
+ --#{variables.$prefix}nav-menu-item-color-hover-fore: var(
670
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-fore,
671
+ var(--#{variables.$prefix}color-#{$colorName}-hover-fore)
672
+ );
673
+ --#{variables.$prefix}nav-menu-item-color-active-fore: var(
674
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-fore,
675
+ var(--#{variables.$prefix}color-#{$colorName}-active-fore)
676
+ );
677
+ --#{variables.$prefix}nav-menu-item-color-disabled-fore: var(
678
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-fore,
679
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-fore)
680
+ );
681
+ --#{variables.$prefix}nav-menu-item-color-shadow: var(
682
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-shadow,
683
+ var(--#{variables.$prefix}color-#{$colorName}-shadow)
684
+ );
685
+ --#{variables.$prefix}nav-menu-item-color-focus-shadow: var(
686
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-shadow,
687
+ var(--#{variables.$prefix}color-#{$colorName}-focus-shadow)
688
+ );
689
+ --#{variables.$prefix}nav-menu-item-color-hover-shadow: var(
690
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-shadow,
691
+ var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
692
+ );
693
+ --#{variables.$prefix}nav-menu-item-color-active-shadow: var(
694
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-shadow,
695
+ var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
696
+ );
697
+ --#{variables.$prefix}nav-menu-item-color-disabled-shadow: var(
698
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-shadow,
699
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-shadow)
700
+ );
701
+ }
702
+ }
703
+
704
+ @each $semanticColor in variables.$semanticColors {
705
+ $colorName: map.get($semanticColor, "name");
706
+ &.is-#{$colorName} {
707
+ --#{variables.$prefix}nav-color-fore: var(
708
+ --#{variables.$prefix}color-#{$colorName}-nav-fore,
709
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
710
+ );
711
+ --#{variables.$prefix}nav-color-back: var(
712
+ --#{variables.$prefix}color-#{$colorName}-nav-back,
713
+ var(--#{variables.$prefix}color-#{$colorName}-back)
714
+ );
715
+ --#{variables.$prefix}nav-color-border: var(
716
+ --#{variables.$prefix}color-#{$colorName}-nav-border,
717
+ var(--#{variables.$prefix}color-#{$colorName}-border)
718
+ );
719
+
720
+ --#{variables.$prefix}nav-menu-item-color-fore: var(
721
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-fore,
722
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
723
+ );
724
+ --#{variables.$prefix}nav-menu-item-color-focus-fore: var(
725
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-fore,
726
+ var(--#{variables.$prefix}color-#{$colorName}-focus-fore)
727
+ );
728
+ --#{variables.$prefix}nav-menu-item-color-hover-fore: var(
729
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-fore,
730
+ var(--#{variables.$prefix}color-#{$colorName}-hover-fore)
731
+ );
732
+ --#{variables.$prefix}nav-menu-item-color-active-fore: var(
733
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-fore,
734
+ var(--#{variables.$prefix}color-#{$colorName}-active-fore)
735
+ );
736
+ --#{variables.$prefix}nav-menu-item-color-disabled-fore: var(
737
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-fore,
738
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-fore)
739
+ );
740
+ --#{variables.$prefix}nav-menu-item-color-shadow: var(
741
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-shadow,
742
+ var(--#{variables.$prefix}color-#{$colorName}-shadow)
743
+ );
744
+ --#{variables.$prefix}nav-menu-item-color-focus-shadow: var(
745
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-shadow,
746
+ var(--#{variables.$prefix}color-#{$colorName}-focus-shadow)
747
+ );
748
+ --#{variables.$prefix}nav-menu-item-color-hover-shadow: var(
749
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-shadow,
750
+ var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
751
+ );
752
+ --#{variables.$prefix}nav-menu-item-color-active-shadow: var(
753
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-shadow,
754
+ var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
755
+ );
756
+ --#{variables.$prefix}nav-menu-item-color-disabled-shadow: var(
757
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-shadow,
758
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-shadow)
759
+ );
384
760
  }
385
761
  }
386
762
  }