@oslokommune/punkt-css 7.1.7 → 8.0.0

package/dist/scss/base/_typography.scss

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

package/dist/scss/components/_breadcrumbs.scss

@@ -5,55 +5,32 @@
 @use 'sass:map';
 @use '../abstracts/variables';
 @use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/typography';
 
 .pkt-breadcrumbs {
   position: relative;
-  font-size: map.get(variables.$font-size, 'size-14');
-  padding: 0 map.get(variables.$spacing, 'size-16');
+  @include typography.get-text('pkt-txt-14-light');
 
-  @include bp('tablet-up') {
-    margin-bottom: map.get(variables.$spacing, 'size-16');
-  }
-
-  @include bp('laptop-up') {
-    padding: 0 map.get(variables.$spacing, 'size-64');
-  }
 
   &__list {
     display: flex;
     flex-direction: column;
     height: auto;
-    overflow: hidden;
     list-style-type: none;
     border-bottom: 1px solid transparent;
     transition: all 0.4s ease-in-out;
 
     @include bp('phablet-up') {
       flex-direction: row;
-      padding: 0 1rem;
       border-bottom-color: transparent !important;
     }
-
-    &.expanded {
-      align-items: flex-start;
-      max-height: 25rem;
-      border-bottom-color: var(--color-gray);
-      transition: all 0.4s ease-in-out;
-
-      & > .pkt-breadcrumbs__item {
-        display: block;
-      }
-
-      & > .pkt-breadcrumbs__item:last-child {
-        display: block;
-      }
-    }
   }
 
   &__item {
     position: relative;
     display: none;
     width: 100%;
+    text-decoration: underline;
 
     @include bp('phablet-up') {
       display: block;
@@ -62,6 +39,7 @@
 
     &:last-child {
       display: block;
+      text-decoration: none;
 
       @include bp('tablet-up') {
         max-width: 300px;
@@ -73,31 +51,11 @@
     }
   }
 
-  &__link {
-    text-decoration: none;
-    color: var(--color-blue-dark);
-
-    &:visited,
-    &:focus,
-    &:hover,
-    &:active {
-      color: var(--color-blue-dark);
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
   &__label {
     display: flex;
     align-items: center;
-    justify-content: flex-start;
     width: 100%;
     white-space: nowrap;
-    padding: map.get(variables.$spacing, 'size-12')
-      map.get(variables.$spacing, 'size-16')
-      map.get(variables.$spacing, 'size-16') 0;
   }
 
   &__text {
@@ -110,9 +68,11 @@
     @include bp('phablet-up') {
       max-width: 120px;
     }
+
     @include bp('tablet-up') {
       max-width: 200px;
     }
+
     @include bp('tablet-big-up') {
       max-width: 300px;
     }
@@ -121,6 +81,23 @@
   &__icon {
     width: 1rem;
     height: 1rem;
-    margin-right: map.get(variables.$spacing, 'size-12');
+    margin-left: map.get(variables.$spacing, 'size-8');
+  }
+
+
+  &--desktop {
+    display: none !important;
+
+    @include bp('phablet-up') {
+      display: inline-flex !important;
+    }
+  }
+
+  &--mobile {
+    display: inline-flex !important;
+
+    @include bp('phablet-up') {
+      display: none !important;
+    }
   }
 }

package/dist/scss/components/_inputwrapper.scss

@@ -28,6 +28,15 @@
     gap: map.get(variables.$spacing, 'size-4');
     @include typography.get-text('pkt-txt-14-light');
 
+    > * {
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
     &-expandable {
       display: inline-flex;
       text-align: left;
@@ -108,26 +117,26 @@
   }
 
   &--error {
-    .pkt-textinput__input,
-    .pkt-textinput__input-prefix,
-    .pkt-textinput__input-suffix,
-    .pkt-textinput__input-icon {
+    .pkt-input,
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-input-icon {
       border-color: var(--color-red);
     }
 
-    .pkt-textinput__input:hover,
-    .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 {
+    .pkt-input:hover,
+    .pkt-input__container:hover .pkt-input,
+    .pkt-input__container:hover .pkt-input-prefix,
+    .pkt-input__container:hover .pkt-input-suffix,
+    .pkt-input__container:hover .pkt-input-icon {
       border-color: var(--color-red);
     }
 
-    .pkt-textinput__input:focus-within,
-    .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 {
+    .pkt-input:focus-within,
+    .pkt-input__container:focus-within .pkt-input,
+    .pkt-input__container:focus-within .pkt-input-prefix,
+    .pkt-input__container:focus-within .pkt-input-suffix,
+    .pkt-input__container:focus-within .pkt-input-icon {
       border-color: var(--color-red);
     }
   }
@@ -136,45 +145,36 @@
     color: var(--color-disabled);
     cursor: inherit;
 
-    .pkt-textinput__input,
-    .pkt-textinput__input-prefix,
-    .pkt-textinput__input-suffix,
-    .pkt-textinput__input-icon {
+    .pkt-input,
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-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 {
+    .pkt-input__container:hover .pkt-input,
+    .pkt-input__container:hover .pkt-input-prefix,
+    .pkt-input__container:hover .pkt-input-suffix,
+    .pkt-input__container:hover .pkt-input-icon {
       border-color: var(--color-disabled);
     }
 
-    .pkt-textinput__input:hover {
+    .pkt-input:hover {
       border-color: var(--color-disabled);
       box-shadow: none;
     }
 
-    .pkt-textinput__input:focus {
+    .pkt-input:focus {
       border-color: var(--color-disabled);
       box-shadow: none;
       outline: none;
     }
 
-    .pkt-textinput__container:active .pkt-textinput__input {
+    .pkt-input__container:active .pkt-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

@@ -1,180 +1,13 @@
-/* textinput */
-@use 'sass:map';
-@use '../abstracts/variables';
-@use '../abstracts/functions';
-@use '../abstracts/mixins/typography';
+/* 
+ * Textinput component 
+ *
+ * Denne blir stilsatt av .pkt-input
+ * Ikke bruk klassen .pkt-textinput 
+*/
+@use '../elements/input';
 
 .pkt-textinput {
   &__input {
-    @include typography.get-text('pkt-txt-18-light');
-    display: flex;
-    align-items: center;
-    appearance: none; // Fix appearance on date inputs in Safari
-    background-color: var(--color-white);
-    border: 2px solid var(--color-blue-dark);
-    border-radius: 0;
-    color: var(--color-blue-dark);
-    margin: 0;
-    padding: 0.5rem 1rem;
-    width: 100%;
-
-    &:is(textarea) {
-      min-height: map.get(variables.$spacing, 'size-128');
-    }
-
-    // 1. Override Firefox's default opacity
-    &::placeholder {
-      color: var(--color-grayscale-50);
-      opacity: 1; // 1
-    }
-
-    // states
-    &:hover,
-    &.pkt-textinput__textinput--hover {
-      border-color: var(--color-hover);
-    }
-
-    &:focus-visible + .pkt-textinput-suffix,
-    &.pkt-textinput__textinput--focus {
-      box-shadow: 0 0 0 2px var(--color-active);
-      border-color: var(--color-active);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 2px var(--color-active);
-      border-color: var(--color-active);
-    }
-
-    &:disabled,
-    &:disabled::placeholder,
-    &[readonly] {
-      opacity: 1;
-      background-color: var(--color-disabled-light);
-      border-color: var(--color-disabled);
-      cursor: inherit;
-    }
-
-    &:disabled:active {
-      border: 2px solid var(--color-disabled);
-    }
-
-    &-prefix,
-    &-suffix,
-    &-icon {
-      @include typography.get-text('pkt-txt-18-light');
-      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 {
-        content: '';
-        width: 1px;
-        margin-left: 0.5rem;
-        height: 100%;
-        background-color: var(--color-blue-dark);
-      }
-    }
-
-    &-suffix {
-      padding: 0.5rem 1rem 0.5rem 0rem;
-
-      svg {
-        width: 1.5rem;
-        height: 1.5rem;
-        margin-left: 0.5rem;
-      }
-
-      &::before {
-        content: '';
-        width: 1px;
-        margin-right: 0.5rem;
-        height: 1.5rem;
-        background-color: var(--color-blue-dark);
-      }
-    }
-
-    &-icon {
-      padding: 0.5rem 1rem;
-      align-self: stretch;
-
-      & svg {
-        width: 1.5rem;
-        height: 1.5rem;
-        margin-left: 0.5rem;
-      }
-    }
-
-    &--counter-error,
-    &--counter-error:focus {
-      border-color: var(--color-red);
-      background-color: var(--color-red-30);
-    }
-    &--counter-error:focus {
-      box-shadow: 0 0 0 2px var(--color-red);
-    }
-  }
-
-  &__container {
-    display: flex;
-    align-items: center;
-    align-self: stretch;
-
-    :first-child:not(:only-child) {
-      border-right: none;
-    }
-
-    :last-child:not(:only-child) {
-      border-left: none;
-    }
-
-    :not(:first-child):not(:last-child) {
-      border-left: none;
-      border-right: none;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    //states
-    & input:focus {
-      box-shadow: 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);
-    }
-
-    &: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);
-      }
-    }
-  }
-
-  &__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);
-    }
+    @extend .pkt-input;
   }
 }

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.1/icons/check-medium.svg);
+      --svg: url(https://punkt-cdn.oslo.kommune.no/8.0/icons/check-medium.svg);
       position: relative;
       background-color: blue;
     }

package/dist/scss/elements/_index.scss

@@ -3,6 +3,7 @@
 @forward 'checkbox-radio';
 @forward 'hr';
 @forward 'image';
+@forward 'input';
 @forward 'list';
 @forward 'section';
 @forward 'select';

package/dist/scss/elements/_input.scss

@@ -0,0 +1,208 @@
+/* Common styles for all inputs */
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/functions';
+@use '../abstracts/mixins/typography';
+
+.pkt-input {
+  @include typography.get-text('pkt-txt-18-light');
+  display: flex;
+  align-items: center;
+  appearance: none; // Fix appearance on date inputs in Safari
+  background-color: var(--color-white);
+  border: 2px solid var(--color-blue-dark);
+  border-radius: 0;
+  color: var(--color-blue-dark);
+  margin: 0;
+  padding: 0.5rem 1rem;
+  width: 100%;
+
+  &:is(textarea) {
+    min-height: map.get(variables.$spacing, 'size-128');
+  }
+
+  &:is(select) {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    padding-right: 3rem;
+
+    &:not([multiple]) {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='var(--fg-color  %232A2859)' fill-rule='evenodd' d='M16 19.41 6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 0.7rem top 50%;
+      background-size: 1.5rem auto, 100%;
+    }
+
+    option {
+      background-color: var(--color-white);
+      color: var(--color-blue-dark);
+      font-weight: normal;
+    }
+  }
+
+  // 1. Override Firefox's default opacity
+  &::placeholder {
+    color: var(--color-grayscale-50);
+    opacity: 1; // 1
+  }
+
+  // states
+  &:hover,
+  &.pkt-input--hover {
+    border-color: var(--color-hover);
+  }
+
+  &:focus-visible + &-suffix,
+  &.pkt-input__textinput--focus {
+    box-shadow: 0 0 0 2px var(--color-active);
+    border-color: var(--color-active);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-active);
+    border-color: var(--color-active);
+  }
+
+  &:disabled,
+  &:disabled::placeholder,
+  &[readonly] {
+    opacity: 1;
+    background-color: var(--color-disabled-light);
+    border-color: var(--color-disabled);
+    cursor: inherit;
+  }
+
+  &:disabled:active {
+    border: 2px solid var(--color-disabled);
+  }
+
+  &-prefix,
+  &-suffix,
+  &-icon {
+    @include typography.get-text('pkt-txt-18-light');
+    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 {
+      content: '';
+      width: 1px;
+      margin-left: 0.5rem;
+      height: 100%;
+      background-color: var(--color-blue-dark);
+    }
+  }
+
+  &-suffix {
+    padding: 0.5rem 1rem 0.5rem 0rem;
+
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-left: 0.5rem;
+    }
+
+    &::before {
+      content: '';
+      width: 1px;
+      margin-right: 0.5rem;
+      height: 1.5rem;
+      background-color: var(--color-blue-dark);
+    }
+  }
+
+  &-icon {
+    padding: 0.5rem 1rem;
+    align-self: stretch;
+
+    & svg {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-left: 0.5rem;
+    }
+  }
+
+  &--counter-error,
+  &--counter-error:focus {
+    border-color: var(--color-red);
+    background-color: var(--color-red-30);
+  }
+  &--counter-error:focus {
+    box-shadow: 0 0 0 2px var(--color-red);
+  }
+
+  &__container {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+
+    :first-child:not(:only-child) {
+      border-right: none;
+    }
+
+    :last-child:not(:only-child) {
+      border-left: none;
+    }
+
+    :not(:first-child):not(:last-child) {
+      border-left: none;
+      border-right: none;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    //states
+    & input:focus {
+      box-shadow: none;
+    }
+
+    &:hover .pkt-input,
+    &:hover .pkt-input-prefix,
+    &:hover .pkt-input-suffix,
+    &:hover .pkt-input-icon {
+      border-color: var(--color-hover);
+    }
+
+    &:focus-within {
+      outline: 2px solid var(--color-active);
+
+      .pkt-input,
+      .pkt-input-prefix,
+      .pkt-input-suffix,
+      .pkt-input-icon {
+        border-color: var(--color-active);
+      }
+    }
+  }
+
+  &__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);
+    }
+  }
+}
+
+// Dark mode
+@at-root [data-mode='dark'] {
+  .pkt-input-prefix,
+  .pkt-input-suffix,
+  .pkt-input-icon {
+    background-color: var(--color-white);
+    color: var(--color-blue-dark);
+  }
+}