@graupl/graupl 1.0.0-alpha.11 → 1.0.0-alpha.13

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 (195) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/dist/base/button.css +2 -0
  3. package/dist/base/button.css.map +1 -0
  4. package/dist/base/form.css +1 -1
  5. package/dist/base/form.css.map +1 -1
  6. package/dist/base/link.css +1 -1
  7. package/dist/base/link.css.map +1 -1
  8. package/dist/base/table.css +1 -1
  9. package/dist/base/table.css.map +1 -1
  10. package/dist/base.css +1 -1
  11. package/dist/base.css.map +1 -1
  12. package/dist/component/card.css +2 -0
  13. package/dist/component/card.css.map +1 -0
  14. package/dist/component/input-group.css +1 -1
  15. package/dist/component/input-group.css.map +1 -1
  16. package/dist/component/menu.css +2 -0
  17. package/dist/component/menu.css.map +1 -0
  18. package/dist/component/navigation.css +2 -0
  19. package/dist/component/navigation.css.map +1 -0
  20. package/dist/component.css +1 -1
  21. package/dist/component.css.map +1 -1
  22. package/dist/graupl.css +1 -1
  23. package/dist/graupl.css.map +1 -1
  24. package/dist/init.css +2 -0
  25. package/dist/init.css.map +1 -0
  26. package/dist/layout/columns.css +1 -1
  27. package/dist/layout/columns.css.map +1 -1
  28. package/dist/layout/container.css.map +1 -1
  29. package/dist/layout/flex-columns.css +2 -0
  30. package/dist/layout/flex-columns.css.map +1 -0
  31. package/dist/layout.css +1 -1
  32. package/dist/layout.css.map +1 -1
  33. package/dist/normalize.css +2 -0
  34. package/dist/normalize.css.map +1 -0
  35. package/dist/state/focus.css.map +1 -1
  36. package/dist/state.css.map +1 -1
  37. package/dist/theme/color.css.map +1 -1
  38. package/dist/theme/typography.css +1 -1
  39. package/dist/theme/typography.css.map +1 -1
  40. package/dist/theme.css +1 -1
  41. package/dist/theme.css.map +1 -1
  42. package/dist/utilities/order.css +2 -0
  43. package/dist/utilities/order.css.map +1 -0
  44. package/dist/utilities/spacing.css +1 -1
  45. package/dist/utilities/spacing.css.map +1 -1
  46. package/dist/utilities/typography.css +1 -1
  47. package/dist/utilities/typography.css.map +1 -1
  48. package/dist/utilities.css +1 -1
  49. package/dist/utilities.css.map +1 -1
  50. package/eslint.config.js +1 -0
  51. package/index.html +619 -326
  52. package/package.json +2 -1
  53. package/scss/base/button.scss +3 -0
  54. package/scss/base/form.scss +1 -1
  55. package/scss/base/link.scss +1 -1
  56. package/scss/base/table.scss +1 -1
  57. package/scss/base.scss +1 -1
  58. package/scss/component/card.scss +3 -0
  59. package/scss/component/input-group.scss +1 -1
  60. package/scss/component/menu.scss +3 -0
  61. package/scss/component/navigation.scss +3 -0
  62. package/scss/component.scss +1 -1
  63. package/scss/graupl.scss +1 -3
  64. package/scss/init.scss +3 -0
  65. package/scss/layout/columns.scss +1 -1
  66. package/scss/layout/container.scss +1 -1
  67. package/scss/layout/flex-columns.scss +3 -0
  68. package/scss/layout.scss +1 -1
  69. package/scss/normalize.scss +3 -0
  70. package/scss/state/focus.scss +1 -1
  71. package/scss/state.scss +1 -1
  72. package/scss/theme/color.scss +1 -1
  73. package/scss/theme/typography.scss +1 -1
  74. package/scss/theme.scss +1 -1
  75. package/scss/utilities/alignment.scss +1 -1
  76. package/scss/utilities/color.scss +1 -1
  77. package/scss/utilities/display.scss +1 -1
  78. package/scss/utilities/flex.scss +1 -1
  79. package/scss/utilities/inset.scss +1 -1
  80. package/scss/utilities/justification.scss +1 -1
  81. package/scss/utilities/list.scss +1 -1
  82. package/scss/utilities/order.scss +3 -0
  83. package/scss/utilities/postion.scss +1 -1
  84. package/scss/utilities/spacing.scss +1 -1
  85. package/scss/utilities/typography.scss +1 -1
  86. package/scss/utilities/visibility.scss +1 -1
  87. package/scss/utilities.scss +1 -1
  88. package/src/js/navigation.js +34 -0
  89. package/src/scss/_defaults.scss +21 -5
  90. package/src/scss/_index.scss +4 -3
  91. package/src/scss/_init.scss +2 -2
  92. package/src/scss/_normalize.scss +197 -0
  93. package/src/scss/_variables.scss +4 -1
  94. package/src/scss/base/_index.scss +2 -1
  95. package/src/scss/base/button/_defaults.scss +53 -0
  96. package/src/scss/base/button/_index.scss +210 -0
  97. package/src/scss/{component → base}/button/_variables.scss +51 -12
  98. package/src/scss/base/form/_defaults.scss +14 -4
  99. package/src/scss/base/form/_index.scss +23 -20
  100. package/src/scss/base/form/_variables.scss +12 -1
  101. package/src/scss/base/link/_defaults.scss +48 -5
  102. package/src/scss/base/link/_index.scss +101 -17
  103. package/src/scss/base/link/_variables.scss +226 -5
  104. package/src/scss/base/table/_defaults.scss +49 -4
  105. package/src/scss/base/table/_index.scss +102 -8
  106. package/src/scss/base/table/_variables.scss +71 -1
  107. package/src/scss/component/_index.scss +4 -3
  108. package/src/scss/component/card/_defaults.scss +29 -0
  109. package/src/scss/component/card/_index.scss +143 -0
  110. package/src/scss/component/card/_variables.scss +185 -0
  111. package/src/scss/component/input-group/_defaults.scss +11 -4
  112. package/src/scss/component/input-group/_index.scss +11 -9
  113. package/src/scss/component/input-group/_variables.scss +4 -1
  114. package/src/scss/component/menu/_defaults.scss +65 -0
  115. package/src/scss/component/menu/_index.scss +304 -0
  116. package/src/scss/component/menu/_variables.scss +491 -0
  117. package/src/scss/component/navigation/_defaults.scss +29 -0
  118. package/src/scss/component/navigation/_index.scss +189 -0
  119. package/src/scss/component/navigation/_variables.scss +237 -0
  120. package/src/scss/functions/_important.scss +2 -0
  121. package/src/scss/functions/_theme.scss +18 -0
  122. package/src/scss/layout/_index.scss +2 -1
  123. package/src/scss/layout/columns/_defaults.scss +12 -4
  124. package/src/scss/layout/columns/_index.scss +27 -5
  125. package/src/scss/layout/columns/_variables.scss +4 -1
  126. package/src/scss/layout/container/_defaults.scss +13 -4
  127. package/src/scss/layout/container/_index.scss +12 -7
  128. package/src/scss/layout/container/_variables.scss +4 -1
  129. package/src/scss/layout/flex-columns/_defaults.scss +18 -0
  130. package/src/scss/layout/flex-columns/_index.scss +77 -0
  131. package/src/scss/layout/flex-columns/_variables.scss +26 -0
  132. package/src/scss/mixins/_layer.scss +1 -1
  133. package/src/scss/mixins/_media-queries.scss +10 -1
  134. package/src/scss/state/_index.scss +1 -1
  135. package/src/scss/state/focus/_defaults.scss +6 -4
  136. package/src/scss/state/focus/_index.scss +1 -1
  137. package/src/scss/state/focus/_variables.scss +4 -1
  138. package/src/scss/theme/_index.scss +1 -1
  139. package/src/scss/theme/color/_defaults.scss +6 -4
  140. package/src/scss/theme/color/_index.scss +1 -1
  141. package/src/scss/theme/color/_variables.scss +4 -1
  142. package/src/scss/theme/typography/_defaults.scss +7 -5
  143. package/src/scss/theme/typography/_index.scss +1 -1
  144. package/src/scss/theme/typography/_variables.scss +9 -3
  145. package/src/scss/utilities/_index.scss +3 -1
  146. package/src/scss/utilities/alignment/_defaults.scss +6 -4
  147. package/src/scss/utilities/alignment/_index.scss +1 -1
  148. package/src/scss/utilities/alignment/_variables.scss +4 -1
  149. package/src/scss/utilities/color/_defaults.scss +6 -4
  150. package/src/scss/utilities/color/_index.scss +1 -1
  151. package/src/scss/utilities/color/_variables.scss +4 -1
  152. package/src/scss/utilities/display/_defaults.scss +6 -4
  153. package/src/scss/utilities/display/_index.scss +1 -1
  154. package/src/scss/utilities/display/_variables.scss +4 -1
  155. package/src/scss/utilities/flex/_defaults.scss +6 -4
  156. package/src/scss/utilities/flex/_index.scss +1 -1
  157. package/src/scss/utilities/flex/_variables.scss +4 -1
  158. package/src/scss/utilities/inset/_defaults.scss +6 -4
  159. package/src/scss/utilities/inset/_index.scss +1 -1
  160. package/src/scss/utilities/inset/_variables.scss +4 -1
  161. package/src/scss/utilities/justification/_defaults.scss +6 -4
  162. package/src/scss/utilities/justification/_index.scss +1 -1
  163. package/src/scss/utilities/justification/_variables.scss +4 -1
  164. package/src/scss/utilities/list/_defaults.scss +6 -4
  165. package/src/scss/utilities/list/_index.scss +1 -1
  166. package/src/scss/utilities/list/_variables.scss +4 -1
  167. package/src/scss/utilities/order/_defaults.scss +19 -0
  168. package/src/scss/utilities/order/_index.scss +35 -0
  169. package/src/scss/utilities/order/_variables.scss +6 -0
  170. package/src/scss/utilities/position/_defaults.scss +6 -4
  171. package/src/scss/utilities/position/_index.scss +1 -1
  172. package/src/scss/utilities/position/_variables.scss +4 -1
  173. package/src/scss/utilities/ratio/_defaults.scss +24 -0
  174. package/src/scss/utilities/ratio/_index.scss +26 -0
  175. package/src/scss/utilities/ratio/_variables.scss +9 -0
  176. package/src/scss/utilities/spacing/_defaults.scss +6 -4
  177. package/src/scss/utilities/spacing/_index.scss +41 -17
  178. package/src/scss/utilities/spacing/_variables.scss +4 -1
  179. package/src/scss/utilities/typography/_defaults.scss +6 -4
  180. package/src/scss/utilities/typography/_index.scss +1 -1
  181. package/src/scss/utilities/typography/_variables.scss +4 -1
  182. package/src/scss/utilities/visibility/_defaults.scss +6 -4
  183. package/src/scss/utilities/visibility/_index.scss +1 -1
  184. package/src/scss/utilities/visibility/_variables.scss +4 -1
  185. package/dist/component/button.css +0 -2
  186. package/dist/component/button.css.map +0 -1
  187. package/dist/component/table.css +0 -2
  188. package/dist/component/table.css.map +0 -1
  189. package/scss/component/button.scss +0 -3
  190. package/scss/component/table.scss +0 -3
  191. package/src/scss/component/button/_defaults.scss +0 -39
  192. package/src/scss/component/button/_index.scss +0 -134
  193. package/src/scss/component/table/_defaults.scss +0 -30
  194. package/src/scss/component/table/_index.scss +0 -77
  195. package/src/scss/component/table/_variables.scss +0 -64
package/src/scss/component/menu/_index.scss ADDED
@@ -0,0 +1,304 @@
1
+ // @gruapl/graupl menu component styles.
2
+
3
+ @use "defaults";
4
+ @use "variables" as *;
5
+ @use "../../defaults" as root-defaults;
6
+ @use "../../base/button/defaults" as button-defaults;
7
+ @use "../../base/button/variables" as button-variables;
8
+ @use "../../mixins/layer" as *;
9
+ @use "../../mixins/media-queries" as *;
10
+
11
+ @include layer(component) {
12
+ #{defaults.$menu-selector} {
13
+ --#{root-defaults.$prefix}-link-padding: #{$menu-link-padding};
14
+ --#{root-defaults.$prefix}-link-border-width: #{$menu-link-border-width};
15
+ --#{root-defaults.$prefix}-link-border-radius: #{$menu-link-border-radius};
16
+ --#{root-defaults.$prefix}-link-border-style: #{$menu-link-border-style};
17
+ --#{root-defaults.$prefix}-link-text-decoration: #{$menu-link-text-decoration};
18
+ --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$menu-link-text-decoration-thickness};
19
+ --#{root-defaults.$prefix}-link-text-decoration-style: #{$menu-link-text-decoration-style};
20
+ --#{root-defaults.$prefix}-link-transform: #{$menu-link-transform};
21
+ --#{root-defaults.$prefix}-link-visited-text-decoration: #{$menu-link-visited-text-decoration};
22
+ --#{root-defaults.$prefix}-link-visited-text-decoration-thickness: #{$menu-link-visited-text-decoration-thickness};
23
+ --#{root-defaults.$prefix}-link-visited-text-decoration-style: #{$menu-link-visited-text-decoration-style};
24
+ --#{root-defaults.$prefix}-link-visited-transform: #{$menu-link-visited-transform};
25
+ --#{root-defaults.$prefix}-link-focus-text-decoration: #{$menu-link-focus-text-decoration};
26
+ --#{root-defaults.$prefix}-link-focus-text-decoration-thickness: #{$menu-link-focus-text-decoration-thickness};
27
+ --#{root-defaults.$prefix}-link-focus-text-decoration-style: #{$menu-link-focus-text-decoration-style};
28
+ --#{root-defaults.$prefix}-link-focus-transform: #{$menu-link-focus-transform};
29
+ --#{root-defaults.$prefix}-link-hover-text-decoration: #{$menu-link-hover-text-decoration};
30
+ --#{root-defaults.$prefix}-link-hover-text-decoration-thickness: #{$menu-link-hover-text-decoration-thickness};
31
+ --#{root-defaults.$prefix}-link-hover-text-decoration-style: #{$menu-link-hover-text-decoration-style};
32
+ --#{root-defaults.$prefix}-link-hover-transform: #{$menu-link-hover-transform};
33
+ --#{root-defaults.$prefix}-link-active-text-decoration: #{$menu-link-active-text-decoration};
34
+ --#{root-defaults.$prefix}-link-active-text-decoration-thickness: #{$menu-link-active-text-decoration-thickness};
35
+ --#{root-defaults.$prefix}-link-active-text-decoration-style: #{$menu-link-active-text-decoration-style};
36
+ --#{root-defaults.$prefix}-link-active-transform: #{$menu-link-active-transform};
37
+ --#{root-defaults.$prefix}-link-disabled-text-decoration: #{$menu-link-disabled-text-decoration};
38
+ --#{root-defaults.$prefix}-link-disabled-text-decoration-thickness: #{$menu-link-disabled-text-decoration-thickness};
39
+ --#{root-defaults.$prefix}-link-disabled-text-decoration-style: #{$menu-link-disabled-text-decoration-style};
40
+ --#{root-defaults.$prefix}-link-disabled-transform: #{$menu-link-disabled-transform};
41
+
42
+ display: $menu-display;
43
+ flex-direction: $menu-flex-direction;
44
+ padding: $menu-padding;
45
+ border: $menu-border;
46
+ border-radius: $menu-border-radius;
47
+ list-style: none;
48
+ gap: $menu-gap;
49
+ isolation: isolate;
50
+
51
+ &#{defaults.$menu-show-selector} {
52
+ --#{root-defaults.$prefix}-menu-display: #{$menu-show-display};
53
+ }
54
+
55
+ &#{defaults.$menu-hide-selector} {
56
+ --#{root-defaults.$prefix}-menu-display: #{$menu-hide-display};
57
+ }
58
+ }
59
+
60
+ #{defaults.$submenu-selector} {
61
+ display: $submenu-display;
62
+ position: $submenu-position;
63
+ z-index: $submenu-z-index;
64
+ flex: 1 1;
65
+ flex-direction: $submenu-flex-direction;
66
+ padding: $submenu-padding;
67
+ border: $submenu-border;
68
+ border-radius: $submenu-border-radius;
69
+ list-style: none;
70
+ gap: $submenu-gap;
71
+ isolation: isolate;
72
+ inset: $submenu-inset;
73
+
74
+ &#{defaults.$menu-show-selector} {
75
+ --#{root-defaults.$prefix}-submenu-display: #{$submenu-show-display};
76
+ }
77
+
78
+ &#{defaults.$menu-hide-selector} {
79
+ --#{root-defaults.$prefix}-submenu-display: #{$submenu-hide-display};
80
+ }
81
+ }
82
+
83
+ #{defaults.$menu-item-selector} {
84
+ display: flex;
85
+ position: relative;
86
+ flex-wrap: wrap;
87
+ align-items: center;
88
+ justify-content: center;
89
+ min-width: $menu-item-min-width;
90
+ padding: $menu-item-padding;
91
+ }
92
+
93
+ #{defaults.$menu-link-selector} {
94
+ display: flex;
95
+ width: 100%;
96
+ padding: $menu-link-padding;
97
+ transform: $menu-link-transform;
98
+ transition: $menu-link-transition;
99
+ border: $menu-link-border;
100
+ border-radius: $menu-link-border-radius;
101
+ text-decoration: $menu-link-text-decoration;
102
+ text-decoration-style: $menu-link-text-decoration-style;
103
+ gap: $menu-link-gap;
104
+ text-decoration-thickness: $menu-link-text-decoration-thickness;
105
+
106
+ &:visited {
107
+ --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-visited-text-decoration};
108
+ --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-visited-text-decoration-thickness};
109
+ --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-visited-text-decoration-style};
110
+ --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-visited-transform};
111
+ }
112
+
113
+ &:focus-visible {
114
+ --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-focus-text-decoration};
115
+ --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-focus-text-decoration-thickness};
116
+ --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-focus-text-decoration-style};
117
+ --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-focus-transform};
118
+ }
119
+
120
+ &:hover {
121
+ --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-hover-text-decoration};
122
+ --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-hover-text-decoration-thickness};
123
+ --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-hover-text-decoration-style};
124
+ --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-hover-transform};
125
+ }
126
+
127
+ &:active {
128
+ --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-active-text-decoration};
129
+ --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-active-text-decoration-thickness};
130
+ --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-active-text-decoration-style};
131
+ --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-active-transform};
132
+ }
133
+
134
+ &:disabled,
135
+ &[disabled] {
136
+ &,
137
+ &:visited,
138
+ &:focus-visible,
139
+ &:hover,
140
+ &:active {
141
+ --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-disabled-text-decoration};
142
+ --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-disabled-text-decoration-thickness};
143
+ --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-disabled-text-decoration-style};
144
+ --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-disabled-transform};
145
+ }
146
+ }
147
+
148
+ &#{button-defaults.$button-selector} {
149
+ --#{root-defaults.$prefix}-menu-link-padding: #{button-variables.$button-padding};
150
+ --#{root-defaults.$prefix}-menu-link-border-width: #{button-variables.$button-border-width};
151
+ --#{root-defaults.$prefix}-menu-link-border-radius: #{button-variables.$button-border-radius};
152
+ --#{root-defaults.$prefix}-menu-link-border-style: #{button-variables.$button-border-style};
153
+ --#{root-defaults.$prefix}-menu-link-text-decoration: none;
154
+ --#{root-defaults.$prefix}-menu-link-visited-text-decoration: none;
155
+ --#{root-defaults.$prefix}-menu-link-focus-text-decoration: none;
156
+ --#{root-defaults.$prefix}-menu-link-hover-text-decoration: none;
157
+ --#{root-defaults.$prefix}-menu-link-active-text-decoration: none;
158
+ --#{root-defaults.$prefix}-menu-link-disabled-text-decoration: none;
159
+ --#{root-defaults.$prefix}-menu-link-transition: #{button-variables.$button-transition};
160
+ --#{root-defaults.$prefix}-menu-link-transition-reduced-motion: #{button-variables.$button-transition-reduced-motion};
161
+ --#{root-defaults.$prefix}-menu-link-transform: #{button-variables.$button-transform};
162
+ --#{root-defaults.$prefix}-menu-link-visited-transform: #{button-variables.$button-visited-transform};
163
+ --#{root-defaults.$prefix}-menu-link-focus-transform: #{button-variables.$button-focus-transform};
164
+ --#{root-defaults.$prefix}-menu-link-hover-transform: #{button-variables.$button-hover-transform};
165
+ --#{root-defaults.$prefix}-menu-link-active-transform: #{button-variables.$button-active-transform};
166
+ --#{root-defaults.$prefix}-menu-link-disabled-transform: #{button-variables.$button-disabled-transform};
167
+ }
168
+ }
169
+
170
+ #{defaults.$submenu-toggle-selector} {
171
+ display: flex;
172
+ align-items: center;
173
+ justify-content: space-between;
174
+
175
+ &::after {
176
+ content: $submenu-toggle-content;
177
+ display: block;
178
+ transform: $submenu-toggle-transform;
179
+ transition: $submenu-toggle-transition;
180
+ }
181
+
182
+ &[aria-expanded="true"]::after {
183
+ --#{root-defaults.$prefix}-submenu-toggle-transform: #{$submenu-toggle-open-transform};
184
+ }
185
+ }
186
+
187
+ @include animation-off {
188
+ #{defaults.$menu-link-selector} {
189
+ --#{root-defaults.$prefix}-menu-link-transition: #{$menu-link-transition-reduced-motion};
190
+ }
191
+
192
+ #{defaults.$submenu-toggle-selector}::after {
193
+ --#{root-defaults.$prefix}-submenu-toggle-transition: #{$submenu-toggle-transition-reduced-motion};
194
+ }
195
+ }
196
+ }
197
+
198
+ @include layer(theme) {
199
+ #{defaults.$menu-selector} {
200
+ --#{root-defaults.$prefix}-link-color: #{$menu-link-color};
201
+ --#{root-defaults.$prefix}-link-background: #{$menu-link-background};
202
+ --#{root-defaults.$prefix}-link-border-color: #{$menu-link-border-color};
203
+ --#{root-defaults.$prefix}-link-text-decoration-color: #{$menu-link-text-decoration-color};
204
+ --#{root-defaults.$prefix}-link-visited-color: #{$menu-link-visited-color};
205
+ --#{root-defaults.$prefix}-link-visited-background: #{$menu-link-visited-background};
206
+ --#{root-defaults.$prefix}-link-visited-border-color: #{$menu-link-visited-border-color};
207
+ --#{root-defaults.$prefix}-link-visited-text-decoration-color: #{$menu-link-visited-text-decoration-color};
208
+ --#{root-defaults.$prefix}-link-focus-color: #{$menu-link-focus-color};
209
+ --#{root-defaults.$prefix}-link-focus-background: #{$menu-link-focus-background};
210
+ --#{root-defaults.$prefix}-link-focus-border-color: #{$menu-link-focus-border-color};
211
+ --#{root-defaults.$prefix}-link-focus-text-decoration-color: #{$menu-link-focus-text-decoration-color};
212
+ --#{root-defaults.$prefix}-link-hover-color: #{$menu-link-hover-color};
213
+ --#{root-defaults.$prefix}-link-hover-background: #{$menu-link-hover-background};
214
+ --#{root-defaults.$prefix}-link-hover-border-color: #{$menu-link-hover-border-color};
215
+ --#{root-defaults.$prefix}-link-hover-text-decoration-color: #{$menu-link-hover-text-decoration-color};
216
+ --#{root-defaults.$prefix}-link-active-color: #{$menu-link-active-color};
217
+ --#{root-defaults.$prefix}-link-active-background: #{$menu-link-active-background};
218
+ --#{root-defaults.$prefix}-link-active-border-color: #{$menu-link-active-border-color};
219
+ --#{root-defaults.$prefix}-link-active-text-decoration-color: #{$menu-link-active-text-decoration-color};
220
+ --#{root-defaults.$prefix}-link-disabled-color: #{$menu-link-disabled-color};
221
+ --#{root-defaults.$prefix}-link-disabled-background: #{$menu-link-disabled-background};
222
+ --#{root-defaults.$prefix}-link-disabled-border-color: #{$menu-link-disabled-border-color};
223
+ --#{root-defaults.$prefix}-link-disabled-text-decoration-color: #{$menu-link-disabled-text-decoration-color};
224
+
225
+ border-color: $menu-border-color;
226
+ background: $menu-background;
227
+ color: $menu-color;
228
+ }
229
+
230
+ #{defaults.$submenu-selector} {
231
+ border-color: $submenu-border-color;
232
+ background: $submenu-background;
233
+ color: $submenu-color;
234
+ }
235
+
236
+ #{defaults.$menu-link-selector} {
237
+ border-color: $menu-link-border-color;
238
+ background: $menu-link-background;
239
+ color: $menu-link-color;
240
+ text-decoration-color: $menu-link-text-decoration-color;
241
+
242
+ &:visited {
243
+ --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-visited-background};
244
+ --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-visited-color};
245
+ --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-visited-text-decoration-color};
246
+ --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-visited-border-color};
247
+ }
248
+
249
+ &:focus-visible {
250
+ --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-focus-background};
251
+ --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-focus-color};
252
+ --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-focus-text-decoration-color};
253
+ --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-focus-border-color};
254
+ }
255
+
256
+ &:hover {
257
+ --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-hover-background};
258
+ --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-hover-color};
259
+ --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-hover-text-decoration-color};
260
+ --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-hover-border-color};
261
+ }
262
+
263
+ &:active {
264
+ --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-active-background};
265
+ --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-active-color};
266
+ --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-active-text-decoration-color};
267
+ --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-active-border-color};
268
+ }
269
+
270
+ &:disabled {
271
+ &,
272
+ &:hover,
273
+ &:active,
274
+ &:focus-visible,
275
+ &:visited {
276
+ --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-disabled-background};
277
+ --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-disabled-color};
278
+ --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-disabled-text-decoration-color};
279
+ --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-disabled-border-color};
280
+ }
281
+ }
282
+
283
+ &#{button-defaults.$button-selector} {
284
+ --#{root-defaults.$prefix}-menu-link-background: #{button-variables.$button-background};
285
+ --#{root-defaults.$prefix}-menu-link-color: #{button-variables.$button-color};
286
+ --#{root-defaults.$prefix}-menu-link-border-color: #{button-variables.$button-border-color};
287
+ --#{root-defaults.$prefix}-menu-link-visited-background: #{button-variables.$button-visited-background};
288
+ --#{root-defaults.$prefix}-menu-link-visited-color: #{button-variables.$button-visited-color};
289
+ --#{root-defaults.$prefix}-menu-link-visited-border-color: #{button-variables.$button-visited-border-color};
290
+ --#{root-defaults.$prefix}-menu-link-focus-background: #{button-variables.$button-focus-background};
291
+ --#{root-defaults.$prefix}-menu-link-focus-color: #{button-variables.$button-focus-color};
292
+ --#{root-defaults.$prefix}-menu-link-focus-border-color: #{button-variables.$button-focus-border-color};
293
+ --#{root-defaults.$prefix}-menu-link-hover-background: #{button-variables.$button-hover-background};
294
+ --#{root-defaults.$prefix}-menu-link-hover-color: #{button-variables.$button-hover-color};
295
+ --#{root-defaults.$prefix}-menu-link-hover-border-color: #{button-variables.$button-hover-border-color};
296
+ --#{root-defaults.$prefix}-menu-link-active-background: #{button-variables.$button-active-background};
297
+ --#{root-defaults.$prefix}-menu-link-active-color: #{button-variables.$button-active-color};
298
+ --#{root-defaults.$prefix}-menu-link-active-border-color: #{button-variables.$button-active-border-color};
299
+ --#{root-defaults.$prefix}-menu-link-disabled-background: #{button-variables.$button-disabled-background};
300
+ --#{root-defaults.$prefix}-menu-link-disabled-color: #{button-variables.$button-disabled-color};
301
+ --#{root-defaults.$prefix}-menu-link-disabled-border-color: #{button-variables.$button-disabled-border-color};
302
+ }
303
+ }
304
+ }