@inntechcorp/it-design 3.1.24 → 4.0.0-beta.2

package/dist/css/select.css

@@ -0,0 +1,624 @@
+@layer components {
+
+  /* =============================================================
+     SELECT - Scoped size tokens (overridden by size classes)
+     ============================================================= */
+  .itd-select,
+  .itd-select-portal {
+    --_h: var(--itd-size-df-h);
+    --_px: calc(var(--itd-spacing) * 3);
+    --_font: var(--itd-size-df-font);
+    --_fw: var(--itd-font-weight-normal);
+    --_img: 1.25rem;
+    --_arrow: 1rem;
+
+    &.itd-select-xs {
+      --_h: var(--itd-size-xs-h);
+      --_px: calc(var(--itd-spacing) * 2.5);
+      --_font: var(--itd-size-xs-font);
+      --_fw: var(--itd-font-weight-normal);
+      --_img: 0.875rem;
+      --_arrow: 0.825rem;
+    }
+
+    &.itd-select-sm {
+      --_h: var(--itd-size-sm-h);
+      --_px: calc(var(--itd-spacing) * 2.5);
+      --_font: var(--itd-size-sm-font);
+      --_fw: var(--itd-font-weight-normal);
+      --_img: 1rem;
+      --_arrow: 0.825rem;
+    }
+
+    &.itd-select-md {
+      --_h: var(--itd-size-md-h);
+      --_px: calc(var(--itd-spacing) * 3);
+      --_font: var(--itd-size-md-font);
+      --_fw: var(--itd-font-weight-normal);
+      --_img: 1.125rem;
+      --_arrow: 1rem;
+    }
+
+    &.itd-select-df {
+      --_h: var(--itd-size-df-h);
+      --_px: calc(var(--itd-spacing) * 3);
+      --_font: var(--itd-size-df-font);
+      --_fw: var(--itd-font-weight-normal);
+      --_img: 1.25rem;
+      --_arrow: 1rem;
+    }
+
+    &.itd-select-lg {
+      --_h: var(--itd-size-lg-h);
+      --_px: calc(var(--itd-spacing) * 3.75);
+      --_font: var(--itd-size-lg-font);
+      --_fw: var(--itd-font-weight-medium);
+      --_img: 1.25rem;
+      --_arrow: 1.125rem;
+    }
+
+    &.itd-select-xlg {
+      --_h: var(--itd-size-xlg-h);
+      --_px: calc(var(--itd-spacing) * 3.75);
+      --_font: var(--itd-size-xlg-font);
+      --_fw: var(--itd-font-weight-medium);
+      --_img: 1.375rem;
+      --_arrow: 1.125rem;
+    }
+  }
+
+  /* =============================================================
+     MAIN WRAPPER (.itd-select)
+     ============================================================= */
+  .itd-select {
+    position: relative;
+    height: max-content;
+
+    & ul {
+      margin-block-start: 0;
+      margin-block-end: 0;
+      padding-inline-start: 0;
+    }
+  }
+
+  /* =============================================================
+     SELECTOR (.itd-select-selector)
+     ============================================================= */
+  .itd-select-selector {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    user-select: none;
+    height: var(--_h);
+    padding-inline: var(--_px);
+    border-radius: calc(var(--itd-border-radius) - 0.125rem);
+    transition-property: border-color;
+    transition-duration: var(--itd-transition-duration);
+    transition-timing-function: var(--itd-transition-timing-function);
+
+    &[data-show-search="false"] {
+      cursor: pointer;
+    }
+
+    & > svg {
+      width: auto;
+      height: 1rem;
+    }
+
+    & .itd-svg > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    & .itd-image.itd-svg {
+      display: flex;
+      align-items: center;
+      margin-right: 0.4375rem;
+      min-width: var(--_img);
+      min-height: var(--_img);
+    }
+
+    & img,
+    & .itd-svg svg {
+      width: var(--_img);
+      height: var(--_img);
+    }
+
+    & .itd-icon {
+      color: var(--itd-color-icon);
+      font-size: var(--_img);
+    }
+
+    & .itd-select-arrow {
+      transition-property: transform;
+      transition-duration: var(--itd-transition-duration);
+      transition-timing-function: var(--itd-transition-timing-function);
+
+      & svg {
+        width: var(--_arrow);
+        height: var(--_arrow);
+        color: var(--itd-color-icon);
+      }
+    }
+
+    & .itd-select-arrow[data-open] {
+      transform: rotate(-180deg);
+    }
+
+    & .itd-select-status-error {
+      border: 1px solid var(--itd-color-error-border);
+      border-radius: calc(var(--itd-border-radius) - 0.125rem);
+    }
+  }
+
+  /* =============================================================
+     SELECTION ITEM & LABEL
+     ============================================================= */
+  .itd-select-selection-item {
+    display: flex;
+    flex-grow: 1;
+    height: 100%;
+  }
+
+  .itd-select-selection-label {
+    border-radius: calc(var(--itd-border-radius) - 0.125rem);
+    transition-property: background-color;
+    transition-duration: var(--itd-transition-duration);
+    transition-timing-function: var(--itd-transition-timing-function);
+
+    & [type=text] {
+      height: var(--_h);
+      font-size: var(--_font);
+      color: var(--itd-color-text);
+      caret-color: var(--itd-color-text);
+
+      &::placeholder {
+        color: rgba(0, 0, 0, 0);
+      }
+    }
+
+    & span,
+    & label {
+      color: var(--itd-color-text);
+      font-weight: var(--_fw);
+
+      &::before {
+        color: var(--itd-color-text-muted);
+        transition-property: transform;
+        transition-duration: var(--itd-transition-duration);
+        transition-timing-function: var(--itd-transition-timing-function);
+      }
+    }
+
+    &.itd-select-selection-item-single {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      border-radius: calc(var(--itd-border-radius) - 0.125rem);
+      transition-property: background-color;
+      transition-duration: var(--itd-transition-duration);
+      transition-timing-function: var(--itd-transition-timing-function);
+
+      & span,
+      & label {
+        font-size: var(--_font);
+        line-height: var(--_font);
+        font-weight: var(--_fw);
+      }
+
+      & input,
+      & input::placeholder {
+        font-weight: var(--_fw);
+      }
+
+      & input {
+        font-size: var(--_font);
+        color: var(--itd-color-text);
+
+        &::placeholder {
+          color: var(--itd-color-placeholder);
+        }
+      }
+    }
+  }
+
+  /* =============================================================
+     SUFFIX, PREFIX, LOCKED
+     ============================================================= */
+  .itd-select-prefix {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin-right: 0.4375rem;
+  }
+
+  .itd-select-suffix {
+    display: grid;
+    grid-column-gap: 0.3125rem;
+    grid-auto-flow: column;
+    align-items: center;
+    justify-self: flex-end;
+    position: relative;
+  }
+
+  .itd-select-locked {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: var(--itd-color-text-neutral);
+  }
+
+  .itd-select-failed {
+    margin: 0;
+    float: left;
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &::before {
+      padding: 0.25rem;
+      border-radius: 3.125rem;
+      background-color: var(--itd-color-error);
+    }
+
+    & svg circle {
+      fill: var(--itd-color-error);
+    }
+
+    & svg path {
+      fill: var(--itd-color-error-text);
+    }
+  }
+
+  /* =============================================================
+     VARIANT: DEFAULT
+     ============================================================= */
+  .itd-select-default {
+
+    & .itd-select-selector {
+      box-shadow: var(--itd-box-shadow);
+      outline: 0 solid transparent;
+      outline-offset: var(--itd-ring-offset);
+      border: 1px solid var(--itd-color-border);
+      background-color: var(--itd-color-background-bordered);
+      transition: outline 100ms linear,
+                  border-color var(--itd-transition-duration) var(--itd-transition-timing-function);
+    }
+
+    &.itd-select-open .itd-select-selector {
+      border-color: var(--itd-color-border-focus);
+    }
+
+    &.itd-select-open.itd-select-status-error .itd-select-selector {
+      border-color: var(--itd-color-error-border);
+    }
+
+    &.keyboard-focus .itd-select-selector {
+      border-color: var(--itd-color-border-focus);
+      outline: var(--itd-ring-width) solid var(--itd-color-border-focus-ring);
+    }
+
+    &.keyboard-focus.itd-select-status-error .itd-select-selector {
+      border-color: var(--itd-color-error-border);
+      outline: var(--itd-ring-width) solid var(--itd-color-error-outline);
+    }
+
+    &:not(.itd-select-open):not(.itd-select-disabled):not(.keyboard-focus) .itd-select-selector:hover {
+      border-color: var(--itd-color-border-hover);
+    }
+
+    &:not(.itd-select-disabled):not(.itd-select-open) .itd-select-selector:active {
+      border-color: var(--itd-color-border-focus);
+    }
+
+    &.itd-select-status-error:not(.itd-select-disabled):not(.itd-select-open) .itd-select-selector:active {
+      border-color: var(--itd-color-error-border);
+    }
+  }
+
+  /* =============================================================
+     VARIANT: FILLED
+     ============================================================= */
+  .itd-select-filled {
+
+    & .itd-select-selector {
+      border: none;
+      background-color: var(--itd-color-background-alt);
+      outline: 0 solid transparent;
+      outline-offset: var(--itd-ring-offset);
+      transition: outline 100ms linear,
+                  background-color var(--itd-transition-duration) var(--itd-transition-timing-function);
+    }
+
+    &.itd-select-open .itd-select-selector {
+      background-color: var(--itd-color-background-alt-hover);
+    }
+
+    &.keyboard-focus .itd-select-selector {
+      outline: var(--itd-ring-width) solid var(--itd-color-border-focus-ring);
+      background-color: var(--itd-color-background-alt-hover);
+    }
+
+    &.keyboard-focus.itd-select-status-error .itd-select-selector {
+      outline: var(--itd-ring-width) solid var(--itd-color-error-outline);
+    }
+
+    &:not(.itd-select-open):not(.itd-select-disabled):not(.keyboard-focus) .itd-select-selector:hover {
+      background-color: var(--itd-color-background-alt-hover);
+    }
+
+    &:not(.itd-select-disabled):not(.itd-select-open) .itd-select-selector:active {
+      background-color: var(--itd-color-background-alt-hover);
+    }
+  }
+
+  /* =============================================================
+     DISABLED & LOCKED
+     ============================================================= */
+  .itd-select[disabled] .itd-select-selector {
+    background-color: var(--itd-color-disabled-bg);
+    border: 1px solid var(--itd-color-disabled-border);
+    border-radius: calc(var(--itd-border-radius) - 0.125rem);
+    cursor: not-allowed;
+
+    & .itd-select-selection-item input[disabled] {
+      color: var(--itd-color-disabled-text);
+
+      &::placeholder {
+        color: var(--itd-color-disabled-text);
+      }
+    }
+
+    & .itd-select-arrow svg {
+      color: var(--itd-color-disabled-text);
+    }
+
+    & .itd-image {
+      filter: grayscale(100%);
+      opacity: 0.5;
+    }
+  }
+
+  .itd-select.itd-select-locked .itd-select-selection-item input {
+    pointer-events: none;
+  }
+
+  /* =============================================================
+     DROPDOWN WRAPPER
+     ============================================================= */
+  .itd-select-dropdown-wrapper {
+    min-width: 100%;
+    min-height: 2.5rem;
+    overflow: hidden;
+    position: absolute;
+    z-index: 15;
+    transform-box: fill-box;
+    transform-origin: 50% 1%;
+    outline: none;
+
+    & ul {
+      min-width: max-content;
+    }
+
+    &[data-position="bottom"] {
+      top: calc(var(--_h) + 0.25rem);
+    }
+
+    &[data-position="top"] {
+      bottom: calc(var(--_h) + 0.25rem);
+    }
+
+    &[data-direction="left"] {
+      left: 0;
+    }
+
+    &[data-direction="right"] {
+      right: 0;
+    }
+
+    &[data-portal="true"] {
+      position: fixed;
+      min-width: auto;
+
+      &[data-position="top"] {
+        transform-origin: 50% 100%;
+      }
+    }
+  }
+
+  /* =============================================================
+     DROPDOWN BODY (.itd-select-dropdown)
+     ============================================================= */
+  .itd-select-dropdown {
+    background-color: var(--itd-color-background-select);
+    border-radius: calc(var(--itd-border-radius) - 0.125rem);
+
+    & .itd-select-dropdown-body {
+      max-height: 18.75rem;
+    }
+
+    &.multi .itd-checkbox {
+      width: 100%;
+      height: 100%;
+      padding-inline: 0.9375rem;
+
+      & .itd-checkbox-inner-wrapper {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .itd-select-default .itd-select-dropdown {
+    border: 1px solid var(--itd-color-border);
+    box-shadow: none;
+  }
+
+  .itd-select-filled .itd-select-dropdown {
+    border: none;
+    box-shadow: var(--itd-color-modal-shadow);
+  }
+
+  .itd-select-dropdown.single .itd-select-item.itd-select-item-option .itd-select-option-single {
+    padding-inline: var(--_px);
+    height: 100%;
+  }
+
+  /* =============================================================
+     OPTIONS
+     ============================================================= */
+  .itd-select-item.itd-select-item-option {
+    display: flex;
+    min-width: max-content;
+    align-items: center;
+    cursor: pointer;
+    padding-block: 0;
+    height: var(--_h);
+
+    &:not(:last-child) {
+      margin-bottom: 0.0625rem;
+    }
+
+    & span,
+    & label {
+      font-size: var(--_font);
+      line-height: var(--_font);
+      font-weight: var(--_fw);
+    }
+
+    &.itd-item-single,
+    &.itd-item-multi {
+      background-color: var(--itd-color-background-select-item);
+
+      & span,
+      & label {
+        color: var(--itd-color-text-neutral);
+      }
+
+      &.itd-item-multi:not(.itd-select-item-option-disabled) {
+        & .itd-checkbox-default input {
+          border-color: var(--itd-color-text-neutral-alpha25);
+        }
+
+        & .itd-checkbox-filled .itd-checkbox-checkmark {
+          background-color: var(--itd-color-text-neutral-alpha10);
+        }
+      }
+
+      & .itd-image {
+        min-width: var(--_img);
+        min-height: var(--_img);
+        margin-right: 0.4375rem;
+
+        & .itd-select-option-image {
+          width: var(--_img);
+          height: var(--_img);
+        }
+
+        & .itd-select-option-icon {
+          color: var(--itd-color-icon);
+          font-size: var(--_img);
+        }
+      }
+    }
+
+    &.itd-select-item-option-active {
+      &.itd-item-single,
+      &.itd-item-multi {
+        background-color: var(--itd-color-background-select-item-hover);
+
+        & span,
+        & label {
+          color: var(--itd-color-text);
+        }
+      }
+
+      &.itd-item-multi:not(.itd-select-item-option-disabled) {
+        & .itd-checkbox-default input {
+          border-color: var(--itd-color-text-neutral-alpha50);
+        }
+
+        & .itd-checkbox-filled .itd-checkbox-checkmark {
+          background-color: var(--itd-color-text-neutral-alpha15);
+        }
+      }
+    }
+
+    &.itd-select-item-option-selected {
+      &.itd-item-single,
+      &.itd-item-multi {
+        background-color: var(--itd-color-background-select-item-selected);
+
+        & span,
+        & label {
+          color: var(--itd-color-text);
+        }
+      }
+
+      &.itd-item-multi:not(.itd-select-item-option-disabled) {
+        & .itd-checkbox-default input {
+          border-color: var(--itd-primary);
+        }
+
+        & .itd-checkbox-filled .itd-checkbox-checkmark {
+          background-color: var(--itd-primary);
+        }
+      }
+    }
+
+    &.itd-select-item-option-disabled {
+      &.itd-item-single,
+      &.itd-item-multi {
+        & span,
+        & label {
+          color: var(--itd-color-disabled-text);
+        }
+      }
+    }
+  }
+
+  /* =============================================================
+     OPTION SINGLE
+     ============================================================= */
+  .itd-select-option-single {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+
+    &[data-disabled="true"] {
+      cursor: not-allowed;
+    }
+
+    & span {
+      white-space: nowrap;
+    }
+  }
+
+  /* =============================================================
+     OPTION IMAGE WRAPPER
+     ============================================================= */
+  .itd-select-option-image-wrapper {
+    & img {
+      pointer-events: none;
+      display: block;
+    }
+  }
+
+  /* =============================================================
+     PORTAL WRAPPER
+     ============================================================= */
+  .itd-select-portal {
+    position: relative;
+    height: max-content;
+
+    & ul {
+      margin-block-start: 0;
+      margin-block-end: 0;
+      padding-inline-start: 0;
+    }
+  }
+}

package/dist/css/spin.css

@@ -0,0 +1,31 @@
+@layer components {
+  .itd-spin {
+    position: relative;
+  }
+
+  .itd-spin-spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .itd-spin-children {
+    transition-property: opacity;
+    transition-duration: 500ms;
+    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+    pointer-events: auto;
+    opacity: 1;
+
+    &[data-updating] {
+      pointer-events: none;
+    }
+
+    &[data-updating][data-opacity] {
+      opacity: 0.5;
+    }
+  }
+}

package/dist/css/status.css

@@ -0,0 +1,74 @@
+@layer components {
+  .itd-status {
+    width: max-content;
+    border-radius: 4px;
+
+    & > span {
+      text-align: center;
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    &.itd-status-stretch {
+      width: 100%;
+    }
+
+    &.itd-status-bold > span {
+      font-weight: 600;
+    }
+
+    &.itd-status-xs {
+      padding: calc(var(--itd-spacing) * 1) calc(var(--itd-spacing) * 2);
+
+      & > span {
+        font-size: 9px;
+        font-weight: 500;
+      }
+    }
+
+    &.itd-status-sm {
+      padding: calc(var(--itd-spacing) * 1) calc(var(--itd-spacing) * 2);
+
+      & > span {
+        font-size: 10px;
+        font-weight: 500;
+      }
+    }
+
+    &.itd-status-md {
+      padding: calc(var(--itd-spacing) * 1) calc(var(--itd-spacing) * 2);
+
+      & > span {
+        font-size: 11px;
+        font-weight: 500;
+      }
+    }
+
+    &.itd-status-df {
+      padding: calc(var(--itd-spacing) * 1.5) calc(var(--itd-spacing) * 2.5);
+
+      & > span {
+        font-size: 12px;
+        font-weight: 500;
+      }
+    }
+
+    &.itd-status-lg {
+      padding: calc(var(--itd-spacing) * 2) calc(var(--itd-spacing) * 3);
+
+      & > span {
+        font-size: 12.4px;
+        font-weight: 500;
+      }
+    }
+
+    &.itd-status-xlg {
+      padding: calc(var(--itd-spacing) * 2.5) calc(var(--itd-spacing) * 3.5);
+
+      & > span {
+        font-size: 12.6px;
+        font-weight: 500;
+      }
+    }
+  }
+}