@inera/ids-design 5.3.0 → 5.4.0

package/src/global/form/button.scss

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

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

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

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

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

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

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