@ship-ui/core 0.13.2

package/styles/components/ship-sidenav.component.scss

@@ -0,0 +1,192 @@
+@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);
+    }
+
+    main {
+      overflow-x: hidden;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: auto;
+      background-color: var(--base-1);
+      border: 1px solid var(--base-4);
+      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: 1px solid var(--base-4);
+      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));
+      }
+
+      .closed-topbar {
+        display: flex;
+
+        &:empty {
+          display: none;
+        }
+      }
+
+      main {
+        border: 0;
+        box-shadow: none;
+        flex: 1 0;
+      }
+    }
+  }
+}

package/styles/components/ship-sortable.component.scss

@@ -0,0 +1,54 @@
+@use '../helpers.scss' as *;
+
+$shipSortable: true !default;
+
+@if $shipSortable == true {
+  [shSortable] {
+    position: relative;
+
+    &.dragging {
+      [draggable] {
+        transition: transform 40ms linear;
+      }
+    }
+
+    [draggable] {
+      height: auto;
+      transform: translate(0);
+      transition: none;
+      z-index: 2;
+      background: var(--base-1);
+
+      &:has(:not([sort-handle])) {
+        cursor: grab;
+      }
+    }
+
+    .sortable-placeholder {
+      position: absolute;
+      top: 0;
+      z-index: 1;
+
+      &.active {
+        z-index: 1;
+        background-color: var(--base-6);
+        border: 1px solid var(--base-8);
+        opacity: 0.5;
+      }
+    }
+
+    .sortable-ghost,
+    .sortable-ghost.active {
+      opacity: 1;
+    }
+
+    .sortable-dragged-el.active,
+    .sortable-dragged-el {
+      opacity: 0;
+    }
+
+    [sort-handle] {
+      cursor: grab;
+    }
+  }
+}

package/styles/components/ship-spinner.component.scss

@@ -0,0 +1,53 @@
+@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.component.scss

@@ -0,0 +1,138 @@
+@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);
+    }
+
+    [step] {
+      flex: 2 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: p2r(8);
+      position: relative;
+      color: var(--base-8);
+      cursor: pointer;
+      user-select: none;
+
+      &:first-child {
+        align-items: flex-start;
+        flex: 1 0;
+      }
+
+      &:last-child {
+        align-items: flex-end;
+        flex: 1 0;
+      }
+
+      &:not(.active) sh-radio {
+        z-index: 10;
+      }
+
+      &:has(~ [step].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);
+    }
+  }
+}