@oslokommune/punkt-css 11.17.0 → 11.19.2

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

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

package/dist/scss/components/_linkcard.scss

@@ -45,6 +45,7 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
   }
 
   &__title {
+    grid-column: 2;
     @include get-text('pkt-txt-20-medium');
 
     & > p {
@@ -63,7 +64,7 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
         background-size: 1.5rem 1.5rem;
         background-position: center;
         margin-left: 0.5rem;
-        flex: 1 0 auto;
+        flex: 0 0 auto;
         align-self: flex-start;
       }
     }
@@ -87,7 +88,7 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
 
   // Modifiers
   &--beige {
-    background-color: var(--pkt-color-surface-default-light-beige);
+    background-color: var(--pkt-color-surface-default-light-beige) !important;
     color: var(--pkt-color-text-body-dark) !important;
 
     &:hover,
@@ -99,11 +100,11 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
   }
 
   &--blue {
-    background-color: var(--pkt-color-surface-subtle-pale-blue);
+    background-color: var(--pkt-color-surface-subtle-pale-blue) !important;
     color: var(--pkt-color-text-body-dark) !important;
 
     &:hover {
-      background-color: var(--pkt-color-surface-default-light-blue);
+      background-color: var(--pkt-color-surface-default-light-blue) !important;
     }
 
     &:hover,
@@ -115,11 +116,11 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
   }
 
   &--grey {
-    background-color: var(--pkt-color-surface-default-gray);
+    background-color: var(--pkt-color-surface-default-gray) !important;
     color: var(--pkt-color-text-body-dark) !important;
 
     &:hover {
-      background-color: var(--pkt-color-surface-strong-gray);
+      background-color: var(--pkt-color-surface-strong-gray) !important;
     }
 
     &:hover,
@@ -131,11 +132,11 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
   }
 
   &--green {
-    background-color: var(--pkt-color-surface-default-faded-green);
+    background-color: var(--pkt-color-surface-default-faded-green) !important;
     color: var(--pkt-color-text-body-dark) !important;
 
     &:hover {
-      background-color: var(--pkt-color-surface-strong-light-green);
+      background-color: var(--pkt-color-surface-strong-light-green) !important;
     }
 
     &:hover,
@@ -147,11 +148,11 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
   }
 
   &--grey-outline {
-    border: 4px solid var(--pkt-color-border-subtle);
+    border: 4px solid var(--pkt-color-border-subtle) !important;
   }
 
   &--beige-outline {
-    border: 4px solid var(--pkt-color-border-light-beige);
+    border: 4px solid var(--pkt-color-border-light-beige) !important;
   }
 }
 

package/dist/scss/components/_preview.scss

@@ -18,11 +18,14 @@
     justify-content: space-around;
     align-items: center;
     min-height: 10rem;
-    padding: 1rem;
+    padding: 3rem 1rem;
     margin: 1rem 0 0;
     border: 0.25rem solid var(--pkt-color-surface-default-gray);
     background-color: var(--pkt-color-background-default);
     transition: background-color 0.2s linear;
+    &--fullwidth > div {
+      width: 100%;
+    }
   }
   &__opts {
     padding: 1rem;

package/dist/scss/components/_stepper.scss

@@ -63,6 +63,12 @@
         height: fit-content;
       }
     }
+
+    &__nav-wrapper {
+      display: flex;
+      gap: 20px;
+      margin-top: map.get(variables.$spacing, 'size-16');
+    }
   }
 }
 
@@ -84,6 +90,9 @@
         padding: map-get(variables.$spacing, 'size-16') map-get(variables.$spacing, 'size-24');
         background-color: var(--pkt-color-surface-subtle-pale-blue);
       }
+      .pkt-step__content {
+        padding-top: 0;
+      }
 
       .pkt-step__wrapper {
         margin-bottom: map-get(variables.$spacing, 'size-24');
@@ -115,6 +124,10 @@
         min-height: map.get(variables.$spacing, 'size-64');
       }
     }
+
+    &__nav-wrapper {
+      flex-direction: row;
+    }
   }
 }
 
@@ -124,7 +137,7 @@
 
   .pkt-step {
     grid-template-areas: 'indicator line' 'title title' 'content content';
-    grid-template-columns: var(--pkt-steps-indicator-width) auto;
+    grid-template-columns: var(--pkt-steps-indicator-width) minmax(60px, max-content);
     grid-template-rows: var(--pkt-steps-indicator-width) min-content min-content;
     justify-items: flex-start;
 
@@ -164,6 +177,10 @@
         min-width: map.get(variables.$spacing, 'size-80');
       }
     }
+
+    &__nav-wrapper {
+      flex-direction: column;
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "11.17.0",
+  "version": "11.19.2",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "998d0193afd61f095d84f824b087cbff62d87782"
+  "gitHead": "0ca7c50fc32c471a63615349ecee431fd30f7a72"
 }