@ship-ui/core 0.19.5 → 0.22.0

package/styles/components/ship-range-slider.scss

@@ -1,421 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipRangeSlider: true !default;
-
-@if $shipRangeSlider == true {
-  sh-range-slider {
-    --rs-h: #{p2r(40)};
-    --rs-f: var(--paragraph-30);
-    --rs-unit-g: #{p2r(12)};
-    --rs-unit-c: var(--base-8);
-    --rst: var(--base-3);
-    --rst-bc: var(--base-1);
-    --rst-bg: var(--base-4);
-    --rst-h: #{p2r(8)};
-    --rst-s: calc(var(--shape-2) / 2);
-    --rs-thumb-c: var(--base-8);
-    --rs-thumb-bc: var(--base-1);
-    --rs-thumb-value-bg: var(--base-4);
-    --rs-thumb-arrow: var(--rs-thumb-value-bg);
-    --rs-thumb-value-c: var(--base-8);
-    --rs-thumb-si: #{p2r(16)};
-    --rs-thumb-w: var(--rs-thumb-si);
-    --rs-thumb-s: calc(var(--rs-thumb-w) / 2);
-
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    font: var(--rs-f);
-
-    &.sharp {
-      --rst-s: #{p2r(2)};
-      --rs-thumb-s: #{p2r(2)};
-      --rs-thumb-bc: transparent !important;
-    }
-
-    .label {
-      display: flex;
-      align-items: center;
-      gap: p2r(8);
-      padding-bottom: p2r(4);
-
-      > label {
-        display: flex;
-        align-items: center;
-        gap: p2r(4);
-      }
-
-      sh-icon {
-        color: var(--grey-500);
-        font-size: p2r(16);
-      }
-
-      &:empty {
-        display: none;
-      }
-    }
-
-    &[readonly]:not([readonly='false']),
-    &:has(input[type='range'][readonly]:not([readonly='false'])),
-    &[disabled]:not([disabled='false']),
-    &:has(input[type='range'][disabled]:not([disabled='false'])) {
-      opacity: 0.4;
-      pointer-events: none;
-      user-select: none;
-      cursor: initial;
-    }
-
-    &:has(input[type='range'][readonly]),
-    &.always-show {
-      .thumb .value-indicator {
-        opacity: 1;
-      }
-    }
-
-    input[type='range'] {
-      appearance: none;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      inset: 0;
-      opacity: 0;
-      margin: 0;
-      z-index: 1000;
-    }
-
-    .input-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      min-height: var(--rs-h);
-      position: relative;
-      gap: var(--rs-unit-g);
-    }
-
-    .thumb-wrap {
-      position: absolute;
-      top: 0;
-    }
-
-    .thumb {
-      position: relative;
-      margin-top: calc(-1 * var(--rs-thumb-si) / 4);
-      width: var(--rs-thumb-w);
-      height: var(--rs-thumb-si);
-      border-radius: var(--rs-thumb-s);
-      background-color: var(--rs-thumb-c);
-      border: 1px solid var(--rs-thumb-bc);
-      box-shadow: var(--box-shadow-20);
-      transform: translateX(-50%);
-    }
-
-    .track-wrap {
-      position: relative;
-      width: 100%;
-      height: var(--rst-h);
-    }
-
-    .track {
-      position: relative;
-      width: 100%;
-      height: var(--rst-h);
-      border-radius: var(--rst-s);
-      background-color: var(--rst);
-      border: 1px solid var(--rst-bc);
-      overflow: hidden;
-    }
-
-    .track-filled {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      background: var(--rst-bg);
-      width: 0;
-    }
-
-    .min-indicator,
-    .max-indicator {
-      white-space: nowrap;
-      color: var(--rs-unit-c);
-    }
-
-    input[type='range']:hover ~ .thumb-wrap .value-indicator,
-    input[type='range']:focus ~ .thumb-wrap .value-indicator {
-      opacity: 1;
-    }
-
-    .value-indicator {
-      position: absolute;
-      top: p2r(-30);
-      height: p2r(24);
-      min-width: p2r(24);
-      border-radius: var(--shape-2);
-      left: 50%;
-      margin: auto;
-      transform: translateX(-50%);
-      padding: p2r(4 8);
-      background: var(--rs-thumb-value-bg);
-      color: var(--rs-thumb-value-c);
-      white-space: nowrap;
-      opacity: 0;
-      transition: opacity 125ms linear;
-      user-select: none;
-      pointer-events: none;
-
-      &:after {
-        content: '';
-        border-top: p2r(5) solid var(--rs-thumb-arrow);
-        border-left: p2r(5) solid transparent;
-        border-right: p2r(5) solid transparent;
-        position: absolute;
-        top: calc(100% - 1px);
-        left: 50%;
-        margin-left: p2r(-5);
-      }
-    }
-
-    &.primary {
-      --rst-bg: var(--primary-8);
-      --rs-thumb-arrow: var(--primary-8);
-      --rs-thumb-value-bg: var(--primary-8);
-      --rs-thumb-value-c: #fff;
-    }
-
-    &.accent {
-      --rst-bg: var(--accent-8);
-      --rs-thumb-arrow: var(--accent-8);
-      --rs-thumb-value-bg: var(--accent-8);
-      --rs-thumb-value-c: #fff;
-    }
-
-    &.warn {
-      --rst-bg: var(--warn-8);
-      --rs-thumb-arrow: var(--warn-8);
-      --rs-thumb-value-bg: var(--warn-8);
-      --rs-thumb-value-c: #fff;
-    }
-
-    &.error {
-      --rst-bg: var(--error-8);
-      --rs-thumb-arrow: var(--error-8);
-      --rs-thumb-value-bg: var(--error-8);
-      --rs-thumb-value-c: #fff;
-    }
-
-    &.success {
-      --rst-bg: var(--success-8);
-      --rs-thumb-arrow: var(--success-8);
-      --rs-thumb-value-bg: var(--success-8);
-      --rs-thumb-value-c: #fff;
-    }
-
-    &.simple {
-      --rst-h: #{p2r(16)};
-      --rst-s: var(--shape-2);
-
-      .thumb {
-        width: 1px;
-        height: var(--rst-h);
-        margin-top: 0;
-        border-radius: 0;
-        border: none;
-        box-shadow: none;
-      }
-
-      &.primary {
-        --rst-bg: var(--primary-8);
-        --rst: var(--primary-2);
-        --rs-thumb-c: var(--primary-8);
-        --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--primary-8);
-        --rs-thumb-value-c: var(--primary-2);
-      }
-
-      &.accent {
-        --rst-bg: var(--accent-8);
-        --rst: var(--accent-2);
-        --rs-thumb-c: var(--accent-8);
-        --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--accent-8);
-        --rs-thumb-value-c: var(--accent-2);
-      }
-
-      &.warn {
-        --rst-bg: var(--warn-8);
-        --rst: var(--warn-2);
-        --rs-thumb-c: var(--warn-8);
-        --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--warn-8);
-        --rs-thumb-value-c: var(--warn-2);
-      }
-
-      &.error {
-        --rst-bg: var(--error-8);
-        --rst: var(--error-2);
-        --rs-thumb-c: var(--error-8);
-        --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--error-8);
-        --rs-thumb-value-c: var(--error-2);
-      }
-
-      &.success {
-        --rst-bg: var(--success-8);
-        --rst: var(--success-2);
-        --rs-thumb-c: var(--success-8);
-        --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--success-8);
-        --rs-thumb-value-c: var(--success-2);
-      }
-    }
-
-    &.outlined {
-      --rst: var(--base-1);
-      --rst-bc: var(--base-4);
-      --rs-thumb-c: var(--base-6);
-      --rs-thumb-bc: var(--base-1);
-      --rs-thumb-arrow: var(--base-4);
-
-      &.primary,
-      &.accent,
-      &.warn,
-      &.error,
-      &.success {
-        --rst: var(--base-2);
-      }
-
-      &.primary {
-        --rst-bg: var(--primary-4);
-        --rst-bc: var(--primary-8);
-        --rs-thumb-c: var(--primary-8);
-        --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--primary-4);
-        --rs-thumb-value-c: var(--primary-8);
-        --rs-thumb-arrow: var(--primary-4);
-      }
-
-      &.accent {
-        --rs-thumb-c: var(--accent-4);
-        --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--accent-4);
-        --rs-thumb-value-c: var(--accent-8);
-        --rs-thumb-arrow: var(--accent-4);
-      }
-
-      &.warn {
-        --rs-thumb-c: var(--warn-4);
-        --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--warn-4);
-        --rs-thumb-value-c: var(--warn-8);
-        --rs-thumb-arrow: var(--warn-4);
-      }
-
-      &.error {
-        --rs-thumb-c: var(--error-4);
-        --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--error-4);
-        --rs-thumb-value-c: var(--error-8);
-        --rs-thumb-arrow: var(--error-4);
-      }
-
-      &.success {
-        --rs-thumb-c: var(--success-4);
-        --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--success-4);
-        --rs-thumb-value-c: var(--success-8);
-        --rs-thumb-arrow: var(--success-4);
-      }
-    }
-
-    &.flat {
-      --rs-thumb-c: #fff;
-      --rs-thumb-bc: var(--base-4);
-
-      &.primary,
-      &.accent,
-      &.warn,
-      &.error,
-      &.success {
-        --rst: var(--base-3);
-        --rs-thumb-c: #fff;
-        --rs-thumb-bc: var(--base-4);
-        --rs-thumb-value-bg: var(--base-8);
-        --rs-thumb-value-c: #fff;
-      }
-
-      &.primary {
-        --rst-bg: var(--primary-8);
-        --rs-thumb-value-bg: var(--primary-8);
-      }
-
-      &.accent {
-        --rst-bg: var(--accent-8);
-        --rs-thumb-value-bg: var(--accent-8);
-      }
-
-      &.warn {
-        --rst-bg: var(--warn-8);
-        --rs-thumb-value-bg: var(--warn-8);
-      }
-
-      &.error {
-        --rst-bg: var(--error-8);
-        --rs-thumb-value-bg: var(--error-8);
-      }
-
-      &.success {
-        --rst-bg: var(--success-8);
-        --rs-thumb-value-bg: var(--success-8);
-      }
-    }
-
-    &.raised {
-      --rst-bg: var(--base-g2);
-      --rs-thumb-c: #fff;
-      --rs-thumb-bc: var(--base-4);
-
-      &.primary,
-      &.accent,
-      &.warn,
-      &.error,
-      &.success {
-        --rst: var(--base-3);
-        --rs-thumb-c: #fff;
-        --rs-thumb-bc: var(--base-4);
-        --rs-thumb-value-bg: var(--base-g6);
-        --rs-thumb-value-c: #fff;
-      }
-
-      &.primary {
-        --rst-bg: var(--primary-g2);
-        --rs-thumb-arrow: var(--primary-8);
-        --rs-thumb-value-bg: var(--primary-g3);
-      }
-
-      &.accent {
-        --rst-bg: var(--accent-g2);
-        --rs-thumb-arrow: var(--accent-8);
-        --rs-thumb-value-bg: var(--accent-8);
-      }
-
-      &.warn {
-        --rst-bg: var(--warn-g2);
-        --rs-thumb-arrow: var(--warn-8);
-        --rs-thumb-value-bg: var(--warn-8);
-      }
-
-      &.error {
-        --rst-bg: var(--error-g2);
-        --rs-thumb-arrow: var(--error-8);
-        --rs-thumb-value-bg: var(--error-8);
-      }
-
-      &.success {
-        --rst-bg: var(--success-g2);
-        --rs-thumb-arrow: var(--success-8);
-        --rs-thumb-value-bg: var(--success-8);
-      }
-    }
-  }
-}

package/styles/components/ship-select.scss

@@ -1,153 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipSelect: false !default;
-
-@if $shipSelect == true {
-  sh-select {
-    --miw: #{p2r(210)};
-    --select-option-mih: min-content;
-    --select-options-mh: #{p2r(180)};
-
-    display: flex;
-
-    sh-form-field {
-      display: flex;
-      --ff-mw: var(--miw);
-    }
-
-    sh-popover {
-      flex: 1 0;
-
-      &:has(.ship-options:empty) .popover {
-        opacity: 0;
-      }
-    }
-
-    .selected-value {
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: p2r(4);
-      color: var(--base-8);
-
-      input {
-        margin: 0;
-      }
-
-      &.is-selected {
-        color: var(--base-12);
-      }
-    }
-
-    sh-form-field .input-wrap .input {
-      position: relative;
-      display: flex;
-      flex-wrap: wrap;
-
-      --ff-space: #{p2r(7 10)};
-
-      textarea,
-      input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-        position: absolute;
-      }
-
-      &.show-search-text {
-        input {
-          opacity: 1;
-          height: initial;
-          min-width: min-content;
-          field-sizing: content;
-          font: var(--paragraph-30);
-          position: relative;
-        }
-
-        textarea {
-          opacity: 1;
-          height: initial;
-          margin: p2r(4 0 0);
-        }
-      }
-    }
-
-    sh-form-field.small .input-wrap .input {
-      --ff-space: #{p2r(5 8)};
-
-      sh-chip {
-        --chip-h: #{p2r(20)};
-        font-size: 80%;
-      }
-    }
-  }
-
-  .ship-options {
-    padding: p2r(8 0);
-    display: flex;
-    flex-direction: column;
-    max-height: var(--select-options-mh);
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    p[title] {
-      padding: p2r(4 16);
-    }
-
-    sh-divider {
-      margin: p2r(8 0);
-    }
-
-    .option {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      min-height: var(--select-option-mih);
-      margin: p2r(0 8);
-      padding: p2r(8);
-      gap: p2r(8);
-      width: calc(100% - #{p2r(16)});
-      border-radius: var(--shape-2);
-      appearance: none;
-      background-color: transparent;
-      border: 0;
-      cursor: pointer;
-      color: var(--base-12);
-      user-select: none;
-
-      &[disabled] {
-        opacity: 0.3;
-        cursor: initial;
-
-        &:hover {
-          background-color: transparent;
-        }
-      }
-
-      sh-icon {
-        font-size: p2r(16);
-      }
-
-      span.placeholder {
-        color: var(--base-7);
-      }
-
-      &.active,
-      &:checked,
-      &:hover {
-        background-color: var(--base-2);
-        color: var(--base-12);
-      }
-
-      &.focused {
-        background-color: var(--primary-1);
-        color: var(--base-12);
-
-        &:hover {
-          background-color: var(--primary-2);
-        }
-      }
-    }
-  }
-}