@oslokommune/punkt-css 12.7.3 → 12.9.0

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/12.7/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/12.9/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/components/_inputwrapper.scss

@@ -71,7 +71,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: map.get(variables.$spacing, 'size-16');
+    gap: map.get(variables.$spacing, 'size-8');
 
     border: none;
     padding: 0;

package/dist/scss/components/_stepper.scss

@@ -221,9 +221,56 @@
   }
 }
 
-// ALL STEP CONTENT EXCEPT CURRENT
-.pkt-step--hidden:not(.pkt-step--current) {
+// CURRENT STEP
+.pkt-step--current {
+  .pkt-step__line--1 {
+    background-color: var(--pkt-color-brand-dark-blue-1000);
+  }
+
+  .pkt-step__line--2,
+  .pkt-step__line--3 {
+    background-color: var(--pkt-color-grays-gray-200);
+  }
+}
+
+// CURRENT STEP + INCOMPLETE STEP
+.pkt-step--current + .pkt-step--incomplete {
+  .pkt-step__line--1 {
+    background-color: var(--pkt-color-grays-gray-200);
+  }
+}
+
+// HIDE ALL STEP CONTENT EXCEPT CURRENT
+.pkt-step--hideContent:not(.pkt-step--current) {
   .pkt-step__content {
     display: none;
   }
 }
+
+// HIDE ALL STEPS EXCEPT CURRENT
+.pkt-step--hideStep:not(.pkt-step--current) {
+  .pkt-step__title,
+  .pkt-step__content {
+    display: none;
+  }
+}
+
+// Adjust spacing between steps when hiding non-active steps on vertical stepper
+.pkt-stepper--vertical {
+  .pkt-step--hideStep:not(.pkt-step--current) {
+    .pkt-step__line--3 {
+      min-height: map.get(variables.$spacing, 'size-32');
+    }
+  }
+}
+
+// Adjust spacing between steps when hiding non-active steps on horizontal stepper
+.pkt-stepper--horizontal {
+  .pkt-step--hideStep:not(.pkt-step--current) {
+    grid-template-columns: var(--pkt-steps-indicator-width) minmax(map.get(variables.$spacing, 'size-32'), max-content);
+
+    .pkt-step__line--3 {
+      min-width: map.get(variables.$spacing, 'size-32');
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.7.3",
+  "version": "12.9.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -54,5 +54,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "52ef2895acd5d3dbaedeffac6db809fc2171cea7"
+  "gitHead": "285ab0b5f51f8dd6d8b4cda6d5902e0bdc52f855"
 }