@inera/ids-design 5.4.0 → 5.5.0

package/src/components/popover/popover.scss

@@ -1,9 +0,0 @@
-.ids-popover {
-  position: relative;
-  display: inline-block;
-
-  .ids-popover-trigger {
-    display: inline-block;
-    cursor: pointer;
-  }
-}

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

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

package/src/components/progressbar/progressbar.scss

@@ -1,39 +0,0 @@
-@use "../../layout/breakpoints";
-
-.ids-progressbar {
-  border: var(--IDS-PROGRESSBAR__BORDER-COLOR);
-  height: 0.938rem;
-  box-sizing: border-box;
-  border-radius: 0.625rem;
-  position: relative;
-  @media (max-width: breakpoints.$medium) {
-    height: 0.625rem;
-  }
-  .ids-progressbar__progress {
-    left: 0;
-    background-color: var(--IDS-PROGRESSBAR__PROGRESS-COLOR);
-    width: 15%;
-    display: block;
-    height: 0.938rem;
-    border-radius: 0.625rem;
-    transition: width 0.3s ease;
-    margin-top: -0.063rem;
-    margin-left: -0.063rem;
-    @media (max-width: breakpoints.$medium) {
-      height: 0.625rem;
-    }
-  }
-  .ids-progressbar__progress--none {
-    display: none;
-  }
-  .ids-progressbar__label {
-    display: flex;
-    justify-content: center;
-    margin-top: 0.938rem;
-    font-size: 1.25rem;
-    line-height: 1.5rem;
-    letter-spacing: -0.025rem;
-    color: var(--IDS-PROGRESSBAR__LABEL-COLOR);
-    font-weight: 700;
-  }
-}

package/src/components/side-menu/side-menu-lit.ts

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

package/src/components/side-menu/side-menu.scss

@@ -1,179 +0,0 @@
-@use "../../layout/breakpoints";
-@use "../../global/partials";
-
-.ids-side-menu {
-  &.ids-side-menu--hide-on-mobile {
-    @media (max-width: breakpoints.$medium) {
-      display: none;
-    }
-  }
-
-  .ids-side-menu__header {
-    border-left: 0.5rem solid var(--IDS-COLOR-NEUTRAL-100);
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    border-top-right-radius: 0.313rem;
-    border-bottom-right-radius: 0.313rem;
-    display: flex;
-
-    .ids-side-menu__header-inner {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      width: 100%;
-      color: var(--IDS-SIDE-MENU__LINK-COLOR);
-      margin-right: 0.5rem;
-    }
-
-    &.ids-side-menu--child-leaf {
-      .ids-side-menu__header-inner {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    .ids-side-menu__icon-button {
-      @include partials.ids-button-no-styles();
-      @include partials.ids-focusable(-0.125rem);
-      height: 2.75rem;
-      width: 1.5rem;
-      position: relative;
-      cursor: pointer;
-    }
-
-    .ids-side-menu__icon {
-      position: absolute;
-      top: 1.125rem;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .ids-side-menu__label {
-      text-align: left;
-      line-height: 1.625rem;
-      margin: 0.25rem 0;
-      padding: 0.313rem 0;
-    }
-
-    .ids-side-menu__link {
-      display: grid;
-      grid-template-columns: 1fr auto;
-
-      ::slotted(a),
-      a {
-        color: var(--IDS-SIDE-MENU__LINK-COLOR);
-        @include partials.ids-focusable(-0.125rem);
-        cursor: pointer;
-        text-decoration: none !important;
-        display: flex;
-        gap: 0.5rem;
-        justify-content: space-between;
-        align-items: flex-start;
-        margin: 0.25rem 0;
-        padding: 0.313rem 0;
-        line-height: 1.625rem;
-        text-align: left;
-      }
-
-      &:hover {
-        ::slotted(a),
-        a {
-          color: var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);
-          text-decoration: underline !important;
-        }
-      }
-
-      ::slotted(button),
-      button {
-        border: 0;
-        border-radius: 0;
-        background-color: transparent;
-        @include partials.ids-focusable(-0.125rem);
-        color: var(--IDS-SIDE-MENU__LINK-COLOR);
-        cursor: pointer;
-        display: flex;
-        gap: 0.5rem;
-        justify-content: space-between;
-        align-items: flex-start;
-        line-height: 1.625rem;
-        width: 100%;
-        margin: 0.25rem 0;
-        padding: 0.313rem 0;
-        text-align: left;
-
-        &:focus {
-          outline: var(--IDS-FOCUS__OUTLINE) !important;
-          outline-offset: -0.125rem !important;
-          outline-color: var(--IDS-COLOR-NEUTRAL-40) !important;
-        }
-      }
-
-      &:hover {
-        ::slotted(button),
-        button {
-          color: var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);
-          text-decoration: underline !important;
-        }
-      }
-    }
-
-    &.ids-side-menu--active {
-      background-color: var(--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR);
-      border-color: var(--IDS-SIDE-MENU--ACTIVE__HEADER-BORDER-COLOR);
-
-      .ids-side-menu__label {
-        font-weight: 700;
-      }
-
-      .ids-side-menu__link {
-        font-weight: 700;
-
-        &:hover {
-          ::slotted(a),
-          a,
-          ::slotted(button),
-          button {
-            cursor: default;
-            color: var(--IDS-SIDE-MENU__LINK-COLOR);
-            text-decoration: none !important;
-          }
-        }
-      }
-    }
-
-    &.ids-side-menu--level-2 {
-      .ids-side-menu__header-inner {
-        margin-left: 1.5rem;
-      }
-    }
-
-    &.ids-side-menu--level-3 {
-      .ids-side-menu__header-inner {
-        margin-left: 3.125rem;
-      }
-    }
-
-    &.ids-side-menu--level-4 {
-      .ids-side-menu__header-inner {
-        margin-left: 4.625rem;
-      }
-    }
-  }
-
-  .ids-side-menu__label,
-  .ids-side-menu__link {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-
-  &.ids-side-menu--disabled {
-    cursor: default;
-  }
-
-  ::slotted(button),
-  button {
-    &:focus,
-    &:focus-visible {
-      outline: var(--IDS-FOCUS__OUTLINE) !important;
-      outline-offset: -0.125rem !important;
-      outline-color: var(--IDS-COLOR-NEUTRAL-40) !important;
-    }
-  }
-}

package/src/components/side-panel/side-panel-lit.ts

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

package/src/components/side-panel/side-panel.scss

@@ -1,330 +0,0 @@
-@use "../../layout/breakpoints";
-@use "../../global/partials";
-
-.ids-side-panel {
-  background-color: var(--IDS-OVERLAY__BACKGROUND-COLOR);
-  overflow: hidden;
-  z-index: 1;
-
-  .ids-side-panel__mobile-menu {
-    display: none;
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-  }
-
-  &.ids-side-panel--regular {
-    opacity: 0;
-    visibility: hidden;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 2;
-    width: 0;
-    height: 0;
-    transition: opacity 0s linear 0.2s, visibility 0.3s, width 0s linear 0.4s, height 0s linear 0.4s;
-
-    .ids-side-panel__panel {
-      background-color: var(--IDS-COLOR-NEUTRAL-100);
-      border-left: 0;
-      box-sizing: border-box;
-      padding: 1.25rem 1rem 0 1rem;
-      display: flex;
-      flex-direction: column;
-      overflow-x: hidden;
-      position: relative;
-      width: 100%;
-      height: 70vh;
-      transform: translateY(100vh);
-      transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .ids-side-panel__content {
-      @include partials.ids-scrollbar();
-      width: 100%;
-      padding-bottom: 1.25rem;
-      box-sizing: border-box;
-      overflow-x: hidden;
-      overflow-y: auto;
-      order: 1;
-    }
-
-    .ids-side-panel__inner {
-      padding: 0.5rem;
-    }
-
-    .ids-side-panel__actions {
-      text-align: right;
-      width: 100%;
-      margin-right: 0.313rem;
-      order: 0;
-    }
-
-    .ids-side-panel__close-button {
-      @include partials.ids-button-no-styles();
-      @include partials.ids-focusable();
-    }
-
-    &.ids-side-panel--show {
-      opacity: 1;
-      visibility: visible;
-      width: 100%;
-      height: 100vh;
-      transition: width 0s, height 0s;
-
-      .ids-side-panel__panel {
-        transform: translateY(30vh);
-        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-    }
-
-    @media (min-width: breakpoints.$small) {
-      .ids-side-panel__panel {
-        height: 50vh;
-      }
-
-      &.ids-side-panel--show {
-        .ids-side-panel__panel {
-          transform: translateY(50vh);
-        }
-      }
-    }
-
-    @media (min-width: breakpoints.$medium) {
-      display: flex;
-      position: relative;
-      overflow-x: hidden;
-      width: 0;
-      transform: none;
-      background-color: var(--IDS-COLOR-NEUTRAL-100);
-      transition: width 0.3s ease-in-out, opacity 0s linear 0.3s, height 0.4s, visibility 0.4s,
-        transform linear 0s;
-      border-left: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
-
-      .ids-side-panel__panel {
-        top: 0;
-        padding: 1.25rem 0 0 1rem;
-        transform: none;
-        transition: none;
-        height: 100%;
-      }
-
-      .ids-side-panel__content,
-      .ids-side-panel__actions {
-        width: 21.875rem;
-      }
-
-      &.ids-side-panel--show {
-        width: 23.75rem;
-        height: 100%;
-        transform: none;
-        transition: width 0.3s ease-in-out, visibility 0s, opacity 0s, transform linear 0s;
-
-        .ids-side-panel__panel {
-          transform: none;
-          transition: none;
-        }
-      }
-
-      &.ids-side-panel--left {
-        border-left: 0;
-        border-right: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
-        .ids-side-panel__panel {
-          direction: rtl;
-          padding: 1.25rem 1rem 1.25rem 0;
-
-          .ids-side-panel__content {
-            direction: ltr;
-          }
-        }
-      }
-
-      &.ids-side-panel--elevated {
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 0;
-        height: 100%;
-        left: auto;
-        z-index: 2;
-        border-left: 0;
-        box-shadow: -0.188rem 0 0.25rem -0.125rem rgba(0, 0, 0, 0.2);
-
-        &.ids-side-panel--left {
-          left: 0;
-          right: auto;
-          border-right: 0;
-          box-shadow: 0.188rem 0 0.25rem -0.125rem rgba(0, 0, 0, 0.2);
-
-          .ids-side-panel__panel {
-            padding: 1.25rem 1rem 1.25rem 0;
-          }
-        }
-
-        &.ids-side-panel--show {
-          width: 23.75rem;
-        }
-      }
-    }
-  }
-
-  &.ids-side-panel--menu {
-    position: relative;
-    display: flex;
-    width: 3.125rem;
-    height: 100%;
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    border-right: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
-    padding: 0;
-
-    .ids-side-panel__panel {
-      position: relative;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      padding: 1.25rem 0 0 0;
-    }
-
-    .ids-side-panel__content {
-      @include partials.ids-scrollbar();
-      width: 100%;
-      height: 100%;
-      padding: 0.5rem;
-      margin: -0.5rem 0 0 -0.5rem;
-      box-sizing: border-box;
-      overflow-x: hidden;
-      overflow-y: auto;
-      opacity: 0;
-      visibility: hidden;
-      transition: visibility 0s, opacity 0s;
-    }
-
-    .ids-side-panel__actions {
-      text-align: right;
-      margin-right: 1.25rem;
-      width: 2.25rem;
-    }
-
-    .ids-side-panel__footer {
-      text-align: left;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      gap: 1.25rem;
-      padding: 1.25rem;
-      border-bottom: 0.5rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR);
-      border-top: 0.063rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR);
-      opacity: 0;
-      visibility: hidden;
-      transition: visibility 0s, opacity 0s;
-    }
-
-    .ids-side-panel__footer-links,
-    ::slotted([slot="footer-links"]) {
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-    }
-
-    .ids-side-panel__hamburger {
-      @include partials.ids-hamburger(var(--IDS-COLOR-ACCENT-40));
-      border: 0;
-      background-color: transparent;
-      height: 1.875rem;
-      padding: 0 0.25rem;
-      margin-right: -0.25rem;
-
-      &:focus {
-        @include partials.ids-outline(-0.125rem);
-      }
-    }
-
-    &.ids-side-panel--show {
-      width: 100%;
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      border-right: 0;
-
-      .ids-side-panel__actions {
-        width: auto;
-      }
-
-      .ids-side-panel__mobile-menu {
-        display: block;
-        margin-top: 2.5rem;
-      }
-
-      .ids-side-panel__content,
-      .ids-side-panel__footer {
-        opacity: 1;
-        visibility: visible;
-        transition: visibility 0s, opacity 0s;
-      }
-    }
-
-    &.ids-side-panel--elevated {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: auto;
-      right: calc(100% - 3.125rem);
-      width: 3.125rem;
-      z-index: 2;
-      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-      &.ids-side-panel--show {
-        width: 100%;
-        transform: translateX(calc(100% - 3.125rem));
-      }
-    }
-
-    @media (min-width: breakpoints.$medium) {
-      transition: width 0.3s ease-in-out;
-
-      .ids-side-panel__mobile-menu {
-        display: none !important;
-      }
-
-      .ids-side-panel__panel {
-        width: 23.75rem;
-        position: relative;
-        transform: none;
-        transition: none;
-      }
-
-      .ids-side-panel__content {
-        width: 23.75rem;
-      }
-
-      .ids-side-panel__footer {
-        width: 23.75rem;
-      }
-
-      &.ids-side-panel--show {
-        position: relative;
-        width: 23.75rem;
-        height: 100%;
-        transform: none;
-        transition: width 0.3s ease-in-out;
-        border-right: 0.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
-      }
-
-      &.ids-side-panel--elevated {
-        border-right: 0;
-        box-shadow: 0.188rem 0 0.25rem -0.125rem rgba(0, 0, 0, 0.2);
-
-        &.ids-side-panel--show {
-          position: fixed;
-          width: 23.75rem;
-          transform: translateX(20.625rem);
-          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-      }
-    }
-  }
-}

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

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