@inera/ids-design 5.4.0 → 5.5.0

package/src/components/grid/column/column.scss

@@ -1,380 +0,0 @@
-@use "./_column-partials" as columnPartials;
-@use "../../../layout/breakpoints.scss";
-
-:host,
-.ids-col {
-  @include columnPartials.ids-col;
-}
-
-/* Cols */
-:host([cols="auto"]),
-.ids-col-auto {
-  @include columnPartials.ids-col-auto();
-}
-:host([cols="1"]),
-.ids-col-1 {
-  @include columnPartials.ids-col-1;
-}
-:host([cols="2"]),
-.ids-col-2 {
-  @include columnPartials.ids-col-2;
-}
-:host([cols="3"]),
-.ids-col-3 {
-  @include columnPartials.ids-col-3;
-}
-:host([cols="4"]),
-.ids-col-4 {
-  @include columnPartials.ids-col-4;
-}
-:host([cols="5"]),
-.ids-col-5 {
-  @include columnPartials.ids-col-5;
-}
-:host([cols="6"]),
-.ids-col-6 {
-  @include columnPartials.ids-col-6;
-}
-:host([cols="7"]),
-.ids-col-7 {
-  @include columnPartials.ids-col-7;
-}
-:host([cols="8"]),
-.ids-col-8 {
-  @include columnPartials.ids-col-8;
-}
-:host([cols="9"]),
-.ids-col-9 {
-  @include columnPartials.ids-col-9;
-}
-:host([cols="10"]),
-.ids-col-10 {
-  @include columnPartials.ids-col-10;
-}
-:host([cols="11"]),
-.ids-col-11 {
-  @include columnPartials.ids-col-11;
-}
-:host([cols="12"]),
-.ids-col-12 {
-  @include columnPartials.ids-col-12;
-}
-/* offset */
-:host([offset="none"]),
-.ids-col-offset-none {
-  margin-left: 0%;
-}
-:host([offset="1"]),
-.ids-col .offset-1 {
-  margin-left: 8.3%;
-}
-:host([offset="2"]),
-.ids-col .offset-2 {
-  margin-left: 16%;
-}
-:host([offset="3"]),
-.ids-col .offset-3 {
-  margin-left: 25%;
-}
-:host([offset="4"]),
-.ids-col .offset-4 {
-  margin-left: 33.3%;
-}
-:host([offset="5"]),
-.ids-col .offset-5 {
-  margin-left: 41.6%;
-}
-:host([offset="6"]),
-.ids-col .offset-6 {
-  margin-left: 50%;
-}
-:host([offset="7"]),
-.ids-col .offset-7 {
-  margin-left: 58.3%;
-}
-:host([offset="8"]),
-.ids-col .offset-8 {
-  margin-left: 66.6%;
-}
-:host([offset="9"]),
-.ids-col .offset-9 {
-  margin-left: 75%;
-}
-:host([offset="10"]),
-.ids-col .offset-10 {
-  margin-left: 83.3%;
-}
-:host([offset="11"]),
-.ids-col .offset-11 {
-  margin-left: 91.6%;
-}
-:host([offset="12"]),
-.ids-col .offset-12 {
-  margin-left: 100%;
-}
-/* Align self */
-:host([alignself="start"]),
-.ids-col .align-start {
-  align-self: start;
-}
-:host([alignself="center"]),
-.ids-col .align-center {
-  align-self: center;
-}
-:host([alignself="end"]),
-.ids-col .align-end {
-  align-self: end;
-}
-:host([alignself="auto"]),
-.ids-col .align-auto {
-  align-self: auto;
-}
-:host([alignself="baseline"]),
-.ids-col .align-baseline {
-  align-self: baseline;
-}
-:host([alignself="stretch"]),
-.ids-col .align-stretch {
-  align-self: stretch;
-}
-
-@media only screen and (max-width: breakpoints.$medium) {
-  :host([m="auto"]),
-  .ids-col .m-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  :host([m="1"]),
-  .ids-col .m-1 {
-    flex: 0 0 8.3%;
-    max-width: 8.3%;
-  }
-  :host([m="2"]),
-  .ids-col .m-2 {
-    flex: 0 0 16%;
-    max-width: 16%;
-  }
-  :host([m="3"]),
-  .ids-col .m-3 {
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-  :host([m="4"]),
-  .ids-col .m-4 {
-    flex: 0 0 33.3%;
-    max-width: 33.3%;
-  }
-  :host([m="5"]),
-  .ids-col .m-5 {
-    flex: 0 0 41.6%;
-    max-width: 41.6%;
-  }
-  :host([m="6"]),
-  .ids-col .m-6 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-  :host([m="7"]),
-  .ids-col .m-7 {
-    flex: 0 0 58%;
-    max-width: 58.3%;
-  }
-  :host([m="8"]),
-  .ids-col .m-8 {
-    flex: 0 0 66.6%;
-    max-width: 66.6%;
-  }
-  :host([m="9"]),
-  .ids-col .m-9 {
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-  :host([m="10"]),
-  .ids-col .m-10 {
-    flex: 0 0 83.3%;
-    max-width: 83.3%;
-  }
-  :host([m="11"]),
-  .ids-col .m-11 {
-    flex: 0 0 91.6%;
-    max-width: 91.6%;
-  }
-  :host([m="12"]),
-  .ids-col .m-12 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-  /* offset medium */
-  :host([moffset="none"]),
-  .ids-col .m-offset-none {
-    margin-left: 0%;
-  }
-  :host([moffset="1"]),
-  .ids-col .m-offset-1 {
-    margin-left: 8.3%;
-  }
-  :host([moffset="2"]),
-  .ids-col .m-offset-2 {
-    margin-left: 16%;
-  }
-  :host([moffset="3"]),
-  .ids-col .m-offset-3 {
-    margin-left: 25%;
-  }
-  :host([moffset="4"]),
-  .ids-col .m-offset-4 {
-    margin-left: 33.3%;
-  }
-  :host([moffset="5"]),
-  .ids-col .m-offset-5 {
-    margin-left: 41.6%;
-  }
-  :host([moffset="6"]),
-  .ids-col .m-offset-6 {
-    margin-left: 50%;
-  }
-  :host([moffset="7"]),
-  .ids-col .m-offset-7 {
-    margin-left: 58.3%;
-  }
-  :host([moffset="8"]),
-  .ids-col .m-offset-8 {
-    margin-left: 66.6%;
-  }
-  :host([moffset="9"]),
-  .ids-col .m-offset-9 {
-    margin-left: 75%;
-  }
-  :host([moffset="10"]),
-  .ids-col .m-offset-10 {
-    margin-left: 83.3%;
-  }
-  :host([moffset="11"]),
-  .ids-col .m-offset-11 {
-    margin-left: 91.6%;
-  }
-  :host([moffset="12"]),
-  .ids-col .m-offset-12 {
-    margin-left: 100%;
-  }
-}
-@media only screen and (max-width:  breakpoints.$small) {
-  :host([s="auto"]),
-  .ids-col .s-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  :host([s="1"]),
-  .ids-col .s-1 {
-    flex: 0 0 8.3%;
-    max-width: 8.3%;
-  }
-  :host([s="2"]),
-  .ids-col .s-2 {
-    flex: 0 0 16%;
-    max-width: 16%;
-  }
-  :host([s="3"]),
-  .ids-col .s-3 {
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-  :host([s="4"]),
-  .ids-col .s-4 {
-    flex: 0 0 33.3%;
-    max-width: 33.3%;
-  }
-  :host([s="5"]),
-  .ids-col .s-5 {
-    flex: 0 0 41.6%;
-    max-width: 41.6%;
-  }
-  :host([s="6"]),
-  .ids-col .s-6 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-  :host([s="7"]),
-  .ids-col .s-7 {
-    flex: 0 0 58%;
-    max-width: 58.3%;
-  }
-  :host([s="8"]),
-  .ids-col .s-8 {
-    flex: 0 0 66.6%;
-    max-width: 66.6%;
-  }
-  :host([s="9"]),
-  .ids-col .s-9 {
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-  :host([s="10"]),
-  .ids-col .s-10 {
-    flex: 0 0 83.3%;
-    max-width: 83.3%;
-  }
-  :host([s="11"]),
-  .ids-col .s-11 {
-    flex: 0 0 91.6%;
-    max-width: 91.6%;
-  }
-  :host([s="12"]),
-  .ids-col .s-12 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-  /* offset small */
-  :host([soffset="none"]),
-  .ids-col .s-offset-none {
-    margin-left: 0%;
-  }
-  :host([soffset="1"]),
-  .ids-col .s-offset-1 {
-    margin-left: 8.3%;
-  }
-  :host([soffset="2"]),
-  .ids-col .s-offset-2 {
-    margin-left: 16%;
-  }
-  :host([soffset="3"]),
-  .ids-col .s-offset-3 {
-    margin-left: 25%;
-  }
-  :host([soffset="4"]),
-  .ids-col .s-offset-4 {
-    margin-left: 33.3%;
-  }
-  :host([soffset="5"]),
-  .ids-col .s-offset-5 {
-    margin-left: 41.6%;
-  }
-  :host([soffset="6"]),
-  .ids-col .s-offset-6 {
-    margin-left: 50%;
-  }
-  :host([soffset="7"]),
-  .ids-col .s-offset-7 {
-    margin-left: 58.3%;
-  }
-  :host([soffset="8"]),
-  .ids-col .s-offset-8 {
-    margin-left: 66.6%;
-  }
-  :host([soffset="9"]),
-  .ids-col .s-offset-9 {
-    margin-left: 75%;
-  }
-  :host([soffset="10"]),
-  .ids-col .s-offset-10 {
-    margin-left: 83.3%;
-  }
-  :host([soffset="11"]),
-  .ids-col .s-offset-11 {
-    margin-left: 91.6%;
-  }
-  :host([soffset="12"]),
-  .ids-col .s-offset-12 {
-    margin-left: 100%;
-  }
-}

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

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

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

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

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

@@ -1,113 +0,0 @@
-@use "../../layout/breakpoints.scss";
-
-@mixin ids-header-1177__avatar($responsive: true) {
-  grid-column: 3;
-  justify-self: end;
-  display: grid;
-  align-items: center;
-
-  .ids-header-1177__avatar-box {
-    display: grid;
-    grid-template-columns: auto auto;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    max-height: 5rem;
-    height: 5rem;
-    padding-right: 2rem;
-    padding-left: 2rem;
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    border-radius: 3.125rem;
-    @if $responsive {
-      @media (max-width: breakpoints.$medium) {
-        gap: 0.5rem;
-        height: 2rem;
-        font-size: 0.75rem;
-        padding-right: 1rem;
-        padding-left: 1rem;
-        margin-left: 0.75rem;
-        margin-right: 0.75rem;
-      }
-    }
-
-    .ids-header-1177__avatar-icon {
-      display: flex;
-      max-width: 2.25rem;
-      max-height: 2.75rem;
-      @if $responsive {
-        @media (max-width: breakpoints.$medium) {
-          width: 1.25rem;
-          height: 1.25rem;
-        }
-      }
-    }
-
-    .ids-header-1177__avatar-content {
-      display: grid;
-      grid-template-rows: 1fr 1fr;
-      @if $responsive {
-        @media (max-width: breakpoints.$medium) {
-          grid-template-rows: 1fr;
-        }
-      }
-
-      .ids-header-1177__avatar-content__name {
-        text-align: start;
-        max-width: 15.625rem;
-        font-size: 1rem;
-        white-space: nowrap;
-        overflow: hidden;
-        position: relative;
-        text-overflow: ellipsis;
-        color: var(--IDS-COLOR-NEUTRAL-20);
-        @if $responsive {
-          @media (max-width: breakpoints.$medium) {
-            max-width: 100%;
-          }
-        }
-      }
-
-      .ids-header-1177__avatar-content__links {
-        display: flex;
-        flex-wrap: wrap;
-        font-size: 1rem;
-        @if $responsive {
-          @media (max-width: breakpoints.$medium) {
-            display: none;
-          }
-        }
-
-        a {
-          color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-          text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-        }
-
-        .ids-header-1177__avatar-content__links-divider {
-          padding-right: 0.5rem;
-          border-right: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
-          margin-right: 0.5rem;
-        }
-      }
-    }
-  }
-}
-
-.ids-header-1177--unresponsive .ids-header-1177__avatar {
-  @include ids-header-1177__avatar(false);
-}
-
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar {
-  @include ids-header-1177__avatar();
-}
-
-:host {
-  .ids-header-1177__avatar {
-    &:not(.ids-header-1177__avatar--unresponsive) {
-      @include ids-header-1177__avatar();
-    }
-
-    &.ids-header-1177__avatar--unresponsive {
-      @include ids-header-1177__avatar(false);
-    }
-  }
-}

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

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

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

@@ -1,72 +0,0 @@
-@use "../../layout/breakpoints.scss";
-@use "../../global/partials";
-
-@mixin ids-header-1177__items-item($responsive: true) {
-  display: flex;
-  flex-direction: column;
-  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__items__item--mobile) {
-    @if $responsive {
-      @media (max-width: breakpoints.$medium) {
-        @include partials.ids-outline(-0.25rem);
-        display: none;
-      }
-    }
-  }
-
-  .ids-header-1177__items__item-icon {
-    max-width: 1.5rem;
-    max-height: 1.5rem;
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
-    display: flex;
-    @if $responsive {
-      @media (min-width: breakpoints.$medium) {
-        max-width: 2rem;
-        max-height: 2rem;
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
-
-  .ids-header-1177__items__item-text {
-    color: var(--IDS-COLOR-PRIMARY-35);
-    font-size: 1.125rem;
-    text-align: center;
-    @if $responsive {
-      @media (max-width: breakpoints.$medium) {
-        display: none;
-      }
-    }
-  }
-}
-
-.ids-header-1177--unresponsive .ids-header-1177__items__item {
-  @include ids-header-1177__items-item(false);
-}
-
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item {
-  @include ids-header-1177__items-item();
-}
-
-:host {
-  .ids-header-1177__items__item {
-    &:not(.ids-header-1177__items__item--unresponsive) {
-      @include ids-header-1177__items-item();
-    }
-    &.ids-header-1177__items__item--unresponsive {
-      @include ids-header-1177__items-item(false);
-    }
-  }
-}

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

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

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

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

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

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

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

@@ -1,84 +0,0 @@
-@use "../../global/partials";
-@use "../../layout/breakpoints.scss";
-
-.ids-header-1177__nav-mobile__menu {
-  @include partials.ids-button-no-styles();
-  color: var(--IDS-COLOR-PRIMARY-35);
-  font-size: 0.875rem;
-  border-right: none !important;
-  @include partials.ids-hamburger(var(--IDS-COLOR-PRIMARY-35));
-}
-
-.ids-header-1177__nav-mobile__menu-items {
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-  display: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  top: 100%;
-  @media (max-width: breakpoints.$medium) {
-    display: block;
-  }
-}
-
-@mixin ids-header-1177__nav-mobile__item($responsive: true) {
-  display: none;
-  gap: 0.5rem;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  font-size: 0.875rem;
-  height: 3rem;
-  position: relative;
-  color: var(--IDS-COLOR-PRIMARY-35);
-  border-right: 0.063rem solid rgba(160, 11, 54, 0.2);
-  a,
-  button {
-    display: flex;
-    width: 100%;
-    gap: 0.5rem;
-    text-decoration: none;
-    @include partials.ids-button-no-styles();
-    color: var(--IDS-COLOR-PRIMARY-35);
-    outline: none !important;
-    align-items: center;
-    justify-content: center;
-  }
-  &:has(.ids-header-1177__nav-mobile__menu) {
-    border-right: none;
-  }
-  &:focus-within {
-    @include partials.ids-outline(-0.125rem);
-  }
-  @if $responsive {
-    @media (max-width: breakpoints.$medium) {
-      display: flex;
-    }
-  }
-
-  ::slotted(a) {
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-  }
-}
-
-.ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item {
-  @include ids-header-1177__nav-mobile__item(false);
-}
-
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item {
-  @include ids-header-1177__nav-mobile__item();
-}
-
-:host {
-  .ids-header-1177__nav-mobile__item {
-    &:not(.ids-header-1177__nav-mobile__item--unresponsive) {
-      @include ids-header-1177__nav-mobile__item();
-    }
-    &.ids-header-1177__nav-mobile__item--unresponsive {
-      @include ids-header-1177__nav-mobile__item(false);
-    }
-  }
-}