@inera/ids-design 5.4.0 → 5.5.0

package/src/components/date-label/date-label.scss

@@ -1,61 +0,0 @@
-@use "../../layout/breakpoints";
-
-// TODO change name since we have an ids-time component (confusing)
-time.ids-time {
-  display: inline-flex;
-  flex-direction: column;
-  box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-  border-radius: 0.625rem;
-  padding: 0.938rem;
-  align-items: center;
-  align-self: flex-start;
-  justify-content: center;
-  gap: 0.25rem;
-
-  @media (max-width: breakpoints.$medium) {
-    padding: 0.625rem;
-    gap: 0.25rem;
-  }
-  .ids-time__day {
-    font-family: var(--IDS-DATE-LABEL__DAY-FONT-FAMILY);
-    color: var(--IDS-DATE-LABEL__DAY-COLOR);
-    font-style: normal;
-    font-weight: 700;
-    font-size: 2.1875rem;
-    line-height: 2.1875rem;
-    letter-spacing: -0.063rem;
-    @media (max-width: breakpoints.$medium) {
-      letter-spacing: -0.078rem;
-      font-size: 1.5625rem;
-      line-height: 1.5625rem;
-    }
-  }
-
-  .ids-time__month {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 1.25rem;
-    line-height: 1.25rem;
-    text-transform: uppercase;
-    font-family: var(--IDS-DATE-LABEL__MONTH-FONT-FAMILY);
-    color: var(--IDS-DATE-LABEL__MONTH-COLOR);
-    @media (max-width: breakpoints.$medium) {
-      font-size: 0.9375rem;
-      line-height: 0.9375rem;
-    }
-  }
-
-  .ids-time__year {
-    font-family: var(--IDS-DATE-LABEL__YEAR-FONT-FAMILY);
-    color: var(--IDS-DATE-LABEL__YEAR-COLOR);
-    font-style: normal;
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1rem;
-    @media (max-width: breakpoints.$medium) {
-      font-size: 0.75rem;
-      line-height: 0.75rem;
-    }
-  }
-}

package/src/components/dialog/dialog-lit.ts

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

package/src/components/dialog/dialog.scss

@@ -1,117 +0,0 @@
-@use "../../layout/breakpoints";
-@use "../../global/partials";
-
-/* Dialog */
-.ids-dialog {
-  display: flex;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: 200;
-  border: 0.0625rem solid var(--IDS-DIALOG__BORDER-COLOR);
-  -webkit-transform: translateX(-50%) translateY(-50%);
-  -moz-transform: translateX(-50%) translateY(-50%);
-  -ms-transform: translateX(-50%) translateY(-50%);
-  transform: translateX(-50%) translateY(-50%);
-  flex-direction: column;
-  align-items: flex-start;
-  background-color: #ffffff;
-  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.3);
-  border-radius: var(--IDS-DIALOG__BORDER-RADIUS);
-  padding: 2.5rem 1.875rem 2.5rem 1.875rem;
-  max-height: calc(100% - 5rem);
-  max-width: calc(100% - 3.75rem);
-  text-align: left;
-  color: var(--IDS-DIALOG__COLOR);
-  @media (max-width: breakpoints.$medium) {
-    padding: 2.5rem 0.625rem 2.5rem 0.625rem;
-  }
-  @media (max-width: breakpoints.$small) {
-    max-height: calc(100% - 5rem);
-    width: calc(100% - 3.75rem);
-  }
-  &:has(.ids-dialog__header) {
-    padding-top: 1.25rem;
-  }
-  &.ids-dialog--hidden {
-    display: none;
-  }
-  .ids-dialog__header {
-    width: 100%;
-    align-items: flex-end;
-    justify-content: flex-end;
-    display: flex;
-    padding-bottom: 0.25rem;
-    .ids-dialog__header__button {
-      @include partials.ids-button-base();
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      @include partials.ids-focusable();
-    }
-  }
-  .ids-dialog__body {
-    @include partials.ids-scrollbar();
-    @include partials.ids-focusable();
-    padding: 0 0.375rem 0.625rem 0.625rem;
-    margin-right: 0.188rem;
-    height: 100%;
-    overflow-y: auto;
-    &.ids-dialog__body--has-scrollbar {
-      padding-right: 1.25rem;
-    }
-
-    .ids-dialog__body__headline {
-      padding-top: 0.375rem;
-      margin: 0;
-      align-self: center;
-      @media (max-width: breakpoints.$medium) {
-        padding-top: 0;
-      }
-    }
-    .ids-dialog__body__header {
-      box-sizing: border-box;
-      padding: 1.25rem 0 0 0;
-      width: 100%;
-      display: flex;
-      -webkit-justify-content: flex-end;
-      justify-content: flex-end;
-      align-items: flex-end;
-      -webkit-align-items: flex-end;
-    }
-    .ids-dialog__body__content {
-      margin-top: 1.25rem;
-    }
-  }
-
-  .ids-dialog__footer {
-    margin-top: 1.875rem;
-  }
-
-  .ids-dialog__footer,
-  ::slotted([slot="actions"]) {
-    display: flex;
-    gap: 1.25rem;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    @media (max-width: breakpoints.$medium) {
-      flex-direction: column;
-      gap: 1.25rem;
-    }
-  }
-}
-
-/* Overlay */
-.ids-dialog-overlay {
-  position: fixed;
-  z-index: 200;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background-color: var(--IDS-OVERLAY__BACKGROUND-COLOR);
-  &.ids-dialog-overlay--hidden {
-    display: none;
-  }
-}

package/src/components/dropdown/dropdown-lit.ts

@@ -1,6 +0,0 @@
-import { css, unsafeCSS } from "lit";
-import DropdownSCSS from "./dropdown.scss";
-
-export default css`
-  ${unsafeCSS(DropdownSCSS)}
-`;

package/src/components/dropdown/dropdown.scss

@@ -1,79 +0,0 @@
-@use "../../layout/breakpoints.scss";
-
-@mixin ids-dropdown__content__link() {
-  display: flex !important;
-  border-radius: var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);
-  gap: 0.5rem !important;
-  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
-  align-items: center !important;
-  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
-  font-size: 1rem !important;
-  font-style: normal !important;
-  font-weight: 400 !important;
-  line-height: 1.5rem !important;
-  letter-spacing: var(--Font-letter-spacing-body-text, 0);
-  padding: 0.25rem 0.75rem !important;
-  outline-offset: -0.25rem !important;
-  outline-color: var(--IDS-COLOR-NEUTRAL-100) !important;
-  text-decoration: none !important;
-}
-
-.ids-dropdown {
-  position: relative;
-  display: block;
-}
-
-.ids-dropdown__content,
-:host(ids-dropdown-content) {
-  position: absolute;
-  border-radius: var(--IDS-BORDER-RADIUS);
-  border: 0.063rem solid var(--IDS-DROPDOWN__BORDER-COLOR);
-  background: var(--IDS-COLOR-NEUTRAL-100);
-  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.3);
-  padding: 0.5rem;
-  left: 0;
-  top: 0;
-  &.ids-dropdown__content--hide {
-    display: none;
-  }
-  &.ids-dropdown__content--mblock,
-  &:host([mblock]) {
-    @media (max-width: breakpoints.$medium) {
-      width: 100%;
-    }
-  }
-  &.ids-dropdown__content--sblock,
-  &:host([sblock]) {
-    @media (max-width: breakpoints.$small) {
-      width: 100%;
-    }
-  }
-  .ids-dropdown__content__link {
-    @include ids-dropdown__content__link();
-    .ids-dropdown__content__link-icon {
-      display: inherit;
-    }
-    .ids-dropdown__content__link-icon--hover {
-      display: none;
-    }
-    &:hover,
-    &:focus {
-      color: var(--IDS-COLOR-NEUTRAL-100) !important;
-      background-color: var(--IDS-COLOR-ACCENT-30) !important;
-      .ids-dropdown__content__link-icon {
-        display: none;
-      }
-      .ids-dropdown__content__link-icon--hover {
-        display: inherit;
-      }
-    }
-  }
-  ::slotted(a) {
-    @include ids-dropdown__content__link();
-  }
-  ::slotted(a:hover),
-  ::slotted(a:focus) {
-    color: var(--IDS-COLOR-NEUTRAL-100);
-    background-color: var(--IDS-COLOR-ACCENT-30);
-  }
-}

package/src/components/expandable/expandable-lit.ts

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

package/src/components/expandable/expandable.scss

@@ -1,121 +0,0 @@
-@use "../../global/partials";
-@use "../../layout/breakpoints.scss";
-
-.ids-expandable {
-  border-bottom: var(--IDS-EXPANDABLE__BORDER-BOTTOM);
-
-  .ids-expandable__inner {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    min-height: 4.375rem;
-    text-align: start;
-    gap: 0.625rem;
-  }
-
-  .ids-expandable__button {
-    @include partials.ids-focusable();
-  }
-
-  .ids-expandable__content {
-    padding-bottom: 1.25rem;
-    display: none;
-  }
-
-  .ids-expandable__headline,
-  ::slotted([slot="headline"]) {
-    color: var(--IDS-EXPANDABLE__HEADLINE-COLOR);
-    font-size: var(--IDS-EXPANDABLE__HEADLINE-FONT-SIZE);
-    font-family: var(--IDS-EXPANDABLE__HEADLINE-FONT-FAMILY);
-    font-weight: var(--IDS-EXPANDABLE__HEADLINE-FONT-WEIGHT);
-    margin: 0;
-    text-align: start;
-
-    @media (max-width: breakpoints.$medium) {
-      font-size: var(--IDS-EXPANDABLE--MOBILE__HEADLINE-FONT-SIZE);
-    }
-  }
-
-  .ids-expandable__icon {
-    background-color: var(--IDS-EXPANDABLE__ICON-2-COLOR);
-    border-radius: 50%;
-    min-height: 1.5rem;
-    min-width: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .ids-expandable__icon--large {
-      display: none;
-    }
-
-    .ids-expandable__icon--small {
-      display: inline-flex;
-    }
-  }
-
-  @media (min-width: breakpoints.$small) {
-    min-height: 1.75rem;
-    min-width: 1.75rem;
-
-    .ids-expandable__inner {
-      flex-wrap: nowrap;
-    }
-
-    .ids-expandable__icon {
-      .ids-expandable__icon--small {
-        display: none;
-      }
-
-      .ids-expandable__icon--large {
-        display: inline-flex;
-      }
-    }
-  }
-
-  &:not(.ids-expandable--expanded)
-    > .ids-expandable__button
-    > .ids-expandable__inner
-    > .ids-expandable__icon--expanded,
-  &:not(.ids-expandable--expanded)
-    > .ids-expandable__button
-    > .ids-expandable__inner
-    > .ids-expandable__icon
-    > .ids-expandable__icon--expanded {
-    display: none;
-  }
-
-  &.ids-expandable--expanded
-    > .ids-expandable__button
-    > .ids-expandable__inner
-    > .ids-expandable__icon--closed,
-  &.ids-expandable--expanded
-    > .ids-expandable__button
-    > .ids-expandable__inner
-    > .ids-expandable__icon
-    > .ids-expandable__icon--closed {
-    display: none;
-  }
-
-  &.ids-expandable--borderless {
-    border-bottom: 0.063rem solid transparent;
-  }
-
-  &.ids-expandable--inside-card.ids-expandable--has-children,
-  &.ids-expandable--inside-card:not(.ids-expandable--child),
-  &.ids-expandable--expanded.ids-expandable--has-children {
-    border-bottom: none;
-  }
-
-  &.ids-expandable--expanded > .ids-expandable__content {
-    display: block;
-  }
-
-  &.ids-expandable--child {
-    .ids-expandable__headline {
-      font-size: var(--IDS-EXPANDABLE--CHILD__HEADLINE-FONT-SIZE);
-    }
-  }
-}

package/src/components/footer/footer-lit.ts

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