@oslokommune/punkt-css 12.12.0 → 12.12.3

package/dist/scss/elements/_checkbox-radio.scss

@@ -1,7 +1,7 @@
-/* 
+/*
  * Checkbox and radio
- * 
- * 
+ *
+ *
  */
 
 @use 'sass:map';
@@ -30,9 +30,7 @@ $-module-name: 'pkt-input-check';
     --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
 
     [data-mode='dark'] & {
-      --pkt-color-input-background-normal: var(
-        --pkt-color-brand-dark-blue-1000
-      );
+      --pkt-color-input-background-normal: var(--pkt-color-brand-dark-blue-1000);
       --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
       --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
       --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
@@ -56,22 +54,20 @@ $-module-name: 'pkt-input-check';
     display: flex;
 
     &-label {
-      @include typography.get-text('pkt-txt-16-light');
       color: var(--pkt-color-text-body-default);
       padding-left: 0.5rem;
+      @include typography.get-text('pkt-txt-16-light');
     }
 
     &-helptext {
-      @include typography.get-text('pkt-txt-14-light');
       padding-top: 0.5rem;
-      color: var(--pkt-color-text-body-default);
       max-width: 21.875rem;
+      color: var(--pkt-color-text-body-default);
+      @include typography.get-text('pkt-txt-14-light');
     }
 
     // Input states
-    &:hover
-      > .pkt-input-check__input-checkbox:not(:disabled)
-      + .pkt-input-check__input-label {
+    &:hover > .pkt-input-check__input-checkbox:not(:disabled) + .pkt-input-check__input-label {
       color: var(--pkt-color-input-text-hover);
     }
 
@@ -172,8 +168,8 @@ $-module-name: 'pkt-input-check';
             height: 24px;
             background-image: var(--svg);
             background-repeat: no-repeat;
-            filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
-              saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
+            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%)
+              contrast(101%);
           }
         }
 
@@ -207,7 +203,8 @@ $-module-name: 'pkt-input-check';
           background-color: var(--pkt-color-input-border-active);
           border: 3px solid var(--pkt-color-input-background-normal);
           outline: none;
-          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active),
+          box-shadow:
+            0px 0px 0px 0.125rem var(--pkt-color-input-border-active),
             0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
         }
 
@@ -221,22 +218,17 @@ $-module-name: 'pkt-input-check';
       &:disabled {
         &[type='checkbox'] {
           background-color: var(--pkt-color-surface-default-gray);
-          --pkt-color-input-check-border: var(
-            --pkt-color-input-border-disabled
-          );
+          --pkt-color-input-check-border: var(--pkt-color-input-border-disabled);
           cursor: not-allowed;
           &[role='switch']:checked:after {
             --svg: url(#{variables.$icon-path}/check-medium.svg);
-            --pkt-color-input-check-border: var(
-              --pkt-color-input-border-normal
-            );
+            --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
             filter: grayscale(100%) brightness(400%);
           }
         }
 
         &[type='radio'] {
-          box-shadow: 0px 0px 0px 0.125rem
-            var(--pkt-color-input-border-disabled);
+          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
           background-color: var(--pkt-color-surface-default-gray);
           cursor: not-allowed;
           outline-color: var(--pkt-color-input-border-disabled);
@@ -246,14 +238,11 @@ $-module-name: 'pkt-input-check';
       &:disabled:checked {
         &[type='checkbox'] {
           background-color: var(--pkt-color-input-border-disabled);
-          --pkt-color-input-check-border: var(
-            --pkt-color-input-border-disabled
-          );
+          --pkt-color-input-check-border: var(--pkt-color-input-border-disabled);
         }
 
         &[type='radio'] {
-          box-shadow: 0px 0px 0px 0.125rem
-            var(--pkt-color-input-border-disabled);
+          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
           background-color: var(--pkt-color-input-border-disabled);
         }
       }
@@ -267,8 +256,8 @@ $-module-name: 'pkt-input-check';
       &--error {
         //Checkmark
         &[type='checkbox']:not([role='switch']):checked:after {
-          filter: brightness(0) saturate(100%) invert(15%) sepia(11%)
-            saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
+          filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%)
+            contrast(94%);
         }
 
         &[type='checkbox'],
@@ -328,9 +317,7 @@ $-module-name: 'pkt-input-check';
         margin: 1rem 0 1rem 1rem;
       }
 
-      &
-        .pkt-input-check__input-checkbox:checked:not(:disabled)
-        + .pkt-input-check__input-label:before {
+      & .pkt-input-check__input-checkbox:checked:not(:disabled) + .pkt-input-check__input-label:before {
         content: '';
         position: absolute;
         left: -2px;
@@ -356,15 +343,11 @@ $-module-name: 'pkt-input-check';
         border-color: var(--pkt-color-border-states-hover);
       }
 
-      &:hover
-        > .pkt-input-check__input-checkbox:checked
-        + .pkt-input-check__input-label:before {
+      &:hover > .pkt-input-check__input-checkbox:checked + .pkt-input-check__input-label:before {
         border-color: var(--pkt-color-border-states-hover);
       }
 
-      &:active:not(:disabled)
-        > .pkt-input-check__input-checkbox:checked
-        + .pkt-input-check__input-label:before {
+      &:active:not(:disabled) > .pkt-input-check__input-checkbox:checked + .pkt-input-check__input-label:before {
         border-color: var(--pkt-color-border-states-active);
       }
 
@@ -387,8 +370,8 @@ $-module-name: 'pkt-input-check';
 
 [data-mode='dark'] .#{$-module-name} {
   &__input-checkbox[type='checkbox']:not([role='switch']):after {
-    filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%)
-      hue-rotate(212deg) brightness(96%) contrast(94%);
+    filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%)
+      contrast(94%);
   }
   &__input-checkbox[type='checkbox'][role='switch'] {
     &:checked {

package/dist/scss/elements/_input.scss

@@ -44,7 +44,6 @@
 }
 
 .pkt-input {
-  @include typography.get-text('pkt-txt-18-light');
   display: flex;
   align-items: center;
   appearance: none; // Fix appearance on date inputs in Safari
@@ -55,6 +54,8 @@
   margin: 0;
   padding: 0.5rem 1rem;
 
+  @include typography.get-text('pkt-txt-18-light');
+
   &:not(&-compact) {
     min-height: 3rem;
   }
@@ -74,7 +75,11 @@
   &__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(
       :is(:has(input[size]))
     ):not(:is(:has(&--fullwidth))) {
-    width: min(100%, 31rem);
+    width: min(31rem, 100%);
+  }
+
+  &__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(&--fullwidth))) {
+    width: fit-content;
   }
 
   &--fullwidth {
@@ -153,14 +158,16 @@
   &-icon,
   &-separator {
     @include typography.get-text('pkt-txt-18-light');
-    display: flex;
-    align-items: center;
-    width: auto;
-    height: 3rem;
-    border: 2px solid var(--pkt-color-input-border-normal);
-    flex-shrink: 0;
-    color: var(--pkt-color-brand-dark-blue-1000);
-    background-color: var(--pkt-color-input-background-normal);
+    & {
+      display: flex;
+      align-items: center;
+      width: auto;
+      height: 3rem;
+      border: 2px solid var(--pkt-color-input-border-normal);
+      flex-shrink: 0;
+      color: var(--pkt-color-brand-dark-blue-1000);
+      background-color: var(--pkt-color-input-background-normal);
+    }
   }
 
   &-prefix {
@@ -222,7 +229,6 @@
   }
 
   &__container {
-    width: fit-content;
     display: flex;
     align-items: center;
     align-self: stretch;
@@ -279,12 +285,18 @@
 
   &__counter {
     @include typography.get-text('pkt-txt-14-light');
-    width: min(100%, 31rem);
-    text-align: right;
+
+    & {
+      width: min(100%, 31rem);
+      text-align: right;
+    }
 
     &--error {
       @include typography.get-text('pkt-txt-14-medium');
-      color: var(--pkt-color-input-text-error);
+
+      & {
+        color: var(--pkt-color-input-text-error);
+      }
     }
   }
 

package/dist/scss/elements/_section.scss

@@ -1,6 +1,6 @@
-/* 
+/*
  * Section elements
- * 
+ *
  */
 
 @use 'sass:map';
@@ -11,6 +11,9 @@
   margin: 1rem 0;
 
   @if $backgroundColor !=none {
+    padding: 0.75rem;
+    background-color: $backgroundColor;
+
     @include bp('phablet-up') {
       padding: 1rem;
     }
@@ -19,9 +22,6 @@
       padding: 1.5rem;
     }
 
-    padding: 0.75rem;
-    background-color: $backgroundColor;
-
     /*
     @if luminance($backgroundColor) < 0.4 {
       color: white;
@@ -40,8 +40,8 @@
 }
 
 .pkt-section--dark {
-  @include -section(map.get(variables.$pkt-colors, 'brand-dark-blue-1000'));
   color: white;
+  @include -section(map.get(variables.$pkt-colors, 'brand-dark-blue-1000'));
 
   a.pkt-btn--ter {
     color: white;
@@ -49,9 +49,8 @@
 }
 
 .pkt-section--danger {
-  @include -section(map.get(variables.$pkt-colors, 'brand-red-1000'));
-
   color: black;
+  @include -section(map.get(variables.$pkt-colors, 'brand-red-1000'));
 
   a.pkt-btn--ter {
     color: black;
@@ -64,9 +63,8 @@
 }
 
 .pkt-section--success {
-  @include -section(map.get(variables.$pkt-colors, 'brand-green-1000'));
-
   color: black;
+  @include -section(map.get(variables.$pkt-colors, 'brand-green-1000'));
 
   a.pkt-btn--ter {
     color: black;
@@ -86,11 +84,11 @@
 }
 
 .pkt-section--frame {
-  @include -section(white);
   border: 1px solid map.get(variables.$pkt-colors, 'brand-neutrals-1000');
+  @include -section(white);
 }
 
-[class*='ok-section-']>[class^='ok-title-'] {
+[class*='ok-section-'] > [class^='ok-title-'] {
   margin-top: 0;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.12.0",
+  "version": "12.12.3",
   "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": "7101571e5d72c3a719ac4fb3030d544702c22364"
+  "gitHead": "0dc3e24d50fb19d8298f7c6912ce7cb815d78cd0"
 }