@oslokommune/punkt-css 16.26.3 → 17.0.1

package/dist/scss/components/_footer.scss

@@ -1,176 +1,203 @@
 /*
- * Footer element
+ * Footer: pkt-footer (sekundær + global) og pkt-footer-simple (kompakt + global)
+ *
+ *   --pkt-footer-bg           bakgrunn (default: grå sekundær)
+ *   --pkt-footer-fg           tekstfarge
+ *   --pkt-footer-link-hover   hover-farge på lenker (default: text-action-active)
  */
 
 @use 'sass:map';
 @use '../abstracts/variables';
-@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/container-queries' as *;
 @use '../abstracts/mixins/typography';
 
-$-footer-bg-color: var(--pkt-color-surface-strong-dark-blue);
-$-footer-color: var(--pkt-color-text-body-default);
-$-footer-max-width: map.get(variables.$breakpoints, 'laptop');
-$-footer-icon-r-margin: map.get(variables.$spacing, 'size-8');
-$-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
+$-footer-content-max-width: 75rem;
+
+.pkt-footer,
+.pkt-footer-simple {
+  display: block;
+  width: 100%;
+  container-type: inline-size;
+  container-name: pkt-footer;
+}
 
 .pkt-footer {
-  padding: map.get(variables.$spacing, 'size-40') map.get(variables.$spacing, 'size-24');
-  background-color: $-footer-bg-color;
-  color: $-footer-color;
-  display: flex;
-  align-items: center;
-
-  @include typography.get-text('pkt-txt-18-light');
-  @include bp('laptop-up') {
-    padding: map.get(variables.$spacing, 'size-56') map.get(variables.$spacing, 'size-24');
-    justify-content: center;
-  }
+  &__band {
+    background-color: var(--pkt-footer-bg, var(--pkt-color-background-subtle, #f9f9f9));
+    color: var(--pkt-footer-fg, var(--pkt-color-text-body-default, #2a2859));
 
-  &__container {
-    max-width: $-footer-max-width;
-  }
+    @include typography.get-text('pkt-txt-16-light');
 
-  &__title {
-    margin-bottom: map.get(variables.$spacing, 'size-32');
-    margin-top: 0;
-    color: $-footer-color;
-    @include typography.get-text('pkt-txt-24-medium');
-  }
+    @include cq('pkt-footer', $cq-bp-tablet-big) {
+      @include typography.get-text('pkt-txt-18-light');
+    }
 
-  // tekstfelt
-  &__text:last-child {
-    margin-bottom: 0;
-    margin-top: map.get(variables.$spacing, 'size-32');
-  }
+    &--global {
+      --pkt-footer-bg: var(--pkt-color-surface-strong-dark-blue, #2a2859);
+      --pkt-footer-fg: var(--pkt-color-text-body-light, #fff);
+      --pkt-footer-link-hover: var(--pkt-color-brand-blue-1000, #6fe9ff);
+    }
 
-  &__text:not(:last-child) {
-    margin-bottom: map.get(variables.$spacing, 'size-32');
-    margin-top: 0;
-  }
+    a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-position: from-font;
 
-  // Lenkelisten
-  &__list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
+      &:hover {
+        // !important fordi grunnstilene våre er altfor spesifikke...
+        color: var(--pkt-footer-link-hover, var(--pkt-color-text-action-active, currentColor)) !important;
+      }
+    }
+
+    h2 {
+      margin: 0 0 map.get(variables.$spacing, 'size-16');
+      color: inherit;
 
-  &__list-item {
-    word-break: break-word;
+      @include typography.get-text('pkt-txt-20-medium');
+
+      @include cq('pkt-footer', $cq-bp-tablet) {
+        @include typography.get-text('pkt-txt-22-medium');
+      }
 
-    &:not(:last-child) {
-      margin-bottom: $-footer-link-b-margin;
+      @include cq('pkt-footer', $cq-bp-tablet-big) {
+        @include typography.get-text('pkt-txt-24-medium');
+      }
     }
 
-    @include bp('laptop-up') {
-      margin-bottom: 0;
+    p {
+      margin: 0 0 map.get(variables.$spacing, 'size-16');
     }
   }
 
-  &__link {
-    display: flex;
-    text-decoration: none !important;
+  &__inner {
+    max-width: $-footer-content-max-width;
+    margin: 0 auto;
+    padding: map.get(variables.$spacing, 'size-52') map.get(variables.$spacing, 'size-16');
 
-    &:hover .pkt-footer__link-icon {
-      --fg-color: currentColor;
+    @include cq('pkt-footer', $cq-bp-tablet) {
+      padding: map.get(variables.$spacing, 'size-52') map.get(variables.$spacing, 'size-32');
     }
-  }
 
-  &__link-icon {
-    --fg-color: currentColor;
-    width: 24px;
-    height: 24px;
-    margin-right: $-footer-icon-r-margin;
-    flex-shrink: 0;
-
-    @include bp('laptop-up') {
-      margin-top: 0;
+    &--compact {
+      padding-top: map.get(variables.$spacing, 'size-32');
+      padding-bottom: map.get(variables.$spacing, 'size-32');
     }
   }
 
-  // Social media ikoner og språklenke
-  &__social {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
+  &__sections {
+    display: grid;
+    grid-template-columns: 1fr;
     gap: map.get(variables.$spacing, 'size-32');
-    margin-top: map.get(variables.$spacing, 'size-40');
 
-    &:hover .pkt-footer__link-icon {
-      --fg-color: currentColor;
-    }
-
-    @include bp('laptop-up') {
-      align-items: flex-end;
-      justify-content: end;
+    @include cq('pkt-footer', $cq-bp-tablet) {
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: map.get(variables.$spacing, 'size-32');
+      row-gap: map.get(variables.$spacing, 'size-52');
     }
+  }
 
-    &-language {
-      @include bp('laptop-up') {
-        justify-self: flex-start;
-      }
-    }
+  &__link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: map.get(variables.$spacing, 'size-16');
 
-    &-icon {
-      --fg-color: currentColor;
-      width: 24px;
-      height: 24px;
+    > li {
+      word-break: break-word;
     }
+  }
 
-    &-icon-link:not(:last-child) {
-      margin-right: map.get(variables.$spacing, 'size-16');
-    }
+  &__link-domain {
+    white-space: nowrap;
   }
-}
 
-// Simple footer
+  &__bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: map.get(variables.$spacing, 'size-32');
+    margin-top: map.get(variables.$spacing, 'size-16');
 
-.pkt-footer-simple {
-  padding: map.get(variables.$spacing, 'size-32') map.get(variables.$spacing, 'size-24');
-  background-color: $-footer-bg-color;
-  color: $-footer-color;
-  display: flex;
-  align-items: center;
-
-  @include typography.get-text('pkt-txt-18-light');
-  @include bp('laptop-up') {
-    justify-content: center;
+    @include cq('pkt-footer', $cq-bp-tablet) {
+      grid-column: -2 / -1;
+      margin-top: 0;
+    }
   }
 
-  &__container {
-    max-width: $-footer-max-width;
+  &__sections + &__bottom {
+    margin-top: map.get(variables.$spacing, 'size-32');
   }
 
-  // Lenkelisten
-  &__list {
-    padding: 0;
-    margin: 0;
+  &__bottom-links {
     list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-32');
   }
 
-  &__list-item {
-    @include bp('laptop-up') {
-      display: inline-flex;
+  &__some {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    gap: map.get(variables.$spacing, 'size-16');
+
+    @include cq('pkt-footer', $cq-bp-tablet) {
+      gap: map.get(variables.$spacing, 'size-24');
     }
 
-    &:not(:last-child) {
-      margin-bottom: $-footer-link-b-margin;
+    a {
+      display: inline-flex;
 
-      @include bp('laptop-up') {
-        margin-bottom: 0;
-        margin-right: map.get(variables.$spacing, 'size-32');
+      &:has(.pkt-footer__some-icon) {
+        text-decoration: none;
       }
     }
   }
 
-  &__link {
+  &__some-icon {
+    --fg-color: currentColor;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  &__sections + &__consent {
+    margin-top: map.get(variables.$spacing, 'size-32');
+  }
+}
+
+.pkt-footer-simple {
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
     display: flex;
-    text-decoration: none !important;
+    flex-direction: column;
+    gap: map.get(variables.$spacing, 'size-16');
+
+    @include cq('pkt-footer', $cq-bp-tablet) {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-32');
+    }
+  }
+
+  @at-root a#{&}__link {
+    display: inline-flex;
     align-items: flex-start;
+    gap: map.get(variables.$spacing, 'size-8');
+    color: inherit;
+    text-decoration: none;
 
-    &:hover .pkt-footer__link-icon {
-      --fg-color: currentColor;
+    &:hover {
+      text-decoration: underline;
+      text-underline-position: from-font;
     }
   }
 
@@ -178,11 +205,10 @@ $-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
     --fg-color: currentColor;
     width: 24px;
     height: 24px;
-    margin-right: $-footer-icon-r-margin;
     flex-shrink: 0;
+  }
 
-    @include bp('laptop-up') {
-      margin-top: 0;
-    }
+  &__link-domain {
+    white-space: nowrap;
   }
 }

package/dist/scss/components/_header-global.scss

@@ -0,0 +1,192 @@
+/*
+ * HeaderGlobal component
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/' as *;
+@use 'header-shared' as shared;
+
+.pkt-header-global-spacer {
+  height: map.get(variables.$spacing, 'size-104');
+
+  &--tablet {
+    height: map.get(variables.$spacing, 'size-88');
+  }
+
+  &--mobile {
+    height: map.get(variables.$spacing, 'size-88');
+  }
+
+  &--mobile#{&}--has-user {
+    height: calc(#{map.get(variables.$spacing, 'size-88')} + #{map.get(variables.$spacing, 'size-56')});
+  }
+}
+
+.pkt-header-global {
+  @include shared.header-chrome;
+  @include shared.header-grid('pkt-header-global', map.get(variables.$spacing, 'size-88'));
+
+  &__logo-area {
+    align-items: center;
+    display: inline-flex;
+    padding-left: map.get(variables.$spacing, 'size-32');
+
+    .pkt-header-global--tablet & {
+      padding-left: map.get(variables.$spacing, 'size-16');
+    }
+
+    .pkt-header-global--mobile & {
+      padding-left: map.get(variables.$spacing, 'size-8');
+    }
+  }
+
+  &__content,
+  &__user {
+    align-items: center;
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  &__content {
+    column-gap: map.get(variables.$spacing, 'size-24');
+
+    .pkt-header-global--tablet & {
+      column-gap: map.get(variables.$spacing, 'size-8');
+    }
+
+    .pkt-header-global--mobile & {
+      column-gap: map.get(variables.$spacing, 'size-8');
+      padding-right: map.get(variables.$spacing, 'size-8');
+    }
+  }
+
+  &__menu-toggle,
+  &__contact {
+    flex: 0 0 auto;
+  }
+
+  &__user {
+    justify-self: end;
+    padding-right: map.get(variables.$spacing, 'size-32');
+
+    .pkt-header-global--tablet:not(.pkt-header-global--mobile) & {
+      padding-right: map.get(variables.$spacing, 'size-16');
+    }
+  }
+
+  &__user-container {
+    position: relative;
+    flex: 0 0 auto;
+
+    &.is-open {
+      z-index: 100;
+    }
+  }
+
+  @include shared.header-logo(3.2rem);
+
+  &__search {
+    flex: 0 1 auto;
+    width: 22rem;
+    max-width: 100%;
+    min-width: 0;
+
+    .pkt-searchinput,
+    .pkt-searchinput__field {
+      width: 100%;
+    }
+  }
+
+  &__contact {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  &__user-button {
+    max-width: 20rem;
+
+    .pkt-btn__text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+      flex: 1 1 auto;
+    }
+  }
+
+  &__user-menu {
+    position: absolute;
+    right: 0;
+    width: max(15.5rem, 100%);
+    max-width: min(32rem, 90vw);
+
+    &.is-open {
+      z-index: 100;
+    }
+  }
+
+  &__search-toggle {
+    &,
+    & button {
+      flex: 0 0 auto;
+      border-radius: 50%;
+    }
+  }
+
+  &--mobile &__menu-toggle {
+    &,
+    & button {
+      border-radius: 50%;
+    }
+  }
+
+  &__menu,
+  &__search-panel {
+    position: fixed;
+    top: max(0px, calc(var(--pkt-header-global-top, 0px) + #{map.get(variables.$spacing, 'size-104')}));
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 90;
+    background-color: rgba(0, 0, 0, 0.55);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+
+    &--tablet,
+    &--mobile {
+      top: max(0px, calc(var(--pkt-header-global-top, 0px) + #{map.get(variables.$spacing, 'size-88')}));
+    }
+  }
+
+  &__menu .pkt-header-menu {
+    width: min(var(--pkt-header-global-width, 100%), 75rem);
+    margin: 0 0 0
+      calc(var(--pkt-header-global-left, 0px) + max(0px, (var(--pkt-header-global-width, 100%) - 75rem) / 2));
+    box-shadow:
+      0px 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+  }
+
+  &__search-panel-inner {
+    margin-left: var(--pkt-header-global-left, 0px);
+    width: var(--pkt-header-global-width, 100%);
+    background-color: var(--pkt-color-background-default);
+    border-bottom: 1px solid var(--pkt-color-border-subtle);
+    box-shadow:
+      0px 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+    padding: map.get(variables.$spacing, 'size-16');
+
+    .pkt-searchinput,
+    .pkt-searchinput__field {
+      width: 100%;
+    }
+  }
+}
+
+.pkt-header-global.pkt-header-global--mobile {
+  @include shared.header-mobile-user-bar('pkt-header-global');
+}