@inera/ids-design 5.4.0 → 5.4.1

package/src/layout/breakpoints.scss

@@ -1,13 +0,0 @@
-$small: 640px;
-$medium: 1024px;
-
-.ids-desktop {
-  @media (max-width: ($medium - 1px)) {
-    display: none !important;
-  }
-}
-.ids-mobile {
-  @media (min-width: $medium) {
-    display: none !important;
-  }
-}

package/src/layout/container.scss

@@ -1,15 +0,0 @@
-.ids-container {
-  max-width: var(--IDS__MAX-WIDTH);
-  display: grid;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-.ids-container.ids-container--gutterless {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-.ids-container.ids-container--fluid {
-  max-width: 100%;
-}

package/src/layout/grid.scss

@@ -1,393 +0,0 @@
-:host,
-.ids .col {
-  display: block;
-  flex-basis: 0;
-  flex-grow: 1;
-  max-width: 100%;
-}
-
-/* Cols */
-:host([cols="auto"]),
-.ids .col-auto {
-  flex: 0 0 auto;
-  width: auto;
-}
-:host([cols="1"]),
-.ids .col-1 {
-  flex: 0 0 8.3%;
-  max-width: 8.3%;
-}
-:host([cols="2"]),
-.ids .col-2 {
-  flex: 0 0 16%;
-  max-width: 16%;
-}
-:host([cols="3"]),
-.ids .col-3 {
-  flex: 0 0 25%;
-  max-width: 25%;
-}
-:host([cols="4"]),
-.ids .col-4 {
-  flex: 0 0 33.3%;
-  max-width: 33.3%;
-}
-:host([cols="5"]),
-.ids .col-5 {
-  flex: 0 0 41.6%;
-  max-width: 41.6%;
-}
-:host([cols="6"]),
-.ids .col-6 {
-  flex: 0 0 50%;
-  max-width: 50%;
-}
-:host([cols="7"]),
-.ids .col-7 {
-  flex: 0 0 58%;
-  max-width: 58.3%;
-}
-:host([cols="8"]),
-.ids .col-8 {
-  flex: 0 0 66.6%;
-  max-width: 66.6%;
-}
-:host([cols="9"]),
-.ids .col-9 {
-  flex: 0 0 75%;
-  max-width: 75%;
-}
-:host([cols="10"]),
-.ids .col-10 {
-  flex: 0 0 83.3%;
-  max-width: 83.3%;
-}
-:host([cols="11"]),
-.ids .col-11 {
-  flex: 0 0 91.6%;
-  max-width: 91.6%;
-}
-:host([cols="12"]),
-.ids .col-12 {
-  flex: 0 0 100%;
-  max-width: 100%;
-}
-/* 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: 1024px) {
-  :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: 640px) {
-  :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/layout/row.scss

@@ -1,48 +0,0 @@
-:host,
-.ids .row {
-  display: flex;
-  flex-wrap: wrap;
-  flex: 1 1 auto;
-  box-sizing: border-box;
-}
-
-:host([align="start"]),
-.ids .row .align-start {
-  align-items: start;
-}
-:host([align="center"]),
-.ids .row .align-center {
-  align-items: center;
-}
-:host([align="end"]),
-.ids .row .align-end {
-  align-items: end;
-}
-:host([align="baseline"]),
-.ids .row .align-baseline {
-  align-items: baseline;
-}
-:host([align="stretch"]),
-.ids .row .align-stretch {
-  align-items: stretch
-}
-:host([justify="start"]),
-.ids .row .justify-start {
-  justify-content: flex-start;
-}
-:host([justify="center"]),
-.ids .row .justify-center {
-  justify-content: center;
-}
-:host([justify="end"]),
-.ids .row .justify-end {
-  justify-content: end;
-}
-:host([justify="space-between"]),
-.ids .row .justify-space-between {
-  justify-content: space-between;
-}
-:host([justify="space-around"]),
-.ids .row .justify-space-around {
-  justify-content: space-around;
-}

package/src/themes/1177/1177-tokens.css

@@ -1,32 +0,0 @@
-:root, :host {
-  --IDS-COLOR-PRIMARY-30: #6a0032;
-  --IDS-COLOR-PRIMARY-35: #a00b36;
-  --IDS-COLOR-PRIMARY-40: #c12143;
-  --IDS-COLOR-PRIMARY-90: #faeef0;
-
-  --IDS-COLOR-ACCENT-30: #3b4266;
-  --IDS-COLOR-ACCENT-40: #396291;
-  --IDS-COLOR-ACCENT-90: #C6D2DF;
-  --IDS-COLOR-ACCENT-95: #f1f1f5;
-
-  --IDS-COLOR-SECONDARY-95: #FAF8F6;
-
-  --IDS-COLOR-SUCCESS-30: #395428;
-  --IDS-COLOR-SUCCESS-40: #419002;
-  --IDS-COLOR-SUCCESS-99: #eef8ee;
-
-  --IDS-COLOR-ATTENTION-40: #ffc100;
-  --IDS-COLOR-ATTENTION-95: #fff8e0;
-
-  --IDS-COLOR-NEUTRAL-20: #353535;
-  --IDS-COLOR-NEUTRAL-40: #636466;
-  --IDS-COLOR-NEUTRAL-50: #808285;
-  --IDS-COLOR-NEUTRAL-90: #dadbdc;
-  --IDS-COLOR-NEUTRAL-99: #f1f2f2;
-  --IDS-COLOR-NEUTRAL-100: #fff;
-
-  --IDS-COLOR-ERROR-40: #c12143;
-  --IDS-COLOR-ERROR-99: #faeef0;
-
-  --IDS-COLOR-BACKGROUND-40: #fff;
-}

package/src/themes/1177/1177-typography.scss

@@ -1,94 +0,0 @@
-@use "../reset.scss";
-@use "../../global/global.scss";
-@use "./1177-tokens" as elvaSjuttisjuTokens;
-
-:root {
-  /* Font families */
-  --IDS-FONT-FAMILY-BASE: "Open Sans";
-  --IDS-FONT-FAMILY-HEADING: "Inter";
-
-  --IDS-HEADING-XXL__COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-XXL__FONT-SIZE: 2rem;
-  --IDS-HEADING-XXL__LINE-HEIGHT: 2.5rem;
-  --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 3rem;
-  --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.25rem;
-  --IDS-HEADING-XXL__FONT-WEIGHT: 700;
-  --IDS-HEADING-XXL__LETTER-SPACING: -0.052rem;
-  --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: -0.078rem;
-  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
-
-  --IDS-HEADING-XL__COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-HEADING-XL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
-  --IDS-HEADING-XL__LINE-HEIGHT: 2.125rem;
-  --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2.25rem;
-  --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.625rem;
-  --IDS-HEADING-XL__FONT-WEIGHT: 700;
-  --IDS-HEADING-XL__LETTER-SPACING: -0.031rem;
-  --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: -0.063rem;
-  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
-
-  --IDS-HEADING-L__COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-HEADING-L__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
-  --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
-  --IDS-HEADING-L__FONT-SIZE: 1.5rem;
-  --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
-  --IDS-HEADING-L__FONT-WEIGHT: 700;
-  --IDS-HEADING-L__LETTER-SPACING: -0.025rem;
-  --IDS-HEADING-L__LETTER-SPACING-DESKTOP: -0.044rem;
-  --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
-
-  --IDS-HEADING-M__COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-HEADING-M__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-M__FONT-SIZE: 1.375rem;
-  --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
-  --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
-  --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 1.875rem;
-  --IDS-HEADING-M__FONT-WEIGHT: 700;
-  --IDS-HEADING-M__LETTER-SPACING: -0.019rem;
-  --IDS-HEADING-M__LETTER-SPACING-DESKTOP: -0.031rem;
-
-  --IDS-HEADING-S__COLOR: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-HEADING-S__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-S__FONT-SIZE: 1.25rem;
-  --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
-  --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
-  --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.5rem;
-  --IDS-HEADING-S__FONT-WEIGHT: 700;
-  --IDS-HEADING-S__LETTER-SPACING: -0.013rem;
-  --IDS-HEADING-S__LETTER-SPACING-DESKTOP: -0.025rem;
-
-  --IDS-HEADING-XS__COLOR: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-HEADING-XS__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-XS__FONT-SIZE: 1rem;
-  --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
-  --IDS-HEADING-XS__FONT-WEIGHT: 700;
-  --IDS-HEADING-XS__LETTER-SPACING: 0;
-
-  --IDS-ANCHOR__COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-ANCHOR__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
-
-  --IDS-PREAMBLE__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
-  --IDS-PREAMBLE__FONT-SIZE: 1.125rem;
-  --IDS-PREAMBLE__LINE-HEIGHT: 1.75rem;
-  --IDS-PREAMBLE__FONT-SIZE-DESKTOP: 1.375rem;
-  --IDS-PREAMBLE__LINE-HEIGHT-DESKTOP: 2.25rem;
-
-  --IDS-BODY__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
-  --IDS-BODY__FONT-SIZE: 1rem;
-  --IDS-BODY__LINE-HEIGHT: 1.5rem;
-  --IDS-BODY--DISABLED__COLOR: var(--IDS-COLOR-PRIMARY-35);
-
-  --IDS-PAGE-LIST__COLOR: var(--IDS-COLOR-PRIMARY-35);
-  --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
-  --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
-  --IDS-PAGE-LIST__FONT-WEIGHT: 700;
-  --IDS-PAGE-LIST__LETTER-SPACING: -0.025rem;
-
-  --IDS-BULLET-LIST__MARKER-COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: bold;
-  --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
-}