@oslokommune/punkt-css 9.4.1 → 9.5.2

package/dist/scss/base/_typography.scss

@@ -44,7 +44,7 @@ a,
   cursor: pointer;
 
   // visited
-  &:visited:not(.pkt-linkcard) {
+  &:visited:not(.pkt-linkcard):not(.pkt-btn) {
     color: inherit;
   }
 
@@ -102,7 +102,7 @@ a,
 
   &--external::after {
     content: ' ';
-    --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/new-window-small.svg);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/9.5/icons/new-window-small.svg);
     background-image: var(--svg);
     background-repeat: no-repeat;
     background-size: 18px 18px;
@@ -112,7 +112,8 @@ a,
 
   &--external:hover::after {
     // #1f42aa
-    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
+    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%)
+      hue-rotate(222deg) brightness(93%) contrast(90%);
   }
 }
 
@@ -134,7 +135,8 @@ button.pkt-link {
 
     &--external:hover::after {
       // #b3f5ff
-      filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%) contrast(105%);
+      filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%)
+        hue-rotate(173deg) brightness(109%) contrast(105%);
     }
   }
 }

package/dist/scss/components/_header.scss

@@ -67,7 +67,7 @@
     }
 
     &-service {
-      padding-top: 0.2rem;
+      padding-top: 0.3rem;
       display: none;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -80,7 +80,7 @@
       }
 
       @include bp('laptop-up') {
-        padding-top: 0.4rem;
+        padding-top: 0.6rem;
         @include get-text('pkt-txt-24-light');
       }
     }
@@ -143,7 +143,7 @@
       align-items: center;
       gap: map.get(variables.$spacing, 'size-32');
 
-      >li {
+      > li {
         padding: 0;
       }
     }
@@ -172,7 +172,7 @@
       width: auto;
     }
 
-    >li {
+    > li {
       padding: map.get(variables.$spacing, 'size-32');
       background-color: var(--pkt-color-surface-subtle-white);
 
@@ -208,7 +208,7 @@
       position: relative;
     }
 
-    >.pkt-btn {
+    > .pkt-btn {
       &:hover .pkt-btn--closed {
         --fg-color: var(--pkt-color-surface-subtle-white);
       }
@@ -227,7 +227,7 @@
     }
 
     &.pkt-header--open-dropdown {
-      >.pkt-btn {
+      > .pkt-btn {
         background-color: var(--pkt-color-border-states-active);
         border-color: var(--pkt-color-border-states-active);
         color: var(--pkt-color-surface-subtle-white);
@@ -283,7 +283,7 @@
       }
     }
 
-    >li>a {
+    > li > a {
       grid-template-columns: 1.5rem auto;
       gap: map.get(variables.$spacing, 'size-8');
     }

package/dist/scss/components/_index.scss

@@ -12,3 +12,4 @@
 @forward 'linkcard';
 @forward 'tag';
 @forward 'textinput';
+@forward 'searchinput';

package/dist/scss/components/_searchinput.scss

@@ -0,0 +1,109 @@
+/* Common styles for all inputs */
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/functions';
+@use '../abstracts/mixins/typography';
+
+.pkt-searchinput {
+  position: relative;
+
+  @include typography.get-text('pkt-txt-18-light');
+
+  &__field {
+    width: min(100%, 31rem);
+    display: flex;
+  }
+
+  &--fullwidth &__field {
+    width: 100%;
+  }
+
+  &--global .pkt-input:not(:disabled) {
+    border-color: var(--pkt-color-border-yellow);
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: var(--pkt-color-input-border-active);
+    }
+  }
+
+  &--global &__button {
+    border-radius: 50%;
+  }
+
+  &--local-with-button &__field {
+    gap: 0.5rem;
+  }
+
+  &--local .pkt-input {
+    padding: 0.5rem 0 0.5rem 1rem;
+  }
+
+  &--local &__button {
+    &:disabled {
+      border-color: var(--pkt-color-input-border-disabled);
+    }
+    & svg {
+      margin-left: 0;
+    }
+  }
+
+  &__suggestions {
+    position: absolute;
+    z-index: 2;
+    padding: 0;
+    margin: 2px 0 0;
+    width: min(calc(100%), 31rem);
+    list-style: none;
+    background-color: var(--pkt-color-background-card);
+    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+  }
+  &--global &__suggestions {
+    width: min(calc(100% - 3rem), 28rem);
+  }
+  &--local-with-button &__suggestions {
+    width: min(calc(100% - 3.5rem), 27.5rem);
+  }
+  &--fullwidth &__suggestions {
+    width: 100%;
+  }
+  &__suggestion {
+    display: block;
+    padding: 1rem;
+    text-decoration: none;
+    background-color: transparent;
+    color: var(--pkt-color-text-action-normal);
+    border: none;
+    font: inherit;
+    outline: inherit;
+    text-align: inherit;
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+      background-color: var(--pkt-color-background-subtle);
+      color: var(--pkt-color-text-action-active);
+      .pkt-searchinput__suggestion-title {
+        text-decoration: underline;
+      }
+      > * {
+        color: inherit;
+      }
+    }
+    &--has-hover {
+      cursor: pointer;
+    }
+  }
+  &__suggestion-title {
+    @include typography.get-text('pkt-txt-18-medium');
+  }
+  &__suggestion-text {
+    margin: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    hyphens: auto;
+  }
+}

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

@@ -118,7 +118,7 @@ $-module-name: 'pkt-input-check';
 
         // Checkbox
         &[type='checkbox'] {
-          --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/check-medium.svg);
+          --svg: url(https://punkt-cdn.oslo.kommune.no/9.5/icons/check-medium.svg);
           position: relative;
           background-color: var(--pkt-color-input-border-normal);
         }

package/dist/scss/elements/_input.scss

@@ -24,7 +24,11 @@
   --pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white);
 }
 
-@at-root [data-mode='dark'] .pkt-input, [data-mode='dark'] .pkt-input-prefix, [data-mode='dark'] .pkt-input-suffix, [data-mode='dark'] .pkt-input-icon, [data-mode='dark'] .pkt-input__container {
+@at-root [data-mode='dark'] .pkt-input,
+  [data-mode='dark'] .pkt-input-prefix,
+  [data-mode='dark'] .pkt-input-suffix,
+  [data-mode='dark'] .pkt-input-icon,
+  [data-mode='dark'] .pkt-input__container {
   --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
   --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
   --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
@@ -52,7 +56,9 @@
   padding: 0.5rem 1rem;
 
   &:not(textarea[cols]):not(input[size]):not(&--fullwidth),
-  &__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not( :is(:has(&--fullwidth))) {
+  &__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(
+      :is(:has(&--fullwidth))
+    ) {
     width: min(100%, 31rem);
   }
 
@@ -71,7 +77,7 @@
     padding-right: 3rem;
 
     &:not([multiple]) {
-      --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/chevron-thin-down.svg);
+      --svg: url(https://punkt-cdn.oslo.kommune.no/9.5/icons/chevron-thin-down.svg);
       background-image: var(--svg);
       background-repeat: no-repeat;
       background-position: right 0.7rem top 50%;
@@ -225,6 +231,9 @@
     &:hover .pkt-input-suffix,
     &:hover .pkt-input-icon {
       border-color: var(--pkt-color-input-border-active);
+      &:disabled {
+        border-color: var(--pkt-color-input-border-disabled);
+      }
     }
 
     &:focus-within {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "9.4.1",
+  "version": "9.5.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": "2b6ea8c5c18bbe72cfcad65ea783e92da07bccf4"
+  "gitHead": "aea482195b0b2b6b5fdf7cceea09f585cba16cea"
 }