@dictu/navigation-bar 1.2.0 → 2.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @dictu/navigation-bar
2
2
 
3
+ ## 2.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 38e03b8: Removed import of design tokens inside component css
8
+ - 38e03b8: Breaking: All tokens in one import file, for better usage.
9
+
10
+ ## 1.3.0
11
+
12
+ ### Minor Changes
13
+
14
+ - 698bfab: Better responsive styling
15
+
3
16
  ## 1.2.0
4
17
 
5
18
  ### Minor Changes
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .dictu-navigation-bar{--govnl-nav-bar-max-inline-size: 1280px;--govnl-nav-bar-padding-inline: 0px;--govnl-nav-bar-container-inline-size: 100%;--govnl-nav-bar-content-column-gap: 0px;--govnl-nav-bar-icon-size: 1.5em;--govnl-nav-bar-link-text-decoration: none;--govnl-nav-bar-menu-label-background-color: none;--govnl-nav-bar-mobile-max-inline-size: 100%;--govnl-nav-bar-border-block-end-width: var(--govnl-border-border-width-sm);--govnl-nav-bar-icon-color: var(--govnl-brand-primary-500);--govnl-nav-bar-icon-active-color: var(--govnl-brand-primary-500);--govnl-nav-bar-link-active-background-color: var(--govnl-brand-primary-500);--govnl-nav-bar-link-active-color: var(--govnl-document-inverse-color);--govnl-nav-bar-link-background-color: var(--govnl-document-background-color);--govnl-nav-bar-link-color: var(--govnl-brand-primary-500);--govnl-nav-bar-link-focus-background-color: var(--govnl-brand-primary-50);--govnl-nav-bar-link-focus-color: var(--govnl-brand-primary-500);--govnl-nav-bar-link-hover-background-color: var(--govnl-brand-primary-50);--govnl-nav-bar-link-hover-color: var(--govnl-brand-primary-500);--govnl-nav-bar-link-padding-block: var(--govnl-space-sm);--govnl-nav-bar-link-padding-inline: var(--govnl-space-xs);--govnl-nav-bar-link-column-gap: var(--govnl-gap-content-min) / 2;--govnl-nav-bar-background-color: var(--govnl-document-background-color);--govnl-nav-bar-color: var(--govnl-brand-primary-500);--govnl-nav-bar-border-color: var(--govnl-brand-primary-400);--govnl-nav-bar-search-padding-block: var(--govnl-space-xs);--govnl-nav-bar-search-padding-inline: var(--govnl-space-xs);--govnl-nav-bar-menu-label-gap: var(--govnl-gap-content-min) / 2;--govnl-nav-bar-menu-label-padding-inline: var(--govnl-space-sm);--govnl-nav-bar-menu-label-padding-block: var(--govnl-space-2xs);--govnl-nav-bar-menu-label-color: var(--govnl-brand-primary-500);--govnl-nav-bar-menu-label-font-size: var(--govnl-document-font-size);--govnl-nav-bar-font-size: var(--govnl-document-font-size)}.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;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{align-items:center;display:flex}.dictu-navigation-bar__link{align-items:center;background-color:var(--govnl-nav-bar-link-background-color);color:var(--govnl-nav-bar-link-color);column-gap:calc(var(--govnl-nav-bar-link-column-gap));display:flex;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:focus{background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__link:focus-visible{background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-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__icon{align-items:center;block-size:var(--govnl-nav-bar-icon-size);color:var(--govnl-nav-bar-icon-color);display:inline-flex;inline-size:var(--govnl-nav-bar-icon-size);justify-content:center}.dictu-navigation-bar__toggle{display:none}.dictu-navigation-bar__menu-label{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:none;font-size:1rem;gap:.5rem;padding:.5rem 1rem}@media(width <= 48em){.dictu-navigation-bar{align-items:center;box-sizing:border-box;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));grid-template-rows:auto auto;justify-content:space-between;max-inline-size:100%}.dictu-navigation-bar .dictu-navigation-bar__toggle{grid-column:2;grid-row:1}.dictu-navigation-bar .dictu-navigation-bar__home{display:block;grid-column:1;grid-row:1}.dictu-navigation-bar .dictu-navigation-bar__menu-label{display:flex;grid-column:2;grid-row:1}.dictu-navigation-bar .dictu-navigation-bar__list{background:var(--govnl-nav-bar-background-color);display:none;flex-direction:column;grid-column:1/span 6;grid-row:2}.dictu-navigation-bar__toggle:checked~.dictu-navigation-bar__list{display:flex}}@media(width >= 48.01em){.dictu-navigation-bar__menu-label{display:none}.dictu-navigation-bar__home{display:none}.dictu-navigation-bar__list{box-shadow:none;display:flex;flex-direction:row}}/*# sourceMappingURL=index.css.map */
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;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{align-items:center;display:flex}.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:focus{background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__link:focus-visible{background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-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__icon{align-items:center;block-size:var(--govnl-nav-bar-icon-size);color:var(--govnl-nav-bar-icon-color);display:inline-flex;inline-size:var(--govnl-nav-bar-icon-size);justify-content:center}.dictu-navigation-bar__toggle{display:none}.dictu-navigation-bar__menu-label{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:none;font-size:1rem;gap:.5rem;padding:.5rem 1rem}@media(width <= 48em){.dictu-navigation-bar{align-items:center;box-sizing:border-box;display:grid;grid-template-columns:minmax(50px, max-content);grid-template-rows:auto auto;max-inline-size:100%}.dictu-navigation-bar .dictu-navigation-bar__toggle{grid-column:2;grid-row:1}.dictu-navigation-bar .dictu-navigation-bar__home{display:block;grid-column:1;grid-row:1}.dictu-navigation-bar .dictu-navigation-bar__menu-label{display:flex;grid-column:2;grid-row:1}.dictu-navigation-bar .dictu-navigation-bar__link{width:100%}.dictu-navigation-bar .dictu-navigation-bar__list{background:var(--govnl-nav-bar-background-color);display:none;flex-direction:column;grid-column:1/span 6;grid-row:2}.dictu-navigation-bar__toggle:checked~.dictu-navigation-bar__list{display:flex}}@media(width >= 48.01em){.dictu-navigation-bar__menu-label{display:none}.dictu-navigation-bar__home{display:none}.dictu-navigation-bar__list{box-shadow:none;display:flex;flex-direction:row}}/*# sourceMappingURL=index.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../node_modules/@dictu/design-tokens/dist/navigation-bar.css","../../../node_modules/@dictu/utility-focus-ring/dist/index.css","../src/index.scss","../src/_mixin.scss"],"names":[],"mappings":"AAIA,sBACE,wCACA,oCACA,4CACA,wCACA,iCACA,2CACA,kDACA,6CACA,4EACA,2DACA,kEACA,6EACA,uEACA,8EACA,2DACA,2EACA,iEACA,2EACA,iEACA,0DACA,2DACA,kEACA,yEACA,sDACA,6DACA,4DACA,6DACA,iEACA,iEACA,iEACA,iEACA,sEACA,2DCrCF,sOCUA,sBCJE,eACA,gBAMA,uDACA,qGACA,iCACA,aACA,qDACA,mDDJF,4BCQE,aACA,4CACA,gBACA,SACA,UDRF,4BCYE,mBACA,aDTF,4BCaE,mBACA,4DACA,sCACA,sDACA,aACA,sDACA,wDACA,0DAEA,kCACE,kEACA,4CAGF,kCACE,kEACA,4CAGF,0CACE,kEACA,4CAGF,mCACE,mEACA,6CDnCJ,4BCwCE,mBACA,0CACA,sCACA,oBACA,2CACA,uBDzCF,8BC6CE,aDzCF,kCC6CE,mBACA,gBACA,YACA,cACA,eACA,aACA,eACA,UACA,mBDhDF,sBCqDE,sBACE,mBACA,sBACA,aACA,gDACA,6BACA,8BACA,qBAIF,oDACE,cACA,WAGF,kDACE,cACA,cACA,WAGF,wDACE,aACA,cACA,WAGF,kDACE,iDACA,aACA,sBACA,qBACA,WAGF,kEACE,cDrFJ,yBC2FE,kCACE,aAGF,4BACE,aAGF,4BACE,gBACA,aACA","file":"index.css"}
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,gBAMA,uDACA,qGACA,iCACA,aACA,qDACA,mDDLF,4BCSE,aACA,4CACA,gBACA,SACA,UDTF,4BCaE,mBACA,aDVF,4BCcE,mBACA,4DACA,sBACA,sCACA,sDACA,aACA,YACA,sDACA,wDACA,0DAEA,kCACE,kEACA,4CAGF,kCACE,kEACA,4CAGF,0CACE,kEACA,4CAGF,mCACE,mEACA,6CDtCJ,4BC2CE,mBACA,0CACA,sCACA,oBACA,2CACA,uBD5CF,8BCgDE,aD5CF,kCCgDE,mBACA,gBACA,YACA,cACA,eACA,aACA,eACA,UACA,mBDnDF,sBCwDE,sBACE,mBACA,sBACA,aACA,gDACA,6BACA,qBAIF,oDACE,cACA,WAGF,kDACE,cACA,cACA,WAGF,wDACE,aACA,cACA,WAGF,kDACE,WAGF,kDACE,iDACA,aACA,sBACA,qBACA,WAGF,kEACE,cD3FJ,yBCiGE,kCACE,aAGF,4BACE,aAGF,4BACE,gBACA,aACA","file":"index.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dictu/navigation-bar",
3
- "version": "1.2.0",
3
+ "version": "2.0.0",
4
4
  "author": "Dienst ICT Uitvoering",
5
5
  "description": "Navigation Bar CSS component.",
6
6
  "license": "EUPL-1.2",
package/src/_mixin.scss CHANGED
@@ -35,9 +35,11 @@
35
35
  @mixin dictu-navigation-bar__link {
36
36
  align-items: center;
37
37
  background-color: var(--govnl-nav-bar-link-background-color);
38
+ box-sizing: border-box;
38
39
  color: var(--govnl-nav-bar-link-color);
39
40
  column-gap: calc(var(--govnl-nav-bar-link-column-gap));
40
41
  display: flex;
42
+ height: 100%;
41
43
  padding-block: var(--govnl-nav-bar-link-padding-block);
42
44
  padding-inline: var(--govnl-nav-bar-link-padding-inline);
43
45
  text-decoration: var(--govnl-nav-bar-link-text-decoration);
@@ -94,9 +96,8 @@
94
96
  align-items: center;
95
97
  box-sizing: border-box;
96
98
  display: grid;
97
- grid-template-columns: repeat(6, minmax(0, 1fr));
99
+ grid-template-columns: minmax(50px, max-content);
98
100
  grid-template-rows: auto auto;
99
- justify-content: space-between;
100
101
  max-inline-size: 100%;
101
102
  }
102
103
 
@@ -118,6 +119,10 @@
118
119
  grid-row: 1;
119
120
  }
120
121
 
122
+ .dictu-navigation-bar .dictu-navigation-bar__link {
123
+ width: 100%;
124
+ }
125
+
121
126
  .dictu-navigation-bar .dictu-navigation-bar__list {
122
127
  background: var(--govnl-nav-bar-background-color);
123
128
  display: none;
package/src/index.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  * Copyright (c) 2021-2025 dictu
4
4
  */
5
5
 
6
- @use "pkg:@dictu/design-tokens/dist/navigation-bar" as design-tokens;
7
6
  @use "pkg:@dictu/utility-focus-ring/dist/index" as focus-ring;
8
7
 
9
8
  @use "./mixin.scss" as mixin;