@ship-ui/core 0.19.5 → 0.22.0

package/styles/components/ship-toggle.scss

@@ -1,255 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipToggle: true !default;
-
-@if $shipToggle == true {
-  sh-toggle {
-    --toggle-bg: var(--base-4);
-    --toggle-b: 0;
-    --togglek-bg: var(--base-2);
-    --togglek-bs: var(--box-shadow-20);
-
-    display: flex;
-    align-items: center;
-    gap: p2r(8);
-    cursor: pointer;
-    user-select: none;
-    position: relative;
-
-    &:focus-visible > .box,
-    &:has(input:focus-visible) > .box {
-      outline: 2px solid var(--primary-8);
-      outline-offset: 2px;
-    }
-
-    label {
-      display: flex;
-      align-items: center;
-      gap: p2r(8);
-      position: relative;
-      z-index: 1;
-    }
-
-    .box {
-      display: block;
-      width: p2r(34);
-      min-width: p2r(34);
-      height: p2r(20);
-      cursor: pointer;
-      position: relative;
-      border-radius: 999px;
-      background: var(--toggle-bg);
-      border: var(--toggle-b);
-      transition: background 150ms linear;
-    }
-
-    > input[type='checkbox'] {
-      appearance: none;
-      position: absolute;
-      inset: 0;
-      cursor: pointer;
-      z-index: 0;
-      margin: 0;
-
-      &:focus,
-      &:focus-visible {
-        outline: none;
-      }
-    }
-
-    &:has(> input:not(.internal-input)) > input.internal-input {
-      display: none;
-    }
-
-    &:has(input[disabled]),
-    &[disabled]:not([disabled='false']) {
-      opacity: 0.5;
-      pointer-events: none;
-      user-select: none;
-      cursor: initial;
-    }
-
-    .knob {
-      position: absolute;
-      top: p2r(2);
-      left: p2r(2);
-      width: p2r(16);
-      height: p2r(16);
-      border-radius: 50%;
-      background: var(--togglek-bg);
-      box-shadow: var(--togglek-bs);
-      box-sizing: border-box;
-      transition: left 125ms ease-in-out;
-    }
-
-    &:has(input[type='checkbox']:checked),
-    &.active {
-      --togglek-bg: var(--base-8);
-
-      .knob {
-        left: p2r(16);
-      }
-
-      &.primary {
-        --toggle-bg: var(--primary-3);
-        --togglek-bg: var(--primary-8);
-      }
-
-      &.accent {
-        --toggle-bg: var(--accent-3);
-        --togglek-bg: var(--accent-8);
-      }
-
-      &.warn {
-        --toggle-bg: var(--warn-3);
-        --togglek-bg: var(--warn-8);
-      }
-
-      &.error {
-        --toggle-bg: var(--error-3);
-        --togglek-bg: var(--error-8);
-      }
-
-      &.success {
-        --toggle-bg: var(--success-3);
-        --togglek-bg: var(--success-8);
-      }
-    }
-
-    &.outlined {
-      --toggle-bg: var(--base-1);
-      --togglek-bg: var(--base-5);
-      --togglek-bs: none;
-      --toggle-b: 1px solid var(--base-5);
-
-      .knob {
-        width: p2r(14);
-        height: p2r(14);
-      }
-
-      &.active {
-        --togglek-bg: var(--base-8);
-        --toggle-b: 1px solid var(--base-8);
-
-        &.primary {
-          --togglek-bg: var(--primary-8);
-          --toggle-b: 1px solid var(--primary-8);
-        }
-
-        &.accent {
-          --togglek-bg: var(--accent-8);
-          --toggle-b: 1px solid var(--accent-8);
-        }
-
-        &.warn {
-          --togglek-bg: var(--warn-8);
-          --toggle-b: 1px solid var(--warn-8);
-        }
-
-        &.error {
-          --togglek-bg: var(--error-8);
-          --toggle-b: 1px solid var(--error-8);
-        }
-
-        &.success {
-          --togglek-bg: var(--success-8);
-          --toggle-b: 1px solid var(--success-8);
-        }
-      }
-    }
-
-    &.simple {
-      --togglek-bg: #fff;
-
-      &:has(input[type='checkbox']:checked),
-      &.active {
-        --togglek-bg: var(--base-8);
-
-        &.primary {
-          --togglek-bg: var(--primary-8);
-          --toggle-bg: var(--primary-3);
-        }
-
-        &.accent {
-          --togglek-bg: var(--accent-8);
-          --toggle-bg: var(--accent-3);
-        }
-
-        &.warn {
-          --togglek-bg: var(--warn-8);
-          --toggle-bg: var(--warn-3);
-        }
-
-        &.error {
-          --togglek-bg: var(--error-8);
-          --toggle-bg: var(--error-3);
-        }
-
-        &.success {
-          --togglek-bg: var(--success-8);
-          --toggle-bg: var(--success-3);
-        }
-      }
-    }
-
-    &.flat {
-      --togglek-bg: #fff;
-
-      &:has(input[type='checkbox']:checked),
-      &.active {
-        --togglek-bg: #fff;
-        --toggle-bg: var(--base-8);
-
-        &.primary {
-          --toggle-bg: var(--primary-8);
-        }
-
-        &.accent {
-          --toggle-bg: var(--accent-8);
-        }
-
-        &.warn {
-          --toggle-bg: var(--warn-8);
-        }
-
-        &.error {
-          --toggle-bg: var(--error-8);
-        }
-
-        &.success {
-          --toggle-bg: var(--success-8);
-        }
-      }
-    }
-
-    &.raised {
-      --togglek-bg: #fff;
-
-      &:has(input[type='checkbox']:checked),
-      &.active {
-        --toggle-bg: var(--base-g2);
-        --togglek-bg: #fff;
-
-        &.primary {
-          --toggle-bg: var(--primary-g2);
-        }
-
-        &.accent {
-          --toggle-bg: var(--accent-g2);
-        }
-
-        &.warn {
-          --toggle-bg: var(--warn-g2);
-        }
-
-        &.error {
-          --toggle-bg: var(--error-g2);
-        }
-
-        &.success {
-          --toggle-bg: var(--success-g2);
-        }
-      }
-    }
-  }
-}

package/styles/components/ship-tooltip.scss

@@ -1,151 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipTooltip: true !default;
-
-%hoverState {
-  opacity: 1;
-  z-index: 0;
-  visibility: visible;
-}
-
-@if $shipTooltip == true {
-  .tooltip {
-    position: relative;
-    display: flex;
-    pointer-events: initial !important;
-
-    &:after {
-      content: '';
-      position: absolute;
-      top: p2r(-8);
-      bottom: p2r(-8);
-      left: p2r(-8);
-      right: p2r(-8);
-      z-index: 1;
-    }
-
-    &.primary + ship-tooltip-wrapper {
-      --tt-bg: var(--primary-2);
-      --tt-c: var(--primary-8);
-    }
-
-    &.accent + ship-tooltip-wrapper {
-      --tt-bg: var(--accent-2);
-      --tt-c: var(--accent-8);
-    }
-
-    &.warn + ship-tooltip-wrapper {
-      --tt-bg: var(--warn-2);
-      --tt-c: var(--warn-8);
-    }
-
-    &.error + ship-tooltip-wrapper {
-      --tt-bg: var(--error-2);
-      --tt-c: var(--error-8);
-    }
-
-    &.success + ship-tooltip-wrapper {
-      --tt-bg: var(--success-2);
-      --tt-c: var(--success-8);
-    }
-
-    &.active {
-      z-index: 1;
-
-      + ship-tooltip-wrapper {
-        z-index: 1;
-
-        @supports (anchor-name: --anchor) {
-          .tooltip-content {
-            transform: translateY(0) scaleY(1) scaleX(1);
-          }
-        }
-      }
-    }
-  }
-
-  ship-tooltip-wrapper {
-    --tt-bg: var(--base-3);
-    --tt-c: var(--base-12);
-    --tt-mh: #{p2r(136)};
-    --tt-mw: #{p2r(280)};
-    --tt-translate-y: 50%;
-
-    position: fixed;
-    font: var(--paragraph-30);
-    width: max-content;
-    overflow: visible;
-    box-shadow: none;
-    background: transparent;
-    border: 0;
-
-    padding: 0;
-    margin: 0;
-    margin-block-end: p2r(12);
-
-    @supports (anchor-name: --anchor) {
-      inset: unset;
-      justify-self: anchor-center;
-      bottom: anchor(top);
-      position: fixed;
-
-      position-try-order: normal;
-      position-try-fallbacks:
-        flip-block,
-        flip-inline,
-        flip-block flip-inline;
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      bottom: p2r(-12);
-      top: auto;
-      left: 50%;
-      z-index: 1;
-      transform: translateX(-50%);
-      border-width: p2r(6);
-      border-style: solid;
-      border-color: transparent;
-      border-top-color: var(--tt-bg);
-      width: 0;
-      height: 0;
-      opacity: 1;
-    }
-
-    &.below {
-      --tt-translate-y: -50%;
-
-      &:before {
-        border-top-color: transparent;
-        border-bottom-color: var(--tt-bg);
-        top: p2r(-12);
-        bottom: auto;
-      }
-
-      @supports not (anchor-name: --anchor) {
-        margin-block-start: p2r(12);
-        margin-block-end: 0;
-      }
-    }
-
-    .tooltip-content {
-      padding: p2r(8 12);
-      position: relative;
-      hyphens: auto;
-      text-wrap: pretty;
-      color: var(--tt-c);
-      max-height: var(--tt-mh);
-      max-width: var(--tt-mw);
-      overflow: auto;
-      background: var(--tt-bg);
-      border-radius: var(--shape-2);
-      box-shadow: var(--box-shadow-20);
-
-      @supports (anchor-name: --anchor) {
-        transform: translateY(var(--tt-translate-y)) scaleY(0) scaleX(0.8);
-        transition: transform 125ms linear;
-      }
-    }
-  }
-}

package/styles/components/ship-virtual-scroll.scss

@@ -1,12 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipVirtualScroll: false !default;
-
-@if $shipVirtualScroll == true {
-  sh-virtual-scroll {
-    overflow-y: auto;
-    position: relative;
-    display: block;
-    height: 600px;
-  }
-}