@oslokommune/punkt-css 5.2.0 → 6.0.0

package/dist/scss/abstracts/variables/_spacing.scss

@@ -11,6 +11,8 @@ $spacing: (
   'size-48': 3rem,
   'size-56': 3.5rem,
   'size-64': 4rem,
+  'size-72': 4.5rem,
+  'size-88': 5.5rem,
   'size-104': 6.5rem,
   'size-128': 8rem,
   'size-5': 0.3125rem /* deprecated */,

package/dist/scss/base/_typography.scss

@@ -32,7 +32,8 @@ strong {
   font-weight: map.get(variables.$font-weight, 'medium');
 }
 
-a {
+a,
+.pkt-link {
   // Order of pseudoclasses is important for specificity:
   // link, visited, hover, focus, active
   // but we don't use visited, so we can skip :link
@@ -142,7 +143,7 @@ a {
 
   &--external::after {
     content: ' ';
-    --svg: url(https://punkt-cdn.oslo.kommune.no/5.2/icons/new-window-small.svg);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/6.0/icons/new-window-small.svg);
     background-image: var(--svg);
     background-repeat: no-repeat;
     background-size: 18px 18px;
@@ -157,6 +158,15 @@ a {
   }
 }
 
+button.pkt-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: inherit;
+  cursor: pointer;
+  font-weight: inherit;
+}
+
 @at-root [data-mode='dark'] {
   .pkt-link {
     &--external::after {

package/dist/scss/components/_header.scss

@@ -6,120 +6,277 @@
 @use '../abstracts/variables';
 @use '../abstracts/mixins/' as *;
 
-$-header-height: 56px;
-$-header-height-phablet-up: 60px;
-$-logo-width: calc($-header-height * 60 / 31);
-$-logo-width-phablet-up: calc($-header-height-phablet-up * 60 / 31);
-
 .pkt-header {
   background-color: var(--color-white);
   border-bottom: 1px solid var(--color-gray);
-  display: grid;
-  gap: 0 0;
-  grid-template-areas: 'header-logo header-actions';
-  grid-template-columns: minmax($-logo-width, $-logo-width-phablet-up) 1fr;
-  padding: map.get(variables.$spacing, 'size-16')
-    map.get(variables.$spacing, 'size-16');
+  display: flex;
+  justify-content: space-between;
   align-items: center;
+  padding: 0 map.get(variables.$spacing, 'size-16');
+  height: map.get(variables.$spacing, 'size-72');
+
+  @include bp('tablet-up') {
+    height: map.get(variables.$spacing, 'size-88');
+  }
 
   @include bp('laptop-up') {
-    padding: map.get(variables.$spacing, 'size-24')
-      map.get(variables.$spacing, 'size-40');
+    height: map.get(variables.$spacing, 'size-104');
+    padding: 0 map.get(variables.$spacing, 'size-48');
+  }
+
+  &--fixed {
+    width: 100vw;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+  }
+
+  &--scroll-to-hide {
+    transform: translate3d(0, 0, 0);
+    transition: 0.5s transform ease-in-out;
+  }
+
+  &--hidden {
+    transform: translate3d(0, -100%, 0);
   }
 
   &__logo {
-    grid-area: header-logo;
+    flex: 0 1 auto;
+    display: flex;
+    align-items: center;
+    gap: map.get(variables.$spacing, 'size-16');
+    margin: 0;
+    padding: 0;
 
-    &-link {
-      display: block;
+    @include bp('laptop-up') {
+      gap: map.get(variables.$spacing, 'size-24');
+    }
+
+    &-link,
+    &-service {
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+    }
+
+    &-service {
+      padding-top: 0.28rem;
+      display: none;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      @include get-text('pkt-txt-22-light');
+
+      @include bp('tablet-up') {
+        display: inline-block;
+      }
+
+      @include bp('laptop-up') {
+        padding-top: 0.45rem;
+        @include get-text('pkt-txt-24-light');
+      }
     }
 
     &-svg {
-      height: $-header-height;
-      width: calc($-header-height * 60 / 31);
+      height: map.get(variables.$spacing, 'size-56');
+      width: calc(map.get(variables.$spacing, 'size-56') * 60 / 31);
 
-      @include bp('phablet-up') {
-        height: $-header-height-phablet-up;
-        width: calc($-header-height-phablet-up * 60 / 31);
+      @include bp('laptop-up') {
+        height: map.get(variables.$spacing, 'size-64');
+        width: calc(map.get(variables.$spacing, 'size-64') * 60 / 31);
       }
     }
   }
+
+  &--narrow {
+    padding: 0 map.get(variables.$spacing, 'size-16');
+    height: map.get(variables.$spacing, 'size-72');
+
+    .pkt-header__logo {
+      gap: map.get(variables.$spacing, 'size-16');
+
+      &-service {
+        padding-top: 0.28rem;
+        @include get-text('pkt-txt-18-light');
+      }
+
+      &-svg {
+        height: map.get(variables.$spacing, 'size-48');
+        width: calc(map.get(variables.$spacing, 'size-48') * 60 / 31);
+      }
+    }
+  }
+
+  &__menu-btn {
+    @media screen and (min-width: 0) and (max-width: map.get(variables.$breakpoints, 'tablet-big')) {
+      border: 0;
+
+      .pkt-btn__text {
+        display: none;
+      }
+    }
+  }
+
+  &__user-btn {
+    border-color: var(--color-yellow);
+  }
+
   &__actions {
-    grid-area: header-actions;
+    flex: 1 0 auto;
     display: flex;
     justify-content: flex-end;
-    align-items: center;
+    align-items: stretch;
+
+    &-row {
+      list-style: none;
+      padding-left: 0;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: map.get(variables.$spacing, 'size-32');
+
+      > li {
+        padding: 0;
+      }
+    }
   }
 
-  &__action {
-    align-items: center;
-    display: inline-flex;
-    flex-direction: row;
-    margin: 0 0 0 map.get(variables.$spacing, 'size-16');
+  &__dropdown {
+    z-index: 2;
+    position: absolute;
+    right: 0;
+    left: 0;
+    padding-left: 0;
+    margin: 0;
+    list-style: none;
+    visibility: hidden;
+    max-height: calc(100vh - 4.5rem);
+    overflow-x: hidden;
+    overflow-y: auto;
 
-    @include bp('phablet-up') {
-      height: $-header-height-phablet-up;
-      margin: 0 0 0 map.get(variables.$spacing, 'size-32');
+    @include bp('tablet-up') {
+      left: auto;
+      right: 0;
+      min-width: 23rem;
+      width: auto;
     }
 
-    &-text {
-      @include get-text('pkt-txt-18-light');
-      display: inline-flex;
-      align-items: center;
-      max-width: 3.125rem;
-      white-space: nowrap;
+    > li {
+      padding: map.get(variables.$spacing, 'size-32');
+      background-color: var(--color-white);
 
-      @include bp('phablet-up') {
-        max-width: none;
+      &.footer {
+        padding-top: map.get(variables.$spacing, 'size-16');
+        padding-bottom: map.get(variables.$spacing, 'size-16');
       }
-    }
-    &-textrow {
-      display: inline-flex;
-      @include get-text('pkt-txt-18-light');
-      max-width: 3.125rem;
 
-      @include bp('phablet-up') {
-        max-width: none;
+      &:nth-child(odd) {
+        background-color: var(--color-gray-light);
       }
-      &.text-row-inline {
-        display: inline;
+    }
+  }
+
+  &__user-fullname {
+    display: none;
+
+    @include bp('laptop-up') {
+      display: inline;
+    }
+  }
+
+  &__user-shortname {
+    display: inline;
+
+    @include bp('laptop-up') {
+      display: none;
+    }
+  }
+
+  &--has-dropdown {
+    @include bp('tablet-up') {
+      position: relative;
+    }
+
+    > .pkt-btn {
+      &:hover .pkt-btn--closed {
+        --fg-color: var(--color-white);
       }
     }
-    &-change {
-      margin-left: map.get(variables.$spacing, 'size-12');
+
+    .pkt-btn--open {
+      display: none;
     }
 
-    &-icon {
-      --fg-color: var(--color-blue-dark);
-      height: 1.5rem;
-      line-height: 1rem;
-      width: 1.5rem;
-      margin-left: map.get(variables.$spacing, 'size-4');
+    .pkt-btn--closed {
+      display: none;
 
-      @include bp('tablet-up') {
-        height: 1.5rem;
-        margin-left: 0.5rem;
-        width: 1.5rem;
+      @include bp('laptop-up') {
+        display: inline-block;
       }
     }
+
+    &.pkt-header--open-dropdown {
+      > .pkt-btn {
+        background-color: var(--color-active);
+        border-color: var(--color-active);
+        color: var(--color-white);
+
+        .pkt-btn--open {
+          --fg-color: var(--color-white);
+          @include bp('laptop-up') {
+            display: inline-block;
+          }
+        }
+
+        .pkt-btn--closed {
+          display: none;
+        }
+      }
+
+      .pkt-header__dropdown {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+.pkt-user-menu {
+  p {
+    margin: 0;
+  }
+  &__label {
+    color: var(--color-grayscale-60);
+    @include get-text('pkt-txt-14-medium');
   }
 
-  & .pkt-btn {
+  &__name {
     @include get-text('pkt-txt-18-medium');
-    margin: 0 0 0 map.get(variables.$spacing, 'size-4');
-    padding: map.get(variables.$spacing, 'size-12')
-      map.get(variables.$spacing, 'size-12');
+  }
 
-    @include bp('tablet-up') {
-      margin: 0 0 0 map.get(variables.$spacing, 'size-32');
-      padding: map.get(variables.$spacing, 'size-12')
-        map.get(variables.$spacing, 'size-16');
-    }
-    &:hover .pkt-header__action-icon {
-      --fg-color: var(--color-hover);
+  &__last-logged-in,
+  &__org_number {
+    @include get-text('pkt-txt-16-light');
+  }
+
+  .pkt-list {
+    margin: 0;
+    .pkt-link {
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
     }
-    &__text--representing {
-      @include get-text('pkt-txt-18-light');
+
+    > li > a {
+      grid-template-columns: 1.5rem auto;
+      gap: map.get(variables.$spacing, 'size-8');
     }
   }
+
+  .pkt-list-horizontal {
+    margin: 0;
+  }
 }

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

package/dist/scss/elements/_form.scss

@@ -36,6 +36,9 @@
    */
   &-label {
     width: 100%;
+    > p:first-child {
+      display: inline;
+    }
   }
 
   &-help {

package/dist/scss/elements/_list.scss

@@ -38,6 +38,26 @@
   }
 }
 
+.pkt-list-horizontal {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  li {
+    padding-right: map.get(variables.$spacing, 'size-16');
+  }
+  li + li {
+    padding-left: map.get(variables.$spacing, 'size-16');
+  }
+  li:last-child {
+    padding-right: 0;
+  }
+  &.bordered {
+    li + li {
+      border-left: 1px solid var(--color-grayscale-60);
+    }
+  }
+}
+
 // ==========================================================================
 // Definition lists
 // ==========================================================================

package/dist/scss/elements/_select.scss

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -20,7 +20,7 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^5.1.19",
+    "@oslokommune/punkt-assets": "^6.0.0",
     "astro": "^2.8.1",
     "edit-json-file": "^1.7.0",
     "fs-extra": "^11.1.0",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "fec1858cd2fa9d95724dbe6bff7b64cac4dfa540"
+  "gitHead": "2abe615a393680210345b1662767f1fd09f22a9d"
 }