@ship-ui/core 0.19.5 → 0.22.0

package/styles/components/ship-sidenav.scss

@@ -1,195 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipSidenav: true !default;
-
-@if $shipSidenav == true {
-  sh-sidenav {
-    --sidenav-width: #{p2r(280)};
-    --sidenav-wrap-w: 100vw;
-    --sidenav-wrap-h: 100vh;
-
-    display: flex;
-    width: var(--sidenav-wrap-w);
-    height: var(--sidenav-wrap-h);
-
-    .sidenav {
-      width: var(--sidenav-width);
-      transition: width 200ms linear;
-      height: 100%;
-      overflow-x: hidden;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: auto;
-    }
-
-    .main-wrap {
-      position: relative;
-      z-index: 1;
-      flex: 1 0;
-      display: block;
-      height: 100%;
-      overflow: auto;
-      padding: p2r(16 16 16 0);
-      background-color: var(--base-1);
-    }
-
-    main {
-      overflow-x: hidden;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: auto;
-      border: var(--border-10);
-      border-radius: var(--shape-3);
-      height: calc(100vh - 2rem);
-      box-shadow: var(--box-shadow-35);
-    }
-
-    .closed-topbar {
-      display: none;
-      min-height: p2r(60);
-      background-color: var(--base-1);
-      align-items: center;
-      justify-content: space-between;
-      padding: p2r(0 16);
-      border-bottom: var(--border-10);
-      z-index: 10000;
-      position: relative;
-    }
-
-    .dragable {
-      display: none;
-    }
-
-    .drag-image {
-      display: none;
-    }
-
-    &.simple {
-      border-radius: 0;
-
-      .main-wrap {
-        padding: 0;
-
-        main {
-          height: 100vh;
-          border-radius: 0;
-          border-width: 0 0 0 1px;
-        }
-      }
-
-      &.closed {
-        --sidenav-width: #{p2r(100)};
-      }
-    }
-
-    &.overlay {
-      overflow: hidden;
-
-      .drag-image {
-        display: block;
-        width: p2r(4);
-        height: 40%;
-        background-color: var(--base-2);
-        border-radius: p2r(2);
-        box-shadow: none;
-        position: fixed;
-        top: 0;
-        left: -9999px;
-      }
-
-      .sidenav {
-        position: fixed;
-        z-index: 0;
-      }
-
-      .dragable {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        z-index: 9999;
-        width: 50px;
-        padding-right: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: grab;
-
-        &:active {
-          cursor: grabbing;
-        }
-
-        &:after {
-          content: '';
-          display: block;
-          width: p2r(4);
-          height: 40%;
-          background-color: var(--base-2);
-          border-radius: p2r(2);
-        }
-
-        &:hover {
-          &:after {
-            background-color: var(--base-4);
-          }
-        }
-      }
-
-      .dropping-surface {
-        position: fixed;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        z-index: 100000;
-      }
-
-      .main-wrap {
-        z-index: 1;
-        padding: 0;
-        display: flex;
-        height: 100vh;
-        position: relative;
-        flex-direction: column;
-        transform: translateX(0);
-        transition: transform 200ms linear;
-      }
-
-      &.is-dragging {
-        user-select: none;
-        cursor: grabbing;
-
-        .main-wrap {
-          transition: none;
-        }
-
-        > * {
-          cursor: grabbing;
-        }
-
-        .dragable {
-          cursor: grabbing;
-        }
-      }
-
-      &.open .main-wrap {
-        transform: translateX(var(--sidenav-width));
-        box-shadow: var(--box-shadow-10);
-        border-left: var(--border-10);
-      }
-
-      .closed-topbar {
-        display: flex;
-
-        &:empty {
-          display: none;
-        }
-      }
-
-      main {
-        border: 0;
-        box-shadow: none;
-        flex: 1 0;
-        border-radius: 0;
-      }
-    }
-  }
-}

package/styles/components/ship-sortable.scss

@@ -1,45 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipSortable: true !default;
-
-@if $shipSortable == true {
-  .sh-sortable {
-    position: relative;
-
-    &.dragging {
-      [draggable],
-      .sortable-ghost {
-        cursor: grabbing;
-        transition: transform 40ms linear;
-      }
-    }
-
-    [draggable] {
-      height: auto;
-      transform: translate(0);
-      transition: none;
-      z-index: 2;
-      background: var(--base-1);
-      user-select: none;
-
-      &:not(:has([sort-handle])) {
-        cursor: grab;
-      }
-    }
-
-    .sortable-ghost {
-      opacity: 0.5;
-      z-index: 10;
-    }
-
-    &.item-dragged-out {
-      .sortable-ghost {
-        display: none;
-      }
-    }
-
-    [sort-handle] {
-      cursor: grab;
-    }
-  }
-}

package/styles/components/ship-spinner.scss

@@ -1,53 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipSpinner: true !default;
-
-@if $shipSpinner == true {
-  sh-spinner {
-    --spinner-c: var(--base-8);
-    --spinner-size: #{p2r(40)};
-    --spinner-thickness: #{p2r(5)};
-
-    width: var(--spinner-size);
-    height: var(--spinner-size);
-    display: grid;
-    place-content: center;
-    color: var(--spinner-c);
-    position: relative;
-
-    &:before {
-      content: '';
-      width: var(--spinner-size);
-      height: var(--spinner-size);
-      border: var(--spinner-thickness) solid currentColor;
-      border-bottom-color: transparent;
-      border-radius: 50%;
-      display: flex;
-      box-sizing: border-box;
-      animation: rotation 1s linear infinite;
-      margin: auto;
-      inset: 0;
-      position: absolute;
-    }
-
-    &.primary {
-      --spinner-c: var(--primary-8);
-    }
-
-    &.accent {
-      --spinner-c: var(--accent-8);
-    }
-
-    &.warn {
-      --spinner-c: var(--warn-8);
-    }
-
-    &.error {
-      --spinner-c: var(--error-8);
-    }
-
-    &.success {
-      --spinner-c: var(--success-8);
-    }
-  }
-}

package/styles/components/ship-stepper.scss

@@ -1,158 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipStepper: true !default;
-
-@if $shipStepper == true {
-  sh-stepper {
-    --step-track-bg: var(--base-3);
-    --step-c: var(--base-6);
-    --step-radio-cbg: var(--base-1);
-    --step-radio-c: var(--base-g2);
-    --step-active-c: var(--base-8);
-
-    display: flex;
-    flex-wrap: nowrap;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-
-    &.primary {
-      --step-c: var(--primary-6);
-      --step-radio-cbg: var(--primary-1);
-      --step-radio-c: var(--primary-g2);
-      --step-active-c: var(--primary-8);
-    }
-
-    &.accent {
-      --step-c: var(--accent-6);
-      --step-radio-cbg: var(--accent-1);
-      --step-radio-c: var(--accent-g2);
-      --step-active-c: var(--accent-8);
-    }
-
-    &.warn {
-      --step-c: var(--warn-6);
-      --step-radio-cbg: var(--warn-1);
-      --step-radio-c: var(--warn-g2);
-      --step-active-c: var(--warn-8);
-    }
-
-    &.error {
-      --step-c: var(--error-6);
-      --step-radio-cbg: var(--error-1);
-      --step-radio-c: var(--error-g2);
-      --step-active-c: var(--error-8);
-    }
-
-    &.success {
-      --step-c: var(--success-6);
-      --step-radio-cbg: var(--success-1);
-      --step-radio-c: var(--success-g2);
-      --step-active-c: var(--success-8);
-    }
-
-    button {
-      background: transparent;
-      border: 0;
-      padding: 0;
-    }
-
-    button,
-    [routerLinkActive],
-    [step],
-    [value] {
-      flex: 2 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: flex-start;
-      gap: p2r(8);
-      position: relative;
-      color: var(--base-8);
-      cursor: pointer;
-      user-select: none;
-      outline: none;
-
-      &:focus-visible .sh-radio {
-        outline: 2px solid var(--primary-8);
-        outline-offset: 2px;
-        border-radius: 50%;
-      }
-
-      &:first-child {
-        align-items: flex-start;
-        flex: 1 0;
-      }
-
-      &:last-child {
-        align-items: flex-end;
-        flex: 1 0;
-        text-align: end;
-      }
-
-      &:not(.active) .sh-radio {
-        z-index: 10;
-      }
-
-      &:has(~ button.active),
-      &:has(~ [step].active),
-      &:has(~ [routerLinkActive].active),
-      &:has(~ [value].active) {
-        .sh-radio {
-          --radiod-o: 1;
-
-          .radio {
-            border-width: 0;
-            background: var(--step-radio-c);
-          }
-        }
-      }
-
-      .sh-radio {
-        .radio {
-          --radiod-c: var(--step-radio-cbg);
-
-          width: p2r(16);
-          height: p2r(16);
-        }
-      }
-
-      &.active {
-        color: var(--step-active-c);
-        outline: none;
-
-        .sh-radio {
-          z-index: 0;
-          --radiod-o: 1;
-
-          .radio {
-            border-width: 0;
-            background: var(--step-radio-c);
-          }
-
-          &:before {
-            content: '';
-            position: absolute;
-            top: p2r(6);
-            left: -9999px;
-            z-index: -1;
-            right: 0;
-            height: p2r(4);
-            background-color: var(--step-active-c);
-          }
-        }
-      }
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: p2r(6);
-      left: 0;
-      z-index: 0;
-      right: 0;
-      height: p2r(4);
-      background-color: var(--step-track-bg);
-    }
-  }
-}