@inera/ids-design 5.4.0 → 5.5.0

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

@@ -1,158 +0,0 @@
-@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

@@ -1,4 +0,0 @@
-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

@@ -1,57 +0,0 @@
-@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

@@ -1,364 +0,0 @@
-@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

@@ -1,6 +0,0 @@
-@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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,91 +0,0 @@
-@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;
-    }
-  }
-}