@inera/ids-design 5.4.0 → 5.5.0

package/src/global/_partials.scss

@@ -1,408 +0,0 @@
-@mixin ids-outline($offset: var(--IDS-FOCUS__OUTLINE-OFFSET)) {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: $offset !important;
-}
-@mixin ids-outline--light($offset: var(--IDS-FOCUS__OUTLINE-OFFSET)) {
-  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
-  outline-offset: $offset !important;
-}
-
-@mixin ids-focusable($offset: var(--IDS-FOCUS__OUTLINE-OFFSET)) {
-  &:focus {
-    @include ids-outline($offset);
-  }
-}
-
-@mixin ids-focusable--light($offset: var(--IDS-FOCUS__OUTLINE-OFFSET)) {
-  &:focus {
-    @include ids-outline--light($offset);
-  }
-}
-
-@mixin ids-no-focus-visible {
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-/*******
-* BUTTONS
-********/
-
-@mixin ids-button-no-styles() {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-}
-
-@mixin ids-button-base() {
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-@mixin ids-hamburger($hamburgerColor) {
-  .ids-hamburger {
-    transition: 0.2s;
-    cursor: pointer;
-    user-select: none;
-    position: relative;
-  }
-  .ids-hamburger__lines {
-    display: block;
-    width: 1.3125rem;
-    border-radius: 0.125rem;
-    transition: 0.2s;
-    background-color: $hamburgerColor;
-    position: relative;
-    height: 0.188rem;
-    width: 1.25rem;
-  }
-  .ids-hamburger__lines:before,
-  .ids-hamburger__lines:after {
-    display: inline-block;
-    width: 1.3125rem;
-    border-radius: 0.125rem;
-    transition: 0.2s;
-    background-color: $hamburgerColor;
-    position: absolute;
-    left: 0;
-    content: "";
-    -webkit-transform-origin: 0.09375rem center;
-    transform-origin: 0.09375rem center;
-  }
-  .ids-hamburger__lines:before,
-  .ids-hamburger__lines:after {
-    height: 0.188rem;
-    width: 1.25rem;
-  }
-  .ids-hamburger__lines:before,
-  .ids-hamburger__lines:after {
-    -webkit-transform-origin: 0.13393rem center;
-    transform-origin: 0.13393rem center;
-  }
-  .ids-hamburger__lines:before {
-    top: 0.5rem;
-  }
-  .ids-hamburger__lines:after {
-    top: -0.5rem;
-  }
-  &[aria-expanded="true"] {
-    .ids-hamburger {
-      -webkit-transform: scale3d(0.8, 0.8, 0.8);
-      transform: scale3d(0.8, 0.8, 0.8);
-      .ids-hamburger__lines {
-        background: transparent;
-        &:before,
-        &:after {
-          -ms-transform-origin: 50% 50%;
-          -webkit-transform-origin: 50% 50%;
-          transform-origin: 50% 50%;
-          top: 0;
-          width: 2rem;
-          left: -0.313rem;
-        }
-        &:before {
-          -ms-transform: rotate(45deg);
-          -webkit-transform: rotate3d(0, 0, 1, 45deg);
-          transform: rotate3d(0, 0, 1, 45deg);
-        }
-        &:after {
-          -ms-transform: rotate(-45deg);
-          -webkit-transform: rotate3d(0, 0, 1, -45deg);
-          transform: rotate3d(0, 0, 1, -45deg);
-        }
-      }
-    }
-  }
-}
-
-/*******
-* SCROLLBARS
-********/
-
-@mixin ids-scrollbar($marginTop: 0) {
-  &::-webkit-scrollbar {
-    width: 1rem;
-    position: absolute;
-    margin-left: -1.25rem;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--IDS-COLOR-NEUTRAL-99);
-    border-radius: 0.625rem;
-    margin-bottom: 0;
-
-    @if $marginTop != 0 {
-      margin-top: $marginTop;
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    cursor: auto;
-    background: var(--IDS-SCROLL__COLOR);
-    border-radius: 0.625rem;
-    box-sizing: border-box;
-    border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-99);
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--IDS-SCROLL__HOVER-COLOR);
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-}
-
-// thinner with transparent background
-@mixin ids-textarea-scrollbar() {
-  &::-webkit-scrollbar {
-    width: 1rem;
-    position: absolute;
-    margin-left: -1.25rem;
-  }
-
-  &::-webkit-scrollbar-track {
-    border-radius: 0.625rem;
-    margin-bottom: 0;
-    margin-top: .0313rem;
-    background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    cursor: auto;
-    background: var(--IDS-SCROLL__COLOR);
-    border-radius: 0.625rem;
-    box-sizing: border-box;
-    border: 0.125rem solid var(--IDS-INPUT__BACKGROUND-COLOR);
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--IDS-SCROLL__HOVER-COLOR);
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-}
-
-/*******
-* FORM
-********/
-
-@mixin ids-form-input-base {
-  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
-  padding: var(--IDS-INPUT__PADDING);
-  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
-  border: var(--IDS-INPUT__BORDER);
-  border-radius: var(--IDS-INPUT__BORDER-RADIUS);
-  font-size: 1rem;
-  color: var(--IDS-INPUT__COLOR);
-  display: block;
-  &:disabled {
-    @include ids-form-input--disabled();
-  }
-  &.ids-input--invalid {
-    @include ids-form-input--invalid();
-  }
-  &.ids-input--light {
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-
-    &:disabled {
-      @include ids-form-input--disabled();
-    }
-
-    &.ids-input--invalid {
-      background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-    }
-  }
-}
-
-@mixin ids-form-input--disabled {
-  color: var(--IDS-FORM--DISABLED__COLOR);
-  font-style: italic !important;
-  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
-  border: var(--IDS-FORM--DISABLED__BORDER);
-}
-
-@mixin ids-form-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: var(--IDS-FORM--INVALID__BORDER);
-  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
-}
-
-@mixin ids-input-icon {
-  pointer-events: none;
-  position: absolute;
-  top: 50%;
-  right: var(--IDS-INPUT__ICON-RIGHT);
-  transform: translateY(-50%);
-}
-
-@mixin ids-label() {
-  display: inline-block;
-  color: var(--IDS-FORM-LABEL__COLOR);
-  font-family: var(--IDS-FORM-LABEL__FONT-FAMILY);
-  font-size: var(--IDS-FORM-LABEL__FONT-SIZE);
-  font-style: normal;
-  font-weight: var(--IDS-FORM-LABEL__FONT-WEIGHT);
-  letter-spacing: var(--IDS-FORM-LABEL__LETTER-SPACING);
-  line-height: var(--IDS-FORM-LABEL__HEIGHT);
-  min-height: 1.25rem;
-  min-width: 1.5rem;
-  margin-bottom: 0.25rem;
-
-  &.ids-label--clickable {
-    cursor: pointer;
-  }
-  &.ids-label--disabled {
-    font-style: italic;
-    color: var(--IDS-FORM-LABEL--DISABLED__COLOR);
-    cursor: default !important;
-  }
-  &.ids-label--no-label {
-    display: none;
-  }
-}
-
-@mixin ids-label-wrapper($marginRight: 0.5rem) {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  margin-bottom: 0.313rem;
-  margin-right: $marginRight;
-  .ids-label-tooltip-wrapper {
-    label {
-      display: inline;
-      top: -0.188rem;
-      position: relative;
-      margin-right: $marginRight;
-    }
-  }
-}
-
-@mixin ids-select-chevron {
-  content: "";
-  width: 0.75rem;
-  height: 100%;
-  display: block;
-  position: absolute;
-  transform: rotate(90deg);
-  right: var(--IDS-INPUT__ICON-RIGHT);
-  top: 0;
-  bottom: 0;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
-}
-
-@mixin ids-select-style {
-  @include ids-form-input-base();
-  height: var(--IDS-INPUT__HEIGHT);
-  cursor: pointer;
-  display: inline-block !important;
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--IDS-INPUT__BORDER);
-  width: 100% !important;
-
-  &.ids-input--invalid {
-    @include ids-form-input--invalid();
-  }
-
-  &.ids-input--light {
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-
-    &.ids-input--invalid {
-      @include ids-form-input--invalid();
-    }
-  }
-
-  &:disabled {
-    cursor: default;
-
-    &.ids-input--light {
-      background-color: var(--IDS-COLOR-NEUTRAL-100);
-      @include ids-form-input--disabled();
-    }
-  }
-
-  @include ids-focusable();
-}
-
-/*******
-* A11Y
-********/
-@mixin ids-sr-only {
-  position: absolute;
-  width: 0.063rem;
-  height: 0.063rem;
-  padding: 0;
-  margin: -0.063rem;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@mixin ids-skip-to-content-link {
-  ::slotted(a),
-  a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 1rem;
-    height: 3rem;
-    text-align: center;
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.625rem 0;
-    z-index: 10;
-    font-family: var(--IDS-LINK__FONT-FAMILY);
-    font-size: 1rem;
-    color: var(--IDS-LINK--COLORPRESET-1__COLOR);
-    text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
-    text-decoration: underline;
-    position: absolute;
-    right: 0;
-    left: 0;
-    transform: translateY(-300%);
-    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  ::slotted(a:focus),
-  a:focus {
-    transform: translateY(0);
-    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-    color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
-    text-decoration-color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
-    outline-offset: -0.375rem !important;
-  }
-}
-
-@mixin ids-heading-list {
-  font-style: normal !important;
-  font-family: var(--IDS-HEADING-S__FONT-FAMILY) !important;
-  font-weight: var(--IDS-HEADING-S__FONT-WEIGHT) !important;
-  letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING-DESKTOP) !important;
-  font-size: 1.375rem !important;
-  line-height: 1.875rem !important;
-}

package/src/global/components/link.scss

@@ -1,134 +0,0 @@
-@use "../partials";
-
-@mixin ids-link--active-icon--active($colorpreset: 1) {
-  @if $colorpreset == 1 {
-    background-color: var(--IDS-LINK--COLORPRESET-1-ACTIVE__ICON-BACKGROUND-COLOR);
-  } @else if $colorpreset == 2 {
-    background-color: var(--IDS-LINK--COLORPRESET-2-ACTIVE__ICON-BACKGROUND-COLOR);
-  } @else {
-    background-color: var(--IDS-LINK--COLORPRESET-3-ACTIVE__ICON-BACKGROUND-COLOR);
-  }
-}
-
-@mixin ids-link--active-icon--hover($colorpreset: 1) {
-  @if $colorpreset == 1 {
-    background-color: var(--IDS-LINK--COLORPRESET-1-ACTIVE-HOVER__ICON-BACKGROUND-COLOR);
-  } @else if $colorpreset == 2 {
-    background-color: var(--IDS-LINK--COLORPRESET-2-ACTIVE-HOVER__ICON-BACKGROUND-COLOR);
-  } @else {
-    background-color: var(--IDS-LINK--COLORPRESET-3-ACTIVE-HOVER-ICON-BACKGROUND-COLOR);
-  }
-}
-
-@mixin ids-link--active-icon($colorpreset: 1) {
-  .ids-icon {
-    margin-top: 0.25rem;
-    display: inline-flex;
-    border-radius: 100%;
-    width: 1rem;
-    height: 1rem;
-    align-items: center;
-    justify-content: center;
-    padding: 0.188rem;
-  }
-  &.ids-link--active {
-    .ids-icon {
-      @include ids-link--active-icon--active($colorpreset);
-    }
-  }
-  &:hover,
-  &:focus-within {
-    .ids-icon {
-      @include ids-link--active-icon--hover($colorpreset);
-    }
-  }
-}
-
-.ids-link {
-  font-family: var(--IDS-LINK__FONT-FAMILY);
-  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  gap: 0.5rem;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: flex-start;
-  text-decoration: none;
-  position: relative;
-  &:not(:has(.ids-icon)) {
-    text-decoration: underline;
-  }
-
-  @include partials.ids-focusable();
-
-  &:hover,
-  &:focus {
-    text-decoration: underline !important;
-    color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
-    .ids-link__icon:has(+ .ids-link__icon--hover) {
-      display: none;
-    }
-    .ids-link__icon--hover {
-      display: inline-flex;
-    }
-  }
-  &.ids-link--block {
-    display: flex;
-  }
-  &.ids-link--underlined {
-    text-decoration: underline;
-  }
-
-  &.ids-link--active-icon {
-    text-decoration: none !important;
-    @include ids-link--active-icon();
-    &.ids-link--color-2 {
-      @include ids-link--active-icon(2);
-    }
-    &.ids-link--color-3 {
-      @include ids-link--active-icon(3);
-    }
-  }
-
-  &.ids-link--color-2 {
-    color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-    text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-    &:hover,
-    &:focus {
-      color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
-      text-decoration-color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
-    }
-  }
-  &.ids-link--color-3 {
-    color: var(--IDS-LINK--COLORPRESET-3__COLOR);
-    text-decoration-color: var(--IDS-LINK--COLORPRESET-3__COLOR);
-    &:hover,
-    &:focus {
-      color: var(--IDS-LINK--COLORPRESET-3__HOVER-COLOR);
-      text-decoration-color: var(--IDS-LINK--COLORPRESET-3__HOVER-COLOR);
-    }
-  }
-  &.ids-link--light {
-    color: var(--IDS-COLOR-NEUTRAL-100) !important;
-    text-decoration-color: var(--IDS-COLOR-NEUTRAL-100) !important;
-    &:focus {
-      outline-color: var(--IDS-COLOR-NEUTRAL-100) !important;
-    }
-    &:hover {
-      color: var(--IDS-COLOR-NEUTRAL-100) !important;
-    }
-  }
-  .ids-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.5rem;
-  }
-  .ids-link__icon {
-    display: inline-flex;
-  }
-  .ids-link__icon--hover {
-    display: none;
-  }
-}