@inera/ids-design 5.2.2 → 5.4.0

package/src/components/header-1177/header-1177-nav-item.scss

@@ -0,0 +1,158 @@
+@use "../../global/partials";
+@use "../../layout/breakpoints.scss";
+
+@mixin ids-header-nav-item--after() {
+  background: var(--IDS-COLOR-PRIMARY-40);
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 0.313rem;
+  left: 0;
+  right: 100%;
+  position: absolute;
+  transition: all 0.3s ease 0s;
+  width: 0;
+  margin-left: 0.625rem;
+  margin-right: 0.625rem;
+}
+@mixin ids-header-nav-item--after--active() {
+  width: auto;
+  right: 0;
+}
+
+@mixin ids-header-nav-item() {
+  & > a,
+  & > button,
+  ::slotted(a) {
+    display: flex;
+    align-items: center;
+    padding: 0.875rem 0.625rem;
+    position: relative;
+    text-decoration: none;
+    cursor: pointer;
+    min-height: 3.5rem;
+    height: 100%;
+    font-weight: 400;
+    letter-spacing: -0.031rem;
+    background-color: transparent !important;
+    font-size: 1.25rem !important;
+    font-family: var(--IDS-FONT-FAMILY-HEADING);
+    color: var(--IDS-COLOR-PRIMARY-35);
+    border-radius: 0;
+    border: none;
+  }
+  & > a,
+  & > button {
+    &:focus {
+      @include partials.ids-outline(-0.125rem);
+      &:after {
+        @include ids-header-nav-item--after--active();
+      }
+    }
+
+    &:hover {
+      &:after {
+        @include ids-header-nav-item--after--active();
+      }
+    }
+
+    &:after {
+      @include ids-header-nav-item--after();
+    }
+  }
+
+  ::slotted(a):after {
+    @include ids-header-nav-item--after();
+  }
+  ::slotted(a:focus) {
+    @include partials.ids-outline(-0.125rem);
+  }
+  &.ids-header-1177__nav-item--active button,
+  &.ids-header-1177__nav-item--active ::slotted(a),
+  ::slotted(a:focus),
+  ::slotted(a:hover) {
+    &:after {
+      @include ids-header-nav-item--after--active();
+    }
+  }
+}
+
+@mixin ids-header-nav-item-dropdown() {
+  .ids-header-1177__items__item-dropdown {
+    background-color: var(--IDS-COLOR-PRIMARY-90);
+    left: 0;
+    min-height: 10.813rem;
+    padding: 2.5rem 0 3.125rem;
+    position: absolute;
+    width: 100%;
+    top: 100%;
+    z-index: -1;
+    box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
+    .ids-header-1177__items__item-dropdown__content {
+      max-width: var(--IDS__MAX-WIDTH);
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      padding: 0 0.625rem;
+      margin-left: auto;
+      margin-right: auto;
+
+      .ids-header-1177__items__item-dropdown__content-col-1 a,
+      .ids-header-1177__items__item-dropdown__content-col-2 a,
+      .ids-header-1177__items__item-dropdown__content-col-3 a,
+      ::slotted([slot="col-1"]),
+      ::slotted([slot="col-2"]),
+      ::slotted([slot="col-3"]) {
+        display: block;
+        margin-bottom: 0.625rem;
+        margin-right: 2.5rem;
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-bottom: 0.625rem;
+        border-bottom: 0.063rem solid #dfa9b8;
+      }
+    }
+  }
+}
+
+@mixin ids-header-1177__nav-item($responsive: true) {
+  @include ids-header-nav-item();
+  @include ids-header-nav-item-dropdown();
+  @if $responsive {
+    @media (max-width: breakpoints.$medium) {
+      display: none;
+    }
+  }
+}
+
+.ids-header-1177--unresponsive .ids-header-1177__nav-item {
+  @include ids-header-1177__nav-item(false);
+}
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item {
+  @include ids-header-1177__nav-item();
+}
+
+.ids-header-1177--fluid {
+  .ids-header-1177__items__item-dropdown {
+    .ids-header-1177__items__item-dropdown__content {
+      max-width: 100% !important;
+    }
+  }
+}
+
+:host {
+  .ids-header-1177__nav-item {
+    &:not(.ids-header-1177__nav-item--unresponsive) {
+      @include ids-header-1177__nav-item();
+    }
+    &.ids-header-1177__nav-item--unresponsive {
+      @include ids-header-1177__nav-item(false);
+    }
+    &.ids-header-1177__nav-item--fluid {
+      .ids-header-1177__items__item-dropdown {
+        .ids-header-1177__items__item-dropdown__content {
+          max-width: 100% !important;
+        }
+      }
+    }
+  }
+}

package/src/components/header-1177/header-1177-nav-lit.ts

@@ -0,0 +1,4 @@
+import { css, unsafeCSS } from 'lit';
+import Header1177NavSCSS from './header-1177-nav.scss';
+
+export default css`${unsafeCSS(Header1177NavSCSS)}`;

package/src/components/header-1177/header-1177-nav.scss

@@ -0,0 +1,57 @@
+@use "../../layout/breakpoints.scss";
+
+@mixin ids-header-1177__nav($responsive: true) {
+  position: relative;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  .ids-header-1177__nav-inner {
+    max-width: var(--IDS__MAX-WIDTH);
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: var(--IDS-COLOR-NEUTRAL-100);
+    @if $responsive {
+      @media (max-width: breakpoints.$medium) {
+        box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.625rem 0;
+        background-color: var(--IDS-COLOR-PRIMARY-90);
+        flex-wrap: wrap;
+        flex: 1 1 auto;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+
+.ids-header-1177--unresponsive nav.ids-header-1177__nav {
+  @include ids-header-1177__nav(false);
+}
+
+.ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav {
+  @include ids-header-1177__nav();
+}
+
+.ids-header-1177--fluid {
+  .ids-header-1177__container {
+    .ids-header-1177__nav-inner {
+      max-width: 100% !important;
+    }
+  }
+}
+
+:host {
+  nav.ids-header-1177__nav {
+    &:not(.ids-header-1177__nav--unresponsive) {
+      @include ids-header-1177__nav();
+    }
+    &.ids-header-1177__nav--unresponsive {
+      @include ids-header-1177__nav(false);
+    }
+    &.ids-header-1177__nav--fluid {
+      .ids-header-1177__nav-inner {
+        max-width: 100%;
+      }
+    }
+  }
+}

package/src/components/header-1177/header-1177.scss

@@ -0,0 +1,364 @@
+@use "../../global/partials";
+@use "../../layout/breakpoints.scss";
+
+@mixin ids-header-1177__separator($mobile: false, $responsive: true) {
+  &:before {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    left: -1.875rem;
+    width: 0.063rem;
+    height: 4rem;
+    background-color: var(--IDS-COLOR-NEUTRAL-100);
+    @if $responsive {
+      @media (max-width: breakpoints.$medium) {
+        left: 0;
+        height: 2rem;
+      }
+    }
+  }
+}
+
+@mixin ids-header-1177__graphics($mobile: false, $responsive: true) {
+  &:after {
+    content: "";
+    background-color: var(--IDS-COLOR-PRIMARY-40);
+    position: absolute;
+    z-index: 0;
+    border-radius: 100%;
+    right: -0.5625rem;
+    left: auto;
+    @if $mobile {
+      display: none;
+      top: 0;
+      margin-top: -7.81rem;
+      clip: rect(7.8125rem, 18.75rem, 10.8375rem, 18.125rem);
+      height: 18.75rem;
+      width: 18.75rem;
+      @if $responsive {
+        @media (max-width: breakpoints.$medium) {
+          display: block;
+        }
+      }
+    } @else {
+      top: 50%;
+      margin-top: -12.5rem;
+      clip: rect(8.75rem, 25rem, 16.25rem, 24.375rem);
+      height: 25rem;
+      width: 25rem;
+      @if $responsive {
+        @media (max-width: breakpoints.$medium) {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@mixin ids-header-1177__inner($responsive: true) {
+  max-width: var(--IDS__MAX-WIDTH);
+  margin-left: auto;
+  margin-right: auto;
+  background: var(--IDS-COLOR-PRIMARY-90);
+  width: 100%;
+  height: 7.5rem;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  &.ids-header-1177--hide-region-picker,
+  &:has(.ids-header-1177__avatar) {
+    grid-template-columns: auto 1fr;
+  }
+  @if $responsive {
+    @media (max-width: breakpoints.$medium) {
+      grid-template-columns: auto 1fr auto;
+      height: 3rem;
+      &.ids-header-1177--hide-region-picker,
+      &:has(.ids-header-1177__avatar) {
+        grid-template-columns: auto 1fr;
+      }
+    }
+  }
+}
+
+@mixin ids-header-1177__logo($responsive: true) {
+  .ids-header-1177__logo {
+    background-color: var(--IDS-COLOR-PRIMARY-40);
+    display: grid;
+    grid-column: 1;
+    grid-row: 1;
+    align-items: center;
+    grid-template-columns: auto auto;
+    position: relative;
+    height: 100%;
+    margin-left: 0 !important;
+    margin-right: 0;
+    padding-left: 0.75rem;
+    padding-right: 2.25rem;
+    @include ids-header-1177__graphics(false, $responsive);
+
+    @if $responsive {
+      @media (max-width: breakpoints.$medium) {
+        grid-template-columns: auto;
+        padding-left: 1.25rem;
+        padding-right: 0.75rem;
+        @include ids-header-1177__graphics(true, $responsive);
+      }
+    }
+
+    .ids-header-1177__logo-link {
+      width: 6.438rem;
+      height: 2.5rem;
+      margin-right: 1.5rem;
+
+      a {
+        display: block;
+        @include partials.ids-focusable--light();
+      }
+
+      ::slotted([slot="logo"]:focus) {
+        display: block;
+        outline: var(--IDS-FOCUS__OUTLINE--LIGHT) !important;
+        outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+      }
+
+      @if $responsive {
+        @media (max-width: breakpoints.$medium) {
+          margin-right: 0;
+          max-width: 2.625rem;
+          height: 1rem !important;
+          a,
+          ::slotted([slot="logo"]) {
+            margin-right: 0;
+            display: flex !important;
+            height: 1rem !important;
+            width: 100% !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin ids-header-1177__region($responsive: true) {
+  .ids-header-1177__region {
+    display: flex;
+    gap: 1rem;
+    grid-column: 2;
+    align-items: center;
+    grid-row: 1;
+    position: relative;
+    @include ids-header-1177__graphics(true, $responsive);
+    @if $responsive {
+      @media (max-width: breakpoints.$medium) {
+        background-color: var(--IDS-COLOR-PRIMARY-40);
+        justify-content: space-between;
+        padding-left: 0.5rem;
+      }
+    }
+    &.ids-header-1177__region--selected {
+      .ids-header-1177__region-picker {
+        button {
+          display: flex;
+          justify-content: end;
+        }
+      }
+      @include ids-header-1177__separator(false, $responsive);
+      .ids-header-1177__region-icon {
+        padding-right: 2rem;
+      }
+      .ids-header-1177__region-picker__text {
+        font-size: 1rem;
+        @if $responsive {
+          @media (max-width: breakpoints.$medium) {
+            display: none;
+          }
+        }
+      }
+    }
+    &:not(.ids-header-1177__region--selected) {
+      .ids-header-1177__region-picker {
+        button {
+          @if $responsive {
+            @media (max-width: breakpoints.$medium) {
+              @include ids-header-1177__separator(true, $responsive);
+            }
+          }
+        }
+      }
+      .ids-header-1177__region-icon {
+        @if $responsive {
+          @media (max-width: breakpoints.$medium) {
+            display: none;
+          }
+        }
+      }
+    }
+    .ids-header-1177__region-icon {
+      background-color: var(--IDS-COLOR-PRIMARY-40);
+      display: grid;
+      position: relative;
+      height: 100%;
+      align-items: center;
+      @if $responsive {
+        @media (max-width: breakpoints.$medium) {
+          background-color: var(--IDS-COLOR-PRIMARY-40);
+          justify-content: space-between;
+          padding-left: 0.5rem;
+          height: auto;
+          align-items: normal;
+        }
+      }
+      @include ids-header-1177__graphics(false, $responsive);
+      slot {
+        display: grid;
+      }
+      ::slotted([slot="region"]),
+      .ids-header-1177__region-logo {
+        max-height: 2.813rem;
+        max-width: 12.5rem;
+        display: flex;
+        @if $responsive {
+          @media (max-width: breakpoints.$medium) {
+            max-height: 2rem;
+          }
+        }
+      }
+    }
+    .ids-header-1177__region-picker {
+      position: relative;
+      align-items: center;
+      position: relative;
+      height: inherit;
+      margin-left: 1.5rem;
+      @if $responsive {
+        @media (max-width: breakpoints.$medium) {
+          margin-left: 0;
+          position: initial;
+          height: 100%;
+          justify-content: space-between;
+        }
+      }
+      button {
+        @include partials.ids-button-base();
+        display: flex;
+        gap: 1rem;
+        font-size: 0.875rem;
+        color: var(--IDS-COLOR-PRIMARY-35);
+        align-items: center;
+        @include partials.ids-focusable(0.125rem);
+        @if $responsive {
+          @media (max-width: breakpoints.$medium) {
+            inset: 0;
+            padding-right: 1rem;
+            padding-left: 0.75rem;
+            position: absolute;
+            justify-content: space-between;
+            color: var(--IDS-COLOR-NEUTRAL-100);
+            @include partials.ids-focusable--light(-0.25rem);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin ids-header-1177__nav-mobile($responsive: true) {
+  .ids-header-1177__nav-mobile {
+    display: none;
+    background-color: var(--IDS-COLOR-PRIMARY-90);
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    height: 3.125rem;
+    @if $responsive {
+      @media (max-width: breakpoints.$medium) {
+        display: flex;
+      }
+    }
+  }
+}
+
+@mixin ids-header-1177__items($responsive: true) {
+  .ids-header-1177__items {
+    justify-self: end;
+    display: grid;
+    grid-row: 1;
+    grid-column: 3;
+    align-items: center;
+    grid-auto-flow: column;
+    gap: 1.25rem;
+    margin-right: 1.25rem;
+    margin-left: 1rem;
+    @if $responsive {
+      @media (max-width: breakpoints.$medium) {
+        gap: 0;
+        margin-left: 1rem;
+        margin-right: 0.5rem;
+      }
+    }
+  }
+}
+
+@mixin ids-header-1177__container($responsive: true) {
+  --IDS-HEADER__REGION-PICKER-ICON: var(--IDS-COLOR-PRIMARY-35);
+  @if $responsive {
+    @media (max-width: breakpoints.$medium) {
+      --IDS-HEADER__REGION-PICKER-ICON: var(--IDS-COLOR-NEUTRAL-100);
+    }
+  }
+
+  .ids-header-1177__container {
+    background: linear-gradient(
+      90deg,
+      var(--IDS-COLOR-PRIMARY-40) 50%,
+      var(--IDS-COLOR-PRIMARY-90) 50%
+    );
+    padding: 0;
+    position: relative;
+    z-index: 2;
+
+    @if $responsive {
+      @media (max-width: breakpoints.$medium) {
+        box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
+      }
+    }
+    .ids-header-1177__inner {
+      @include ids-header-1177__inner($responsive);
+      @include ids-header-1177__logo($responsive);
+      @include ids-header-1177__region($responsive);
+      @include ids-header-1177__items($responsive);
+    }
+  }
+  @include ids-header-1177__nav-mobile($responsive);
+
+  .ids-header-1177__skip-to-content {
+    @include partials.ids-skip-to-content-link();
+  }
+
+  @if $responsive {
+    @media (max-width: breakpoints.$medium) {
+      box-shadow: none;
+    }
+  }
+}
+
+header.ids-header-1177 {
+  position: relative;
+  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
+  &:not(.ids-header-1177--unresponsive) {
+    @include ids-header-1177__container();
+  }
+  &.ids-header-1177--unresponsive {
+    @include ids-header-1177__container(false);
+  }
+  &.ids-header-1177--fluid {
+    .ids-header-1177__container {
+      .ids-header-1177__inner {
+        max-width: 100% !important;
+      }
+    }
+  }
+}

package/src/components/header-1177-admin/composite-header-1177-admin.scss

@@ -0,0 +1,6 @@
+@use './header-1177-admin.scss';
+@use './header-1177-admin-item.scss';
+@use './header-1177-admin-avatar.scss';
+@use './header-1177-admin-avatar-mobile.scss';
+@use './header-1177-admin-nav.scss';
+@use './header-1177-admin-nav-item.scss';

package/src/components/header-1177-admin/header-1177-admin-avatar-lit.ts

@@ -0,0 +1,4 @@
+import { css, unsafeCSS } from 'lit';
+import Header1177AdminAvatarSCSS from './header-1177-admin-avatar.scss';
+
+export default css`${unsafeCSS(Header1177AdminAvatarSCSS)}`;

package/src/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.ts

@@ -0,0 +1,4 @@
+import { css, unsafeCSS } from 'lit';
+import Header1177AdminAvatarMobileSCSS from './header-1177-admin-avatar-mobile.scss';
+
+export default css`${unsafeCSS(Header1177AdminAvatarMobileSCSS)}`;

package/src/components/header-1177-admin/header-1177-admin-avatar-mobile.scss

@@ -0,0 +1,91 @@
+@use "../../global/partials";
+
+%link {
+  font-family: var(--IDS-LINK__FONT-FAMILY);
+  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
+}
+%link-hover {
+  text-decoration: underline;
+  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
+  color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
+}
+
+.ids-header-1177-admin__avatar-mobile {
+  display: flex;
+  min-height: 3rem;
+  align-items: center;
+  gap: 0.5rem;
+  border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
+  box-sizing: border-box;
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  a.ids-header-1177-admin__avatar-mobile__login {
+    @extend %link;
+    display: flex;
+    gap: 0.5rem;
+    position: absolute;
+    inset: 0;
+    height: 100%;
+    align-items: center;
+    padding-left: 1.25rem;
+    text-decoration: none;
+    &:focus,
+    &:hover {
+      @extend %link-hover;
+    }
+    &:focus {
+      @include partials.ids-outline(-0.25rem);
+    }
+  }
+  .ids-header-1177-admin__avatar-mobile__user {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    .ids-header-1177-admin__avatar-mobile__user__username {
+      color: var(--IDS-COLOR-NEUTRAL-20);
+      font-family: var(--IDS-FONT-FAMILY-BASE);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.5rem;
+    }
+    .ids-header-1177-admin__avatar-mobile__user__unit {
+      color: var(--IDS-COLOR-NEUTRAL-20);
+      font-size: 0.875rem;
+      font-family: var(--IDS-FONT-FAMILY-BASE);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+    }
+  }
+}
+
+:host {
+  .ids-header-1177-admin__avatar-mobile {
+    &:hover,
+    &:focus-within {
+      .ids-header-1177-admin__avatar-mobile__text {
+        @extend %link-hover;
+      }
+    }
+    &:not(:has(.ids-header-1177-admin__avatar-mobile__user)) {
+      &:focus-within {
+        @include partials.ids-outline(-0.25rem);
+      }
+    }
+    .ids-header-1177-admin__avatar-mobile__text {
+      @extend %link;
+    }
+    ::slotted([slot="login"]) {
+      opacity: 0 !important;
+      position: absolute;
+      inset: 0;
+    }
+    ::slotted([slot="logout"]) {
+      @extend %link;
+    }
+    ::slotted([slot="logout"]:hover) {
+      @extend %link-hover;
+    }
+  }
+}