@inera/ids-design 5.4.0 → 5.5.0

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

@@ -1,107 +0,0 @@
-@use "../../global/partials";
-@use "../../layout/breakpoints.scss";
-
-%ids-header-1177-admin__avatar-text {
-  font-size: 1rem;
-  text-align: start;
-  max-width: 15.625rem;
-  white-space: nowrap;
-  overflow: hidden;
-  position: relative;
-  text-overflow: ellipsis;
-  color: var(--IDS-COLOR-NEUTRAL-20);
-}
-
-@mixin ids-header-1177-admin__avatar($responsive: true) {
-  grid-column: 4;
-  justify-self: end;
-  display: grid;
-  align-items: center;
-  padding-left: 1.25rem;
-  position: relative;
-  margin-right: 1.25rem;
-
-  button {
-    @include partials.ids-focusable();
-  }
-  @if $responsive {
-    @media (max-width: breakpoints.$medium) {
-      display: none;
-    }
-  }
-  .ids-header-1177-admin__avatar-box {
-    @include partials.ids-button-no-styles();
-    display: grid;
-    grid-template-columns: auto auto;
-    align-items: center;
-    justify-content: center;
-    gap: 0.75rem;
-    .ids-header-1177-admin__avatar-icon {
-      display: flex;
-      max-width: 2rem;
-      max-height: 2rem;
-    }
-    .ids-header-1177-admin__avatar-chevron {
-      width: 0.438rem;
-      grid-column: 3;
-      &.ids-header-1177-admin__avatar-chevron--expanded {
-        .ids-icon {
-          transform: rotate(180deg);
-        }
-      }
-    }
-    .ids-header-1177-admin__avatar-content {
-      display: grid;
-      grid-template-rows: 1fr;
-      &:has(.ids-header-1177-admin__avatar-content__unit) {
-        grid-template-rows: 1fr 1fr;
-      }
-      .ids-header-1177-admin__avatar-content__name {
-        @extend %ids-header-1177-admin__avatar-text;
-      }
-      .ids-header-1177-admin__avatar-content__unit {
-        @extend %ids-header-1177-admin__avatar-text;
-        font-size: 0.875rem;
-      }
-    }
-  }
-  &.ids-header-1177-admin__avatar--expanded {
-    .ids-header-1177-admin__avatar-dropdown {
-      display: flex;
-    }
-  }
-  .ids-header-1177-admin__avatar-dropdown {
-    position: absolute;
-    min-width: 17.5rem;
-    padding: 2rem 2.5rem;
-    gap: 1.25rem;
-    right: 0;
-    top: calc(100% + 0.5rem);
-    display: none;
-    flex-direction: column;
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
-    z-index: 1;
-  }
-}
-
-.ids-header-1177-admin--unresponsive {
-  .ids-header-1177-admin__avatar {
-    @include ids-header-1177-admin__avatar(false);
-  }
-}
-
-.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__avatar {
-  @include ids-header-1177-admin__avatar();
-}
-
-:host {
-  .ids-header-1177-admin__avatar {
-    &:not(.ids-header-1177-admin__avatar--unresponsive) {
-      @include ids-header-1177-admin__avatar();
-    }
-    &.ids-header-1177-admin__avatar--unresponsive {
-      @include ids-header-1177-admin__avatar(false);
-    }
-  }
-}

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

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

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

@@ -1,74 +0,0 @@
-@use "../../global/partials";
-@use "../../layout/breakpoints.scss";
-
-@mixin ids-header-1177-admin__items-item($responsive: true) {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  text-decoration: none;
-  position: relative;
-  background-color: transparent;
-  border: 0;
-
-  &:focus-within {
-    @include partials.ids-outline();
-  }
-
-  &:not(.ids-header-1177-admin__items__item--mobile) {
-    @if $responsive {
-      @media (max-width: breakpoints.$medium) {
-        display: none;
-      }
-    }
-  }
-
-  .ids-header-1177-admin__items__item-icon {
-    max-width: 2rem;
-    max-height: 2rem;
-    width: 2rem;
-    height: 2rem;
-    margin-left: 0;
-    margin-right: 0;
-    display: flex;
-    @if $responsive {
-      @media (max-width: breakpoints.$medium) {
-        max-width: 1.5rem;
-        max-height: 1.5rem;
-        width: 1.5rem;
-        height: 1.5rem;
-        margin-left: 0.25rem;
-        margin-right: 0.25rem;
-      }
-    }
-  }
-
-  .ids-header-1177-admin__items__item-text {
-    font-size: 1rem;
-    color: var(--IDS-COLOR-ACCENT-40);
-    @if $responsive {
-      @media (max-width: breakpoints.$medium) {
-        display: none;
-      }
-    }
-  }
-}
-
-.ids-header-1177-admin--unresponsive .ids-header-1177-admin__items__item {
-  @include ids-header-1177-admin__items-item(false);
-}
-
-.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive)
-  .ids-header-1177-admin__items__item {
-  @include ids-header-1177-admin__items-item();
-}
-
-:host {
-  .ids-header-1177-admin__items__item {
-    &:not(.ids-header-1177-admin__items__item--unresponsive) {
-      @include ids-header-1177-admin__items-item();
-    }
-    &.ids-header-1177-admin__items__item--unresponsive {
-      @include ids-header-1177-admin__items-item(false);
-    }
-  }
-}

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

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

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

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

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

@@ -1,168 +0,0 @@
-@use "../../global/partials";
-@use "../../layout/breakpoints.scss";
-
-@mixin ids-header-nav-item--after() {
-  background: var(--IDS-COLOR-ACCENT-40);
-  bottom: 0;
-  content: "";
-  display: block;
-  height: 0.313rem;
-  left: 0;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  right: 100%;
-  position: absolute;
-  transition: all 0.3s ease 0s;
-  width: 0;
-}
-@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.5rem 0.625rem;
-    position: relative;
-    text-decoration: none;
-    cursor: pointer;
-    min-height: 2.5rem;
-    height: 100%;
-    letter-spacing: -0.031rem;
-    line-height: 1rem;
-    background-color: transparent !important;
-    font-size: 1.125rem !important;
-    font-weight: 400 !important;
-    font-family: var(--IDS-FONT-FAMILY-HEADING);
-    color: var(--IDS-COLOR-ACCENT-40);
-    border-radius: 0;
-    border: none;
-  }
-  & > a,
-  & > button {
-    &:focus {
-      @include partials.ids-outline(-0.125rem);
-    }
-    &:focus,
-    &: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-admin__nav-item--active button,
-  &.ids-header-1177-admin__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-admin__items__item-dropdown {
-    position: relative;
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    left: 0;
-    min-height: 10.813rem;
-    padding: 2.5rem 0 3.125rem;
-    box-sizing: border-box;
-    position: absolute;
-    width: 100%;
-    top: 100%;
-    box-shadow: 0 0.375rem 0.625rem 0 rgba(0, 0, 0, 0.2);
-
-    .ids-header-1177-admin__items-box-shadow {
-      height: 1.25rem;
-      width: 100%;
-      box-shadow: inset 0 0.188rem 0.313rem -0.063rem rgba(0, 0, 0, 0.2);
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-    }
-
-    .ids-header-1177-admin__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-admin__items__item-dropdown__content-item {
-        a {
-          margin-bottom: 0.625rem !important;
-          display: block !important;
-        }
-      }
-      .ids-header-1177-admin__items__item-dropdown__content-item,
-      ::slotted(*) {
-        display: block;
-        margin-bottom: 0.625rem;
-        padding-bottom: 0.625rem;
-        margin-right: 2.5rem;
-        font-size: 1rem;
-        line-height: 1.5rem;
-        border-bottom: 0.063rem solid var(--IDS-COLOR-ACCENT-90);
-      }
-    }
-  }
-}
-
-@mixin ids-header-1177-admin__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-admin--unresponsive .ids-header-1177-admin__nav-item {
-  @include ids-header-1177-admin__nav-item(false);
-}
-.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__nav-item {
-  @include ids-header-1177-admin__nav-item();
-}
-
-.ids-header-1177-admin--fluid {
-  .ids-header-1177-admin__items__item-dropdown {
-    .ids-header-1177-admin__items__item-dropdown__content {
-      max-width: 100% !important;
-    }
-  }
-}
-
-:host {
-  .ids-header-1177-admin__nav-item {
-    &:not(.ids-header-1177-admin__nav-item--unresponsive) {
-      @include ids-header-1177-admin__nav-item();
-    }
-    &.ids-header-1177-admin__nav-item--unresponsive {
-      @include ids-header-1177-admin__nav-item(false);
-    }
-    &.ids-header-1177-admin__nav-item--fluid {
-      .ids-header-1177-admin__items__item-dropdown {
-        .ids-header-1177-admin__items__item-dropdown__content {
-          max-width: 100% !important;
-        }
-      }
-    }
-  }
-}

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

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

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

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

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

@@ -1,54 +0,0 @@
-@use "../../layout/breakpoints.scss";
-
-@mixin ids-header-1177-admin__nav($responsive: true) {
-  position: relative;
-  @if $responsive {
-    @media (max-width: breakpoints.$medium) {
-      display: none;
-    }
-  }
-  .ids-header-1177-admin__nav-inner {
-    list-style: none;
-    max-width: var(--IDS__MAX-WIDTH);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: auto;
-    margin-right: auto;
-    border-top: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
-  }
-}
-
-.ids-header-1177-admin--unresponsive nav.ids-header-1177-admin__nav {
-  @include ids-header-1177-admin__nav(false);
-}
-
-.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) nav.ids-header-1177-admin__nav {
-  @include ids-header-1177-admin__nav();
-}
-
-.ids-header-1177-admin--fluid {
-  .ids-header-1177-admin__container {
-    .ids-header-1177-admin__nav-inner {
-      max-width: 100% !important;
-    }
-  }
-}
-
-:host {
-  nav.ids-header-1177-admin__nav {
-    &:not(.ids-header-1177-admin__nav--unresponsive) {
-      @include ids-header-1177-admin__nav();
-    }
-    &.ids-header-1177-admin__nav--unresponsive {
-      @include ids-header-1177-admin__nav(false);
-    }
-    &.ids-header-1177-admin__nav--fluid {
-      .ids-header-1177-admin__nav-inner {
-        max-width: 100%;
-      }
-    }
-  }
-}

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

@@ -1,201 +0,0 @@
-@use "../../global/partials";
-@use "../../layout/breakpoints.scss";
-
-@mixin ids-header-1177-admin-inner($responsive: true) {
-  max-width: var(--IDS__MAX-WIDTH);
-  width: 100%;
-  height: 3.75rem;
-  position: relative;
-  align-items: center;
-  display: grid;
-  margin: 0 auto;
-  grid-template-columns: auto 1fr;
-  box-sizing: border-box;
-  @if $responsive {
-    @media (max-width: breakpoints.$medium) {
-      padding: 0 1.25rem;
-      grid-template-columns: auto 1fr;
-      height: 3rem;
-      border-bottom: none;
-      &:has(.ids-header-1177-admin__items) {
-        grid-template-columns: auto 1fr;
-      }
-    }
-  }
-}
-@mixin ids-header-1177-admin-logo-1177-admin($responsive: true) {
-  .ids-header-1177-admin__logo-col {
-    display: flex;
-    align-items: center;
-    .ids-header-1177-admin__logo {
-      height: 1.5rem;
-      width: 3.938rem;
-      margin-right: 1.25rem;
-      margin-left: 1.25rem;
-      a {
-        display: block;
-        @include partials.ids-focusable();
-      }
-      ::slotted([slot="logo"]:focus) {
-        display: block;
-        outline: var(--IDS-FOCUS__OUTLINE) !important;
-        outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
-      }
-      @if $responsive {
-        @media (max-width: breakpoints.$medium) {
-          margin-left: 0;
-        }
-      }
-    }
-    .ids-header-1177-admin__brand {
-      display: flex;
-      flex-direction: column;
-      margin-left: 1.25rem !important;
-      position: relative;
-      :before {
-        content: "";
-        position: absolute;
-        display: block;
-        width: 0.063rem;
-        top: 50%;
-        transform: translateY(-50%);
-        left: -1.25rem;
-        height: 2.75rem;
-        background: var(--IDS-COLOR-ACCENT-30);
-        @if $responsive {
-          @media (max-width: breakpoints.$medium) {
-            height: 2.188rem;
-          }
-        }
-      }
-      .ids-header-1177-admin__brand-text {
-        margin-top: 0;
-        margin-right: 0;
-        margin-bottom: 0;
-        color: var(--IDS-COLOR-ACCENT-30);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: 1.25rem;
-        font-family: var(--IDS-FONT-FAMILY-HEADING);
-        text-decoration: none;
-        font-weight: 700;
-        @if $responsive {
-          @media (max-width: breakpoints.$medium) {
-            font-size: 1rem;
-          }
-        }
-        &.ids-header-1177-admin__brand-text---supplement {
-          line-height: 1.25rem;
-          font-weight: normal;
-          font-size: 0.875rem;
-          font-family: var(--IDS-FONT-FAMILY-HEADING);
-          @if $responsive {
-            @media (max-width: breakpoints.$medium) {
-              font-size: 1rem;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin ids-header-1177-admin-items($responsive: true) {
-  .ids-header-1177-admin__items {
-    justify-self: end;
-    display: grid;
-    align-items: center;
-    grid-auto-flow: column;
-    padding-right: 1.25rem;
-    padding-left: 1rem;
-    gap: 2.5rem;
-    @if $responsive {
-      @media (max-width: breakpoints.$medium) {
-        gap: 0;
-        margin-right: 0;
-        padding-right: 0;
-      }
-    }
-  }
-}
-
-@mixin ids-header-1177-admin__container($responsive: true) {
-  .ids-header-1177-admin__container {
-    position: relative;
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    @if $responsive {
-      @media (max-width: breakpoints.$medium) {
-        box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
-        z-index: 10;
-        padding: 0;
-      }
-    }
-    .ids-header-1177-admin__inner {
-      @include ids-header-1177-admin-inner($responsive);
-      @include ids-header-1177-admin-logo-1177-admin($responsive);
-      @include ids-header-1177-admin-items($responsive);
-    }
-  }
-}
-
-.ids-header-1177-admin__mobile-menu {
-  display: none;
-  grid-column: 4;
-  margin-left: 1.25rem;
-  @media (max-width: breakpoints.$medium) {
-    display: flex;
-  }
-  .ids-header-1177-admin__mobile-menu__btn {
-    @include partials.ids-button-no-styles();
-    display: flex;
-    width: 100%;
-    gap: 0.313rem;
-    text-decoration: none;
-    background: none;
-    color: inherit;
-    border: none;
-    padding: 0;
-    font: inherit;
-    cursor: pointer;
-    color: var(--IDS-COLOR-ACCENT-40);
-    align-items: center;
-    justify-content: center;
-    height: 1.5rem;
-    width: 1.5rem;
-    @include partials.ids-focusable();
-    @include partials.ids-hamburger(var(--IDS-COLOR-ACCENT-40));
-  }
-}
-
-.ids-header-1177-admin__nav-mobile__menu-items {
-  display: none;
-  box-shadow: 0 0.125rem 0.313rem #c5c5c5;
-  @media (max-width: breakpoints.$medium) {
-    display: block;
-  }
-}
-
-.ids-header-1177-admin--unresponsive {
-  .ids-header-1177-admin__mobile-menu {
-    display: none !important;
-  }
-}
-
-header.ids-header-1177-admin {
-  background: var(--IDS-COLOR-NEUTRAL-100);
-  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
-
-  &:not(.ids-header-1177-admin--unresponsive) {
-    @include ids-header-1177-admin__container();
-  }
-  &.ids-header-1177-admin--unresponsive {
-    @include ids-header-1177-admin__container(false);
-  }
-  &.ids-header-1177-admin--fluid {
-    .ids-header-1177-admin__container {
-      .ids-header-1177-admin__inner {
-        max-width: 100% !important;
-      }
-    }
-  }
-}

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

@@ -1,8 +0,0 @@
-@use './header-1177-pro.scss';
-@use './header-1177-pro-item.scss';
-@use './header-1177-pro-avatar.scss';
-@use './header-1177-pro-avatar-mobile.scss';
-@use './header-1177-pro-nav.scss';
-@use './header-1177-pro-nav-item.scss';
-@use './header-1177-pro-nav-menu-mobile.scss';
-@use './header-1177-pro-region-picker.scss';

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

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

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

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