@inera/ids-design 5.4.0 → 5.4.1

package/src/global/form/button.scss

@@ -1,261 +0,0 @@
-@use "../../layout/breakpoints.scss";
-@use "../partials";
-
-%button-disabled {
-  color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
-  border: var(--IDS-BUTTON--DISABLED__BORDER) !important;
-  background-color: var(--IDS-COLOR-NEUTRAL-100) !important;
-}
-
-.ids button.ids-button {
-  @include partials.ids-button-base();
-  @include partials.ids-focusable();
-}
-
-.ids .ids-button,
-.ids-button,
-.ids button.ids-button {
-  text-align: center;
-  background-color: var(--IDS-BUTTON__BACKGROUND-COLOR);
-  border: var(--IDS-BUTTON__BORDER);
-  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
-  text-decoration: none;
-  box-sizing: border-box;
-  color: var(--IDS-COLOR-NEUTRAL-100);
-  cursor: pointer;
-  gap: 0.5rem;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: var(--IDS-BUTTON--M__PADDING);
-  line-height: var(--IDS-BUTTON--M__LINE-HEIGHT);
-  font-size: var(--IDS-BUTTON--M__FONT-SIZE);
-  font-family: var(--IDS-BUTTON__FONT-FAMILY);
-  font-weight: var(--IDS-BUTTON__FONT-WEIGHT);
-  text-transform: uppercase;
-  user-select: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-
-  &:hover,
-  &:active,
-  &:focus,
-  &.ids-button--active {
-    background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-    box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
-  }
-  &.ids-button--disabled,
-  &[disabled] {
-    @extend %button-disabled;
-  }
-  // Sizes
-  &.ids-button--s {
-    font-size: var(--IDS-BUTTON--S__FONT-SIZE);
-    line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
-    padding: var(--IDS-BUTTON--S__PADDING);
-  }
-
-  &.ids-button--l {
-    font-size: var(--IDS-BUTTON--L__FONT-SIZE);
-    line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
-    padding: var(--IDS-BUTTON--L__PADDING);
-  }
-
-  &.ids-button--loading {
-    pointer-events: none !important;
-  }
-
-  // Types
-  &.ids-button--secondary {
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    border: var(--IDS-BUTTON--SECONDARY__BORDER);
-    color: var(--IDS-BUTTON--SECONDARY__COLOR);
-    line-height: var(--IDS-BUTTON--M__LINE-HEIGHT);
-    padding: var(--IDS-BUTTON--M__PADDING);
-    &.ids-button--s {
-      line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
-      padding: var(--IDS-BUTTON--S__PADDING);
-    }
-    &.ids-button--l {
-      line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
-      padding: var(--IDS-BUTTON--L__PADDING);
-    }
-    &.ids-button--active,
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-      color: var(--IDS-COLOR-NEUTRAL-100);
-      border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-    }
-    &.ids-button--disabled,
-    &[disabled] {
-      @extend %button-disabled;
-    }
-  }
-
-  &.ids-button--tertiary {
-    background: transparent;
-    border-radius: 0;
-    border: 0.063rem solid transparent;
-    color: var(--IDS-BUTTON--TERTIARY__COLOR);
-    box-shadow: none;
-    font-family: var(--IDS-FONT-FAMILY-HEADING);
-    text-decoration: underline;
-
-    &.ids-button--s {
-      line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
-      padding: var(--IDS-BUTTON--S__PADDING);
-    }
-    &.ids-button--l {
-      line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
-      padding: var(--IDS-BUTTON--L__PADDING);
-    }
-
-    &.ids-button--active,
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-      color: var(--IDS-COLOR-NEUTRAL-100);
-      border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
-      border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-    }
-    &.ids-button--disabled,
-    &[disabled] {
-      border: none !important;
-      text-decoration: underline !important;
-      color: var(--IDS-BUTTON--DISABLED__COLOR);
-      text-decoration: none;
-    }
-  }
-
-  &.ids-button--icon,
-  &.ids-button--fab {
-    width: 2.75rem;
-    height: 2.75rem !important;
-    border-radius: 100%;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 0 !important;
-    font-size: 1.25rem;
-    padding: 0 !important;
-    justify-content: center;
-    &.ids-button--s {
-      width: 1.875rem;
-      height: 1.875rem !important;
-    }
-    &.ids-button--l {
-      width: 3.75rem;
-      height: 3.75rem !important;
-    }
-  }
-
-  &.ids-button--fab {
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    border: var(--IDS-BUTTON--FAB__BORDER);
-    filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.3));
-  }
-
-  &.ids-button--icon {
-    &.ids-button--secondary {
-      background-color: var(--IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR);
-    }
-    &.ids-button--active,
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-      color: var(--IDS-COLOR-NEUTRAL-100);
-    }
-  }
-
-  // same style as search - remove search?
-  &.ids-button--submit {
-    border-radius: var(--IDS-BUTTON--SUBMIT__BORDER-RADIUS);
-    font-size: var(--IDS-BUTTON--SUBMIT-S__FONT-SIZE);
-    height: var(--IDS-BUTTON--SUBMIT-S__HEIGHT);
-    padding: var(--IDS-BUTTON--SUBMIT-S__PADDING);
-
-    &.ids-button--s {
-      // Keeps same height as inputs
-      height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
-      font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
-      padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
-    }
-
-    @media (min-width: breakpoints.$medium) {
-      height: var(--IDS-BUTTON--SUBMIT-L__HEIGHT);
-      padding: var(--IDS-BUTTON--SUBMIT-L__PADDING);
-      font-size: var(--IDS-BUTTON--SUBMIT-L__FONT-SIZE);
-
-      &.ids-button--s {
-        // Keeps same height as inputs
-        height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
-        font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
-        padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
-      }
-    }
-  }
-
-  // remove? same style as submit
-  &.ids-button--search {
-    border-radius: var(--IDS-BUTTON--SEARCH__BORDER-RADIUS);
-    font-size: var(--IDS-BUTTON--SEARCH-S__FONT-SIZE);
-    height: var(--IDS-BUTTON--SEARCH-S__HEIGHT);
-    padding: var(--IDS-BUTTON--SEARCH-S__PADDING);
-
-    &.ids-button--s {
-      // Keeps same height as inputs
-      height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
-      font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
-      padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
-    }
-
-    @media (min-width: breakpoints.$medium) {
-      height: var(--IDS-BUTTON--SEARCH-L__HEIGHT);
-      padding: var(--IDS-BUTTON--SEARCH-L__PADDING);
-      font-size: var(--IDS-BUTTON--SEARCH-L__FONT-SIZE);
-
-      &.ids-button--s {
-        // Keeps same height as inputs
-        height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
-        font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
-        padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
-      }
-    }
-  }
-
-  // Blocks
-  &.ids-button--block {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-  }
-  &.ids-button--m-block {
-    @media (max-width: breakpoints.$medium) {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  &.ids-button--s-block {
-    @media (max-width: breakpoints.$small) {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  &.ids-button--disabled,
-  &[disabled] {
-    pointer-events: none;
-  }
-
-  @include partials.ids-focusable();
-}

package/src/global/form/checkbox.scss

@@ -1,100 +0,0 @@
-@use "../partials";
-
-.ids-checkbox {
-  position: relative;
-  @include partials.ids-label-wrapper();
-
-  input[type="checkbox"],
-  input {
-    margin: 0;
-    position: relative;
-    height: 1.25rem;
-    width: 1.25rem;
-    appearance: none;
-
-    &::before {
-      content: "";
-      position: relative;
-      display: inline-block;
-      cursor: pointer;
-      background-color: var(--IDS-CHECKBOX__BACKGROUND-COLOR);
-      border: var(--IDS-CHECKBOX__BORDER);
-      border-radius: var(--IDS-CHECKBOX__BORDER-RADIUS);
-      box-sizing: border-box;
-      min-height: 1.25rem;
-      min-width: 1.25rem;
-
-      input:focus + & {
-        outline: var(--IDS-FOCUS__OUTLINE);
-        outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
-      }
-    }
-
-    &:checked::after {
-      content: "";
-      display: inline-block;
-      background-image: var(--IDS-CHECKBOX__CHECK-BACKGROUND-IMAGE);
-      min-height: 1.25rem;
-      min-width: 1.25rem;
-      position: absolute;
-      top: 0;
-      left: 0;
-      cursor: pointer;
-      background-position: center center;
-      background-size: 1em 1em;
-      background-repeat: no-repeat;
-    }
-
-    &:disabled {
-      &::before {
-        cursor: default;
-        border: var(--IDS-FORM--DISABLED__BORDER);
-        background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
-      }
-      &:after {
-        cursor: default;
-      }
-
-      &:checked::after {
-        background-image: var(--IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE) !important;
-      }
-    }
-
-    &.ids-input--invalid::before {
-      border: var(--IDS-FORM--INVALID__BORDER);
-      box-shadow: inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
-      background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-
-      &:checked + &::after {
-        background-image: var(--IDS-CHECKBOX--INVALID__CHECK-BACKGROUND-IMAGE) !important;
-      }
-    }
-  }
-
-  &.ids-checkbox--light {
-    input[type="checkbox"],
-    input {
-      &::before {
-        background-color: var(--IDS-COLOR-NEUTRAL-100);
-      }
-      &.ids-input--invalid::before {
-        background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-      }
-    }
-  }
-
-  &.ids-checkbox--block {
-    width: 100%;
-    .ids-label {
-      width: 100%;
-    }
-  }
-
-  &.ids-checkbox--compact {
-    margin: 0 !important;
-    label {
-      margin-left: 0 !important;
-      margin-bottom: -0.125rem !important;
-    }
-  }
-}

package/src/global/form/input.scss

@@ -1,77 +0,0 @@
-@use "../../layout/breakpoints";
-@use "../partials";
-
-.ids-input-wrapper {
-  position: relative;
-  display: flex;
-  gap: 0.5rem;
-
-  .ids-input__icon {
-    @include partials.ids-input-icon();
-  }
-
-  // input type search
-  .ids-input__inner-wrapper {
-    position: relative;
-    width: 100%;
-
-    .ids-input__search-icon {
-      pointer-events: none;
-      position: absolute;
-      top: 50%;
-      left: 1.25rem;
-      transform: translateY(-50%);
-    }
-
-    .ids-input {
-      padding-left: var(--IDS-INPUT--SEARCH__PADDING-LEFT);
-    }
-  }
-
-  &.ids-input--icon {
-    .ids-input {
-      padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
-    }
-  }
-
-  @media (min-width: breakpoints.$medium) {
-    gap: 1.25rem;
-  }
-}
-
-.ids-input {
-  @include partials.ids-form-input-base();
-  @include partials.ids-focusable();
-  width: 100% !important;
-  height: var(--IDS-INPUT__HEIGHT);
-  line-height: 1.5rem;
-  font-size: 1rem;
-
-  &.ids-input--search,
-  &[type="search"] {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: var(--IDS-INPUT--SEARCH__PADDING-LEFT);
-    font-size: var(--IDS-INPUT--SEARCH__FONT-SIZE-MOBILE);
-    border-radius: var(--IDS-INPUT--SEARCH__BORDER-RADIUS);
-    height: var(--IDS-INPUT--SEARCH__HEIGHT-MOBILE);
-  }
-
-  @media (min-width: breakpoints.$medium) {
-    &.ids-input--search,
-    &[type="search"] {
-      height: var(--IDS-INPUT--SEARCH__HEIGHT-DESKTOP);
-    }
-  }
-}
-
-.ids-input__hint {
-  margin-top: 0.313rem;
-  font-family: var(--IDS-FONT-FAMILY-BASE);
-  color: var(--IDS-FORM-LABEL__COLOR);
-  display: flex;
-  justify-content: end;
-  line-height: 1.5rem;
-  font-size: 1rem;
-  font-style: italic;
-}

package/src/global/form/radio.scss

@@ -1,108 +0,0 @@
-@use "../partials";
-
-.ids-radio {
-  @include partials.ids-label-wrapper();
-
-  input,
-  input[type="radio"] {
-    cursor: pointer;
-    appearance: none;
-    margin: 0;
-    width: 1.25rem;
-    height: 1.25rem;
-    color: var(--IDS-COLOR-ACCENT-40);
-    border: .063rem solid var(--IDS-COLOR-ACCENT-40);
-    background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
-    border-radius: 50%;
-    position: relative;
-    flex-shrink: 0;
-
-    &.ids-input--light:not(.ids-input--invalid) {
-      background-color: var(--IDS-COLOR-NEUTRAL-100);
-      &::after {
-        border:0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
-        background-color: var(--IDS-COLOR-NEUTRAL-100);
-      }
-      &:checked {
-        &::after {
-          border: .125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
-          background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
-        }
-      }
-      &:disabled {
-        &::after {
-          border: .125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-          background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-        }
-      }
-      &:disabled:checked {
-        &::after {
-          border: .125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-          background-color: var(--IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR);
-        }
-      }
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      display: inline-block;
-      cursor: pointer;
-      width: 1.125rem;
-      height: 1.125rem;
-      border-radius: 50%;
-      top: 0;
-      left: 0;
-      border: .125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
-      background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
-    }
-
-    &:checked {
-      &::after {
-        border: .125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
-        background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
-      }
-    }
-
-    &:disabled {
-      cursor: default;
-      background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-      border: var(--IDS-FORM--DISABLED__BORDER);
-      &::after {
-        cursor: default;
-        background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-        border: .125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-        top: 0;
-        left: 0;
-      }
-    }
-
-    &:disabled:checked {
-      &::after {
-        border: .125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-        background-color: var(--IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR);
-      }
-    }
-
-    &[aria-invalid="true"]:not(:checked) {
-      background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-      border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
-      box-shadow: inset 0 0 0 0.0625rem var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-
-      &::after {
-        border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
-        background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-        top: 0;
-        left: 0;
-      }
-    }
-  }
-
-  &.ids-radio--compact {
-    margin: 0 !important;
-    label {
-      margin-left: 0 !important;
-      margin-bottom: -0.125rem !important;
-    }
-  }
-}

package/src/global/form/range.scss

@@ -1,69 +0,0 @@
-
-input.ids-range {
-  appearance: none;
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
-  background-image: linear-gradient(
-    var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR),
-    var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR)
-  );
-  background-repeat: no-repeat;
-  border: 0.063rem;
-  cursor: pointer;
-  display: block;
-  padding: 0;
-  border-radius: 1rem;
-  margin: 0;
-
-  &::-ms-track {
-    width: 100%;
-    cursor: pointer;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-  }
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
-    height: 1.5rem;
-    width: 1.5rem;
-    border-radius: 100%;
-    background: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
-    cursor: pointer;
-  }
-
-  &::-ms-thumb {
-    border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
-    height: 1.375rem;
-    width: 1.5rem;
-    border-radius: 100%;
-    cursor: pointer;
-  }
-
-  &:disabled {
-    cursor: default;
-    appearance: none;
-    width: 100%;
-    height: 0.5rem;
-    background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
-    background-image: linear-gradient(
-      var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR),
-      var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR)
-    );
-    background-repeat: no-repeat;
-    border: 0.063rem;
-    padding: 0;
-    border-radius: 1rem;
-
-    &::-webkit-slider-thumb {
-      cursor: default;
-      background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
-    }
-
-    &::-ms-thumb {
-      cursor: default;
-    }
-  }
-}

package/src/global/form/select.scss

@@ -1,23 +0,0 @@
-@use "../partials";
-
-.ids-select {
-  appearance: none !important;
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  @include partials.ids-select-style();
-}
-
-.ids-select-wrapper {
-  position: relative;
-  display: flex;
-
-  &::after {
-    @include partials.ids-select-chevron();
-  }
-  &:has(.ids-input--invalid)::after {
-    background-image: var(--IDS-SELECT--INVALID__CHEVRON-ICON);
-  }
-  &:has(.ids-select:disabled)::after {
-    background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON);
-  }
-}

package/src/global/form/textarea.scss

@@ -1,41 +0,0 @@
-@use "../partials";
-
-.ids-textarea {
-  display: inline-block;
-
-  textarea {
-    @include partials.ids-form-input-base();
-    @include partials.ids-textarea-scrollbar();
-    padding: var(--IDS-TEXTAREA__PADDING);
-    box-sizing: border-box;
-
-    &:focus {
-      box-shadow: var(--IDS-INPUT__BOX-SHADOW);
-    }
-
-    &::-webkit-resizer {
-      appearance: none;
-      background-image: var(--IDS-TEXTAREA__RESIZER-IMAGE);
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
-    }
-  }
-
-  &.ids-textarea--block {
-    display: block;
-    textarea {
-      display: block;
-      width: 100%;
-    }
-  }
-
-  &.ids-textarea--autosize {
-    display: block;
-    textarea {
-      width: 100%;
-      resize: none;
-      overflow: hidden;
-    }
-  }
-}