@dictu/navigation-bar 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dictu/navigation-bar
 
+## 1.3.0
+
+### Minor Changes
+
+- 698bfab: Better responsive styling
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/index.css

@@ -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 */
+.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);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 */

package/dist/index.css.map

@@ -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"}
+{"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,sBACA,sCACA,sDACA,aACA,YACA,sDACA,wDACA,0DAEA,kCACE,kEACA,4CAGF,kCACE,kEACA,4CAGF,0CACE,kEACA,4CAGF,mCACE,mEACA,6CDrCJ,4BC0CE,mBACA,0CACA,sCACA,oBACA,2CACA,uBD3CF,8BC+CE,aD3CF,kCC+CE,mBACA,gBACA,YACA,cACA,eACA,aACA,eACA,UACA,mBDlDF,sBCuDE,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,cD1FJ,yBCgGE,kCACE,aAGF,4BACE,aAGF,4BACE,gBACA,aACA","file":"index.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dictu/navigation-bar",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Dienst ICT Uitvoering",
   "description": "Navigation Bar CSS component.",
   "license": "EUPL-1.2",

package/src/_mixin.scss

@@ -35,9 +35,11 @@
 @mixin 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);
@@ -94,9 +96,8 @@
     align-items: center;
     box-sizing: border-box;
     display: grid;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-template-columns: minmax(50px, max-content);
     grid-template-rows: auto auto;
-    justify-content: space-between;
     max-inline-size: 100%;
   }
 
@@ -118,6 +119,10 @@
     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;