@utrecht/component-library-css 1.0.0-alpha.172 → 1.0.0-alpha.177

package/dist/bem.css

@@ -1590,7 +1590,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-sidenav-connection-inline-size: 2px;
   --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
   --utrecht-sidenav-marker-offset: 26px;
-  --utrecht-sidenav-connection-block-size: 38px;
+  --utrecht-sidenav-connection-block-size: 100%;
+  --utrecht-sidenav-marker-height: 8px;
+  --utrecht-sidenav-marker-outline-width: 2px;
   border-block-end: 1px solid var(--utrecht-color-grey-80);
   border-block-start: 1px solid var(--utrecht-color-grey-80);
   margin-block-end: 0;
@@ -1629,9 +1631,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 /* draw the li item box bottom line */
-.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator,
-.utrecht-sidenav__item--has-children .utrecht-sidenav__item-separator:first-of-type) {
-  /* .utrecht-sidenav__item--has-children span */
+.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
+  /* .utrecht-sidenav__item--parent span */
   border-block-end: 1px solid var(--utrecht-color-grey-80);
   display: block;
   margin-inline-start: var(--utrecht-space-inline-md);
@@ -1662,27 +1663,28 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 /* Remove bottom padding form first item in list with children */
-.utrecht-sidenav__link--has-children {
+.utrecht-sidenav__link--parent {
   padding-block-end: 0;
 }
 
 /* Draw metro connection lines on sidenav link items */
-.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling):not(.utrecht-sidenav__link--child)::after {
+.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling):not(.utrecht-sidenav__link--parent):not(.utrecht-sidenav__link--child)::after {
   background: var(--utrecht-sidenav-connection-color);
   bottom: 0;
   content: "";
   display: block;
-  height: calc(var(--utrecht-sidenav-connection-block-size) + 2px);
+  height: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
   left: 3px;
-  min-height: var(--utrecht-sidenav-connection-block-size);
   overflow: hidden;
   position: absolute;
-  top: -22px;
+  top: calc(var(--utrecht-sidenav-marker-offset));
   width: var(--utrecht-sidenav-connection-inline-size);
   z-index: 5;
 }
 
-.utrecht-sidenav__connection--first, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__item:first-child .utrecht-sidenav__link::after {
+.utrecht-sidenav__connection--last,
+.utrecht-sidenav__connection--parent,
+.utrecht-sidenav__connection--sibling {
   display: none;
 }
 
@@ -1691,10 +1693,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
   background-color: var(--utrecht-sidenav-item-marker-color);
   border-radius: 100%;
-  box-shadow: 0 0 2px 2px #fff;
-  /* Make var */
   content: "";
-  height: 8px;
+  height: var(--utrecht-sidenav-marker-height);
   left: var(--utrecht-sidenav-marker-offset);
   overflow: hidden;
   position: absolute;

package/dist/index.css

@@ -1630,7 +1630,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-sidenav-connection-inline-size: 2px;
   --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
   --utrecht-sidenav-marker-offset: 26px;
-  --utrecht-sidenav-connection-block-size: 38px;
+  --utrecht-sidenav-connection-block-size: 100%;
+  --utrecht-sidenav-marker-height: 8px;
+  --utrecht-sidenav-marker-outline-width: 2px;
   border-block-end: 1px solid var(--utrecht-color-grey-80);
   border-block-start: 1px solid var(--utrecht-color-grey-80);
   margin-block-end: 0;
@@ -1669,9 +1671,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 /* draw the li item box bottom line */
-.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator,
-.utrecht-sidenav__item--has-children .utrecht-sidenav__item-separator:first-of-type) {
-  /* .utrecht-sidenav__item--has-children span */
+.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
+  /* .utrecht-sidenav__item--parent span */
   border-block-end: 1px solid var(--utrecht-color-grey-80);
   display: block;
   margin-inline-start: var(--utrecht-space-inline-md);
@@ -1702,27 +1703,28 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 /* Remove bottom padding form first item in list with children */
-.utrecht-sidenav__link--has-children {
+.utrecht-sidenav__link--parent {
   padding-block-end: 0;
 }
 
 /* Draw metro connection lines on sidenav link items */
-.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling):not(.utrecht-sidenav__link--child)::after {
+.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling):not(.utrecht-sidenav__link--parent):not(.utrecht-sidenav__link--child)::after {
   background: var(--utrecht-sidenav-connection-color);
   bottom: 0;
   content: "";
   display: block;
-  height: calc(var(--utrecht-sidenav-connection-block-size) + 2px);
+  height: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
   left: 3px;
-  min-height: var(--utrecht-sidenav-connection-block-size);
   overflow: hidden;
   position: absolute;
-  top: -22px;
+  top: calc(var(--utrecht-sidenav-marker-offset));
   width: var(--utrecht-sidenav-connection-inline-size);
   z-index: 5;
 }
 
-.utrecht-sidenav__connection--first, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__item:first-child .utrecht-sidenav__link::after {
+.utrecht-sidenav__connection--last,
+.utrecht-sidenav__connection--parent,
+.utrecht-sidenav__connection--sibling {
   display: none;
 }
 
@@ -1731,10 +1733,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
   background-color: var(--utrecht-sidenav-item-marker-color);
   border-radius: 100%;
-  box-shadow: 0 0 2px 2px #fff;
-  /* Make var */
   content: "";
-  height: 8px;
+  height: var(--utrecht-sidenav-marker-height);
   left: var(--utrecht-sidenav-marker-offset);
   overflow: hidden;
   position: absolute;
@@ -5264,7 +5264,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 /* Collection of CSS variables for Utrecht theme applied to `:root` */
 /**
  * Do not edit directly
- * Generated on Mon, 07 Feb 2022 11:32:01 GMT
+ * Generated on Mon, 14 Feb 2022 14:04:11 GMT
  */
 :root {
   --utrecht-toptask-nav-link-grid-max-inline-size: 240px;

package/dist/root-theme.css

@@ -5,7 +5,7 @@
 /* Collection of CSS variables for Utrecht theme applied to `:root` */
 /**
  * Do not edit directly
- * Generated on Mon, 07 Feb 2022 11:32:01 GMT
+ * Generated on Mon, 14 Feb 2022 14:04:11 GMT
  */
 :root {
   --utrecht-toptask-nav-link-grid-max-inline-size: 240px;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.172",
+  "version": "1.0.0-alpha.177",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
     "url": "git@github.com:nl-design-system/utrecht.git"
   },
   "devDependencies": {
-    "@utrecht/design-tokens": "1.0.0-alpha.165",
+    "@utrecht/design-tokens": "1.0.0-alpha.170",
     "node-sass-package-importer": "5.3.2",
     "rimraf": "3.0.2",
     "sass": "1.49.7"
@@ -26,5 +26,5 @@
     "build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
     "clean": "rimraf dist/"
   },
-  "gitHead": "166e4957a946b2c362e26f426aaa7ec7ac4ec21c"
+  "gitHead": "dab68b2d69711c9acc4d1231db21da90a55e4e88"
 }