@inera/ids-design 5.3.0 → 5.4.0

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

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

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

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

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

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

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

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

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

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

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