@dictu/navigation-bar 4.0.0 → 4.1.1
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.
- package/CHANGELOG.md +17 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
- package/src/_mixin.scss +12 -31
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @dictu/navigation-bar
|
|
2
2
|
|
|
3
|
+
## 4.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 2021afd: Changed min-inline-size stretch to fit-content.
|
|
8
|
+
|
|
9
|
+
## 4.1.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 334488f: Added z-index for dropdown, changed svg icon for mobile menu close
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- a88d94f: Fixed minor bug with styling of mobile submenu, where text would
|
|
18
|
+
overflow outside the menu bounds
|
|
19
|
+
|
|
3
20
|
## 4.0.0
|
|
4
21
|
|
|
5
22
|
### Major Changes
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.dictu-focus-ring:focus-visible{outline:var(--govnl-focus-outline-color, revert) var(--govnl-focus-outline-style, revert) var(--govnl-focus-outline-width, revert);outline-offset:var(--govnl-focus-outline-offset, revert);z-index:1}.dictu-navigation-bar{margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;background-color:var(--govnl-nav-bar-background-color);border-block-end:var(--govnl-nav-bar-border-block-end-width) solid var(--govnl-nav-bar-border-color);color:var(--govnl-nav-bar-color);display:flex;max-inline-size:var(--govnl-nav-bar-max-inline-size);padding-inline:var(--govnl-nav-bar-padding-inline)}.dictu-navigation-bar__list{display:flex;gap:var(--govnl-nav-bar-content-column-gap);list-style:none;margin:0;padding:0}.dictu-navigation-bar__item:has(.dictu-navigation-bar__submenu-toggler){position:relative}.dictu-navigation-bar__submenu-toggler{align-items:center;background-color:var(--govnl-nav-bar-submenu-toggler-background-color);border-width:var(--govnl-nav-bar-submenu-toggler-border-width);box-sizing:border-box;color:var(--govnl-nav-bar-submenu-toggler-color);column-gap:calc(var(--govnl-nav-bar-submenu-toggler-column-gap));display:flex;font-size:inherit;height:100%;padding-block:var(--govnl-nav-bar-submenu-toggler-padding-block);padding-inline:var(--govnl-nav-bar-submenu-toggler-padding-inline);text-decoration:var(--govnl-nav-bar-submenu-toggler-text-decoration)}.dictu-navigation-bar__submenu-toggler[aria-expanded=true]{background-color:var(--govnl-nav-bar-submenu-toggler-expanded-background-color);font-weight:var(--govnl-nav-bar-submenu-toggler-expanded-font-weight)}.dictu-navigation-bar__submenu-toggler:hover{background-color:var(--govnl-nav-bar-link-hover-background-color);color:var(--govnl-nav-bar-link-hover-color)}.dictu-navigation-bar__submenu-toggler:active{background-color:var(--govnl-nav-bar-link-active-background-color);color:var(--govnl-nav-bar-link-active-color)}.dictu-navigation-bar__submenu-toggler:focus-visible:not(:active){background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__link{align-items:center;background-color:var(--govnl-nav-bar-link-background-color);box-sizing:border-box;color:var(--govnl-nav-bar-link-color);column-gap:calc(var(--govnl-nav-bar-link-column-gap));display:flex;height:100%;padding-block:var(--govnl-nav-bar-link-padding-block);padding-inline:var(--govnl-nav-bar-link-padding-inline);text-decoration:var(--govnl-nav-bar-link-text-decoration)}.dictu-navigation-bar__link:hover{background-color:var(--govnl-nav-bar-link-hover-background-color);color:var(--govnl-nav-bar-link-hover-color)}.dictu-navigation-bar__link:
|
|
1
|
+
.dictu-focus-ring:focus-visible{outline:var(--govnl-focus-outline-color, revert) var(--govnl-focus-outline-style, revert) var(--govnl-focus-outline-width, revert);outline-offset:var(--govnl-focus-outline-offset, revert);z-index:1}.dictu-navigation-bar{margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;background-color:var(--govnl-nav-bar-background-color);border-block-end:var(--govnl-nav-bar-border-block-end-width) solid var(--govnl-nav-bar-border-color);color:var(--govnl-nav-bar-color);display:flex;max-inline-size:var(--govnl-nav-bar-max-inline-size);padding-inline:var(--govnl-nav-bar-padding-inline)}.dictu-navigation-bar__list{display:flex;gap:var(--govnl-nav-bar-content-column-gap);list-style:none;margin:0;padding:0}.dictu-navigation-bar__item:has(.dictu-navigation-bar__submenu-toggler){position:relative}.dictu-navigation-bar__submenu-toggler{align-items:center;background-color:var(--govnl-nav-bar-submenu-toggler-background-color);border-width:var(--govnl-nav-bar-submenu-toggler-border-width);box-sizing:border-box;color:var(--govnl-nav-bar-submenu-toggler-color);column-gap:calc(var(--govnl-nav-bar-submenu-toggler-column-gap));display:flex;font-size:inherit;height:100%;padding-block:var(--govnl-nav-bar-submenu-toggler-padding-block);padding-inline:var(--govnl-nav-bar-submenu-toggler-padding-inline);text-decoration:var(--govnl-nav-bar-submenu-toggler-text-decoration)}.dictu-navigation-bar__submenu-toggler[aria-expanded=true]{background-color:var(--govnl-nav-bar-submenu-toggler-expanded-background-color);font-weight:var(--govnl-nav-bar-submenu-toggler-expanded-font-weight)}.dictu-navigation-bar__submenu-toggler:hover{background-color:var(--govnl-nav-bar-link-hover-background-color);color:var(--govnl-nav-bar-link-hover-color)}.dictu-navigation-bar__submenu-toggler:active{background-color:var(--govnl-nav-bar-link-active-background-color);color:var(--govnl-nav-bar-link-active-color)}.dictu-navigation-bar__submenu-toggler:focus-visible:not(:active){background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__link{align-items:center;background-color:var(--govnl-nav-bar-link-background-color);box-sizing:border-box;color:var(--govnl-nav-bar-link-color);column-gap:calc(var(--govnl-nav-bar-link-column-gap));display:flex;height:100%;padding-block:var(--govnl-nav-bar-link-padding-block);padding-inline:var(--govnl-nav-bar-link-padding-inline);text-decoration:var(--govnl-nav-bar-link-text-decoration)}.dictu-navigation-bar__link:hover{background-color:var(--govnl-nav-bar-link-hover-background-color);color:var(--govnl-nav-bar-link-hover-color)}.dictu-navigation-bar__link:active{background-color:var(--govnl-nav-bar-link-active-background-color);color:var(--govnl-nav-bar-link-active-color)}.dictu-navigation-bar__link:focus-visible:not(:active){background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__icon{--govnl-icon-size: var(--govnl-nav-bar-icon-size);align-items:center;color:var(--govnl-nav-bar-icon-color);display:inline-flex;justify-content:center}.dictu-navigation-bar__toggle{align-items:center;background-color:var(--govnl-nav-bar-submenu-toggler-background-color);border-width:var(--govnl-nav-bar-submenu-toggler-border-width);box-sizing:border-box;color:var(--govnl-nav-bar-submenu-toggler-color);column-gap:calc(var(--govnl-nav-bar-submenu-toggler-column-gap));display:none;font-size:inherit;height:100%;padding-block:var(--govnl-nav-bar-submenu-toggler-padding-block);padding-inline:var(--govnl-nav-bar-submenu-toggler-padding-inline);text-decoration:var(--govnl-nav-bar-submenu-toggler-text-decoration)}.dictu-navigation-bar__toggle[aria-expanded=true]{background-color:var(--govnl-nav-bar-submenu-toggler-expanded-background-color)}.dictu-navigation-bar__toggle:hover{background-color:var(--govnl-nav-bar-link-hover-background-color);color:var(--govnl-nav-bar-link-hover-color)}.dictu-navigation-bar__toggle:active{background-color:var(--govnl-nav-bar-link-active-background-color);color:var(--govnl-nav-bar-link-active-color)}.dictu-navigation-bar__toggle:focus-visible:not(:active){background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__menu-icon{--govnl-icon-size: var(--govnl-nav-bar-icon-size);color:var(--govnl-nav-bar-icon-color)}.dictu-navigation-bar__submenu{background-color:var(--govnl-nav-bar-submenu-background-color);border-bottom-left-radius:var(--govnl-nav-bar-submenu-border-bottom-left-radius);border-bottom-right-radius:var(--govnl-nav-bar-submenu-border-bottom-right-radius);min-inline-size:100%;overflow-wrap:break-word;padding-block:var(--govnl-nav-bar-submenu-padding-block-start) var(--govnl-nav-bar-submenu-padding-block-end);padding-inline:var(--govnl-nav-bar-submenu-padding-inline-start) var(--govnl-nav-bar-submenu-padding-inline-end);position:absolute;top:100%;z-index:var(--govnl-nav-bar-submenu-z-index, 1)}.dictu-navigation-bar__submenu-list{margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style-type:none}.dictu-navigation-bar__submenu-item{display:flex}.dictu-navigation-bar__submenu-link{background-color:rgba(0,0,0,0);inline-size:100%;padding-block:var(--govnl-nav-bar-submenu-link-padding-block-start) var(--govnl-nav-bar-submenu-link-padding-block-end);padding-inline:var(--govnl-nav-bar-submenu-link-padding-inline-start) var(--govnl-nav-bar-submenu-link-padding-inline-end)}@media(width <= 48em){.dictu-navigation-bar{flex-direction:column}.dictu-navigation-bar__submenu{background-color:rgba(0,0,0,0);border-bottom-left-radius:0;border-bottom-right-radius:0;min-inline-size:fit-content;overflow-wrap:initial;padding-block:var(--govnl-nav-bar-mobile-submenu-padding-block-start) var(--govnl-nav-bar-mobile-submenu-padding-block-end);padding-inline:var(--govnl-nav-bar-mobile-submenu-padding-inline-start) var(--govnl-nav-bar-mobile-submenu-padding-inline-end);position:relative;top:0}.dictu-navigation-bar__submenu-toggler{background-color:rgba(0,0,0,0);justify-content:space-between;width:100%}.dictu-navigation-bar__toggle{display:flex}.dictu-navigation-bar__list{background-color:var(--govnl-nav-bar-submenu-background-color);flex-direction:column}.dictu-navigation-bar__link{background-color:rgba(0,0,0,0)}.dictu-navigation-bar__submenu-link{width:100%}}/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../node_modules/@dictu/utility-focus-ring/dist/index.css","../src/index.scss","../src/_mixin.scss"],"names":[],"mappings":"AAAA,sOCSA,sBCHE,eACA,gBACA,gBACA,iBAMA,uDACA,qGACA,iCACA,aACA,qDACA,mDDPF,4BCeE,aACA,4CACA,gBACA,SACA,UDdA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../node_modules/@dictu/utility-focus-ring/dist/index.css","../src/index.scss","../src/_mixin.scss"],"names":[],"mappings":"AAAA,sOCSA,sBCHE,eACA,gBACA,gBACA,iBAMA,uDACA,qGACA,iCACA,aACA,qDACA,mDDPF,4BCeE,aACA,4CACA,gBACA,SACA,UDdA,wECiHA,kBD5GF,uCCgHE,mBACA,uEACA,+DACA,sBACA,iDACA,iEACA,aACA,kBACA,YACA,iEACA,mEACA,qEAEA,2DACE,gFACA,sEAGF,6CACE,kEACA,4CAGF,8CACE,mEACA,6CAIA,kEACE,kEACA,4CD3IN,4BCeE,mBACA,4DACA,sBACA,sCACA,sDACA,aACA,YACA,sDACA,wDACA,0DAEA,kCACE,kEACA,4CAGF,mCACE,mEACA,6CAIA,uDACE,kEACA,4CDnCN,4BC6CE,kDAEA,mBACA,sCACA,oBACA,uBD9CF,8BCkDE,mBACA,uEACA,+DACA,sBACA,iDACA,iEACA,aACA,kBACA,YACA,iEACA,mEACA,qEAEA,kDACE,gFAGF,oCACE,kEACA,4CAGF,qCACE,mEACA,6CAIA,yDACE,kEACA,4CD5EN,iCCsFE,kDAEA,sCDpFF,+BCuIE,+DACA,iFACA,mFACA,qBACA,yBACA,8GACA,iHACA,kBACA,SACA,gDD5IF,oCCzCE,eACA,gBACA,gBACA,iBAsMA,qBD5JF,oCCgKE,aD5JF,oCCgKE,+BACA,iBACA,wHAEA,2HD/JF,sBACE,sBCrCA,sBDyCA,+BC8HA,+BACA,4BACA,6BACA,4BACA,sBACA,4HAEA,+HAEA,kBACA,MDpIA,uCCuGA,+BACA,8BACA,WDrGA,8BCgDA,aD5CA,4BCxCA,+DACA,sBD2CA,4BCTA,+BDaA,oCC2IA","file":"index.css"}
|
package/package.json
CHANGED
package/src/_mixin.scss
CHANGED
|
@@ -56,20 +56,17 @@
|
|
|
56
56
|
color: var(--govnl-nav-bar-link-hover-color);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
&:focus {
|
|
60
|
-
background-color: var(--govnl-nav-bar-link-focus-background-color);
|
|
61
|
-
color: var(--govnl-nav-bar-link-focus-color);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
&:focus-visible {
|
|
65
|
-
background-color: var(--govnl-nav-bar-link-focus-background-color);
|
|
66
|
-
color: var(--govnl-nav-bar-link-focus-color);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
59
|
&:active {
|
|
70
60
|
background-color: var(--govnl-nav-bar-link-active-background-color);
|
|
71
61
|
color: var(--govnl-nav-bar-link-active-color);
|
|
72
62
|
}
|
|
63
|
+
|
|
64
|
+
&:focus-visible {
|
|
65
|
+
&:not(:active) {
|
|
66
|
+
background-color: var(--govnl-nav-bar-link-focus-background-color);
|
|
67
|
+
color: var(--govnl-nav-bar-link-focus-color);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
73
70
|
}
|
|
74
71
|
|
|
75
72
|
@mixin dictu-navigation-bar__link--mobile {
|
|
@@ -85,25 +82,6 @@
|
|
|
85
82
|
justify-content: center;
|
|
86
83
|
}
|
|
87
84
|
|
|
88
|
-
/*
|
|
89
|
-
@TODO: The navigation bar toggler for mobile menu does not have an own token set.
|
|
90
|
-
Currently the tokens for the submenu toggler are being used. Following tokens should be added:
|
|
91
|
-
- govnl.nav-bar.toggle.background-color
|
|
92
|
-
- govnl.nav-bar.toggle.border-width
|
|
93
|
-
- govnl.nav-bar.toggle.color
|
|
94
|
-
- govnl.nav-bar.toggle.column-gap
|
|
95
|
-
- govnl.nav-bar.toggle.padding-block
|
|
96
|
-
- govnl.nav-bar.toggle.padding-inline
|
|
97
|
-
- govnl.nav-bar.toggle.text-decoration
|
|
98
|
-
- govnl.nav-bar.toggle.expanded.background-color
|
|
99
|
-
- govnl.nav-bar.toggle.hover.background-color
|
|
100
|
-
- govnl.nav-bar.toggle.hover.color
|
|
101
|
-
- govnl.nav-bar.toggle.active.background-color
|
|
102
|
-
- govnl.nav-bar.toggle.active.color
|
|
103
|
-
- govnl.nav-bar.toggle.focus-visible.background-color
|
|
104
|
-
- govnl.nav-bar.toggle.focus-visible.color
|
|
105
|
-
*/
|
|
106
|
-
|
|
107
85
|
@mixin dictu-navigation-bar__toggle {
|
|
108
86
|
align-items: center;
|
|
109
87
|
background-color: var(--govnl-nav-bar-submenu-toggler-background-color);
|
|
@@ -201,18 +179,20 @@ Currently the tokens for the submenu toggler are being used. Following tokens sh
|
|
|
201
179
|
background-color: var(--govnl-nav-bar-submenu-background-color);
|
|
202
180
|
border-bottom-left-radius: var(--govnl-nav-bar-submenu-border-bottom-left-radius);
|
|
203
181
|
border-bottom-right-radius: var(--govnl-nav-bar-submenu-border-bottom-right-radius);
|
|
204
|
-
min-inline-size:
|
|
182
|
+
min-inline-size: 100%;
|
|
205
183
|
overflow-wrap: break-word;
|
|
206
184
|
padding-block: var(--govnl-nav-bar-submenu-padding-block-start) var(--govnl-nav-bar-submenu-padding-block-end);
|
|
207
185
|
padding-inline: var(--govnl-nav-bar-submenu-padding-inline-start) var(--govnl-nav-bar-submenu-padding-inline-end);
|
|
208
186
|
position: absolute;
|
|
209
187
|
top: 100%;
|
|
188
|
+
z-index: var(--govnl-nav-bar-submenu-z-index, 1);
|
|
210
189
|
}
|
|
211
190
|
|
|
212
191
|
@mixin dictu-navigation-bar__submenu--mobile {
|
|
213
192
|
background-color: transparent;
|
|
214
193
|
border-bottom-left-radius: 0;
|
|
215
194
|
border-bottom-right-radius: 0;
|
|
195
|
+
min-inline-size: fit-content;
|
|
216
196
|
overflow-wrap: initial;
|
|
217
197
|
padding-block: var(--govnl-nav-bar-mobile-submenu-padding-block-start)
|
|
218
198
|
var(--govnl-nav-bar-mobile-submenu-padding-block-end);
|
|
@@ -233,7 +213,8 @@ Currently the tokens for the submenu toggler are being used. Following tokens sh
|
|
|
233
213
|
}
|
|
234
214
|
|
|
235
215
|
@mixin dictu-navigation-bar__submenu-link {
|
|
236
|
-
background-color: transparent;
|
|
216
|
+
background-color: transparent;
|
|
217
|
+
inline-size: 100%;
|
|
237
218
|
padding-block: var(--govnl-nav-bar-submenu-link-padding-block-start)
|
|
238
219
|
var(--govnl-nav-bar-submenu-link-padding-block-end);
|
|
239
220
|
padding-inline: var(--govnl-nav-bar-submenu-link-padding-inline-start)
|