@oslokommune/punkt-css 7.0.0 → 7.1.5

package/dist/scss/base/_typography.scss

@@ -143,7 +143,7 @@ a,
 
   &--external::after {
     content: ' ';
-    --svg: url(https://punkt-cdn.oslo.kommune.no/7.0/icons/new-window-small.svg);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/7.1/icons/new-window-small.svg);
     background-image: var(--svg);
     background-repeat: no-repeat;
     background-size: 18px 18px;

package/dist/scss/components/_backlink.scss

@@ -8,46 +8,12 @@
 @use '../abstracts/mixins/typography';
 
 .pkt-back-link {
-  position: relative;
-  @include typography.get-text('pkt-txt-14-light');
-  padding: map.get(variables.$spacing, 'size-12')
-    map.get(variables.$spacing, 'size-16');
-
-  @include bp('laptop-up') {
-    padding: map.get(variables.$spacing, 'size-12')
-      map.get(variables.$spacing, 'size-64');
-  }
-
-  &__list {
-    list-style-type: none;
-  }
-
-  &__link {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: map.get(variables.$spacing, 'size-12');
-    text-decoration: none;
-    color: var(--color-blue-dark);
-
-    &:visited,
-    &:focus,
-    &:hover,
-    &:active {
-      color: var(--color-blue-dark);
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
   &__icon {
     flex-basis: 1rem;
-    flex-shrink: 0;
   }
 
   &__text {
+    @include typography.get-text('pkt-txt-14-light');
     flex-grow: 1;
   }
 }

package/dist/scss/components/_inputwrapper.scss

@@ -111,30 +111,65 @@
     }
 
     .pkt-textinput__input:hover,
-    .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
-    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
-    .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
-    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
-    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
+    .pkt-textinput__container:hover .pkt-textinput__input,
+    .pkt-textinput__container:hover .pkt-textinput__input-prefix,
+    .pkt-textinput__container:hover .pkt-textinput__input-suffix,
+    .pkt-textinput__container:hover .pkt-textinput__input-icon {
       border-color: var(--color-red);
     }
 
     .pkt-textinput__input:focus-within,
-    .pkt-textinput__input-prefix-wrapper:focus-within
-      .pkt-textinput__input-icon,
-    .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,
-    .pkt-textinput__input-prefix-wrapper:focus-within
-      .pkt-textinput__input-prefix,
-    .pkt-textinput__input-prefix-wrapper:focus-within
-      .pkt-textinput__input-icon,
-    .pkt-textinput__input-suffix-wrapper:focus-within
-      .pkt-textinput__input-icon,
-    .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,
-    .pkt-textinput__input-suffix-wrapper:focus-within
-      .pkt-textinput__input-suffix,
-    .pkt-textinput__input-suffix-wrapper:focus-within
-      .pkt-textinput__input-icon {
+    .pkt-textinput__container:focus-within .pkt-textinput__input,
+    .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
+    .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
+    .pkt-textinput__container:focus-within .pkt-textinput__input-icon {
       border-color: var(--color-red);
     }
   }
+
+  &--disabled {
+    color: var(--color-disabled);
+    cursor: inherit;
+
+    .pkt-textinput__input,
+    .pkt-textinput__input-prefix,
+    .pkt-textinput__input-suffix,
+    .pkt-textinput__input-icon {
+      border-color: var(--color-disabled);
+      background-color: var(--color-disabled-light);
+    }
+
+    .pkt-textinput__container:hover .pkt-textinput__input,
+    .pkt-textinput__container:hover .pkt-textinput__input-prefix,
+    .pkt-textinput__container:hover .pkt-textinput__input-suffix,
+    .pkt-textinput__container:hover .pkt-textinput__input-icon {
+      border-color: var(--color-disabled);
+    }
+
+    .pkt-textinput__input:hover {
+      border-color: var(--color-disabled);
+      box-shadow: none;
+    }
+
+    .pkt-textinput__input:focus {
+      border-color: var(--color-disabled);
+      box-shadow: none;
+      outline: none;
+    }
+
+    .pkt-textinput__container:active .pkt-textinput__input {
+      border-right: none;
+      box-shadow: none;
+      outline: none;
+    }
+  }
+  // Dark mode
+  @at-root [data-mode='dark'] {
+    .pkt-textinput__input-prefix,
+    .pkt-textinput__input-suffix,
+    .pkt-textinput__input-icon {
+      background-color: var(--color-white);
+      color: var(--color-blue-dark);
+    }
+  }
 }

package/dist/scss/components/_textinput.scss

@@ -49,6 +49,7 @@
     &:disabled,
     &:disabled::placeholder,
     &[readonly] {
+      opacity: 1;
       background-color: var(--color-disabled-light);
       border-color: var(--color-disabled);
       cursor: inherit;
@@ -58,46 +59,19 @@
       border: 2px solid var(--color-disabled);
     }
 
-    &-prefix-wrapper {
-      display: flex;
-      align-items: center;
-      align-self: stretch;
-
-      :not(:first-child) {
-        border-left: none;
-      }
-
-      :first-child {
-        border-right: none;
-      }
-
-      //states
-      & input:focus {
-        box-shadow: none;
-      }
-
-      &:hover .pkt-textinput__input,
-      &:hover .pkt-textinput__input-prefix {
-        border-color: var(--color-hover);
-      }
-
-      &:focus-within {
-        outline: 2px solid var(--color-active);
-      }
-
-      &:focus-within .pkt-textinput__input,
-      &:focus-within .pkt-textinput__input-prefix {
-        border-color: var(--color-active);
-      }
-    }
-
-    &-prefix {
+    &-prefix,
+    &-suffix,
+    &-icon {
       @include typography.get-text('pkt-txt-18-light');
-      align-items: center;
       display: flex;
+      align-items: center;
       width: auto;
       height: 3rem;
       border: 2px solid var(--color-blue-dark);
+      flex-shrink: 0;
+    }
+
+    &-prefix {
       padding: 0.5rem 0rem 0.5rem 1rem;
 
       &::after {
@@ -109,54 +83,8 @@
       }
     }
 
-    &-suffix-wrapper {
-      display: flex;
-      align-items: center;
-      align-self: stretch;
-
-      :not(:first-child) {
-        border-left: none;
-      }
-
-      :first-child {
-        border-right: none;
-      }
-
-      p {
-        margin: 0;
-      }
-
-      //states
-      & input:focus {
-        box-shadow: none;
-      }
-
-      &:hover .pkt-textinput__input,
-      &:hover .pkt-textinput__input-suffix,
-      &:hover .pkt-textinput__input-icon {
-        border-color: var(--color-hover);
-      }
-
-      &:focus-within {
-        outline: 2px solid var(--color-active);
-      }
-
-      &:focus-within .pkt-textinput__input-icon,
-      &:focus-within .pkt-textinput__input,
-      &:focus-within .pkt-textinput__input-suffix,
-      &:focus-within .pkt-textinput__input-icon {
-        border-color: var(--color-active);
-      }
-    }
-
     &-suffix {
-      @include typography.get-text('pkt-txt-18-light');
-      display: flex;
-      align-items: center;
-      width: auto;
-      border: 2px solid var(--color-blue-dark);
       padding: 0.5rem 1rem 0.5rem 0rem;
-      flex-shrink: 0;
 
       svg {
         width: 1.5rem;
@@ -174,13 +102,8 @@
     }
 
     &-icon {
-      @include typography.get-text('pkt-txt-18-light');
-      display: flex;
-      flex-shrink: 0;
       padding: 0.5rem 1rem;
-      align-items: center;
       align-self: stretch;
-      border: 2px solid var(--color-blue-dark);
 
       & svg {
         width: 1.5rem;
@@ -188,6 +111,7 @@
         margin-left: 0.5rem;
       }
     }
+
     &--counter-error,
     &--counter-error:focus {
       border-color: var(--color-red);
@@ -198,61 +122,59 @@
     }
   }
 
-  &__counter {
-    @include typography.get-text('pkt-txt-14-light');
-    width: 100%;
-    text-align: right;
-    &--error {
-      @include typography.get-text('pkt-txt-14-medium');
-      color: var(--color-red);
+  &__container {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+
+    :first-child:not(:only-child) {
+      border-right: none;
     }
-  }
 
-  // Modifiers
-  @at-root .pkt-inputwrapper--disabled {
-    color: var(--color-disabled);
-    cursor: inherit;
+    :last-child:not(:only-child) {
+      border-left: none;
+    }
 
-    .pkt-textinput__input,
-    .pkt-textinput__input-prefix,
-    .pkt-textinput__input-suffix,
-    .pkt-textinput__input-icon {
-      border-color: var(--color-disabled);
-      background-color: var(--color-disabled-light);
+    :not(:first-child):not(:last-child) {
+      border-left: none;
+      border-right: none;
     }
 
-    .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
-    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
-    .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
-    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
-    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
-      border-color: var(--color-disabled);
+    p {
+      margin: 0;
     }
 
-    .pkt-textinput__input:hover {
-      border-color: var(--color-disabled);
+    //states
+    & input:focus {
       box-shadow: none;
     }
 
-    .pkt-textinput__input:focus {
-      border-color: var(--color-disabled);
-      box-shadow: none;
-      outline: none;
+    &:hover .pkt-textinput__input,
+    &:hover .pkt-textinput__input-prefix,
+    &:hover .pkt-textinput__input-suffix,
+    &:hover .pkt-textinput__input-icon {
+      border-color: var(--color-hover);
     }
 
-    .pkt-textinput__input-suffix-wrapper:active .pkt-textinput__input {
-      border-right: none;
-      box-shadow: none;
-      outline: none;
+    &:focus-within {
+      outline: 2px solid var(--color-active);
+
+      .pkt-textinput__input,
+      .pkt-textinput__input-prefix,
+      .pkt-textinput__input-suffix,
+      .pkt-textinput__input-icon {
+        border-color: var(--color-active);
+      }
     }
   }
-  // Dark mode
-  @at-root [data-mode='dark'] {
-    .pkt-textinput__input-prefix,
-    .pkt-textinput__input-suffix,
-    .pkt-textinput__input-icon {
-      background-color: var(--color-white);
-      color: var(--color-blue-dark);
+
+  &__counter {
+    @include typography.get-text('pkt-txt-14-light');
+    width: 100%;
+    text-align: right;
+    &--error {
+      @include typography.get-text('pkt-txt-14-medium');
+      color: var(--color-red);
     }
   }
 }

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

@@ -81,7 +81,7 @@ $-module-name: 'pkt-form-check-input';
     }
 
     &[type='checkbox'] {
-      --svg: url(https://punkt-cdn.oslo.kommune.no/7.0/icons/check-medium.svg);
+      --svg: url(https://punkt-cdn.oslo.kommune.no/7.1/icons/check-medium.svg);
       position: relative;
       background-color: blue;
     }

package/dist/scss/elements/_select.scss

@@ -10,7 +10,7 @@
 @use '../abstracts/functions';
 
 .pkt-select {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/7.0/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/7.1/icons/chevron-thin-down.svg);
 
   display: block;
   background-color: var(--color-white);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "7.0.0",
+  "version": "7.1.5",
   "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": "1798ecaf405fba3b89e70aa8c12d39bc4b6edcc1"
+  "gitHead": "cf227293c759b7fc74dd5deba2553838cf63fa7d"
 }