@smwb/ui-styles 1.0.0

package/less/components/sheet/sheet.less

@@ -0,0 +1,243 @@
+.smwb-sheet {
+  background-color: var(--smui-surfaceBackground);
+  position: fixed;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+  box-shadow: rgb(0 0 0 / 14%) 0px 8px 10px -5px, rgb(0 0 0 / 14%) 0px 1px 14px 1px, rgb(0 0 0 / 14%) 0px 6px 22px 4px;
+  z-index: 100;
+  padding: @sheetHeaderPaddingY @sheetPadding @sheetPadding;
+  overflow: hidden;
+  display: flex;
+  max-width: 100vw;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    gap: @smui-space-xs;
+    padding-bottom: @sheetHeaderPaddingBottom;
+
+    .smwb-button {
+      min-width: 0;
+    }
+  }
+
+  &__drag-handle {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    touch-action: none;
+    user-select: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+
+    &-bar {
+      display: block;
+      border-radius: 999px;
+      background-color: var(--smui-onSurfaceVariant);
+      opacity: 0.4;
+      transition: opacity 0.15s ease-in-out;
+    }
+
+    &:hover &-bar,
+    &:active &-bar {
+      opacity: 0.7;
+    }
+  }
+
+  // Reserve room for the grab handle so it never overlaps content.
+  &_resizable.smwb-bottom {
+    padding-top: @sheetHandleSpace;
+  }
+  &_resizable.smwb-top {
+    padding-bottom: @sheetHandleSpace;
+  }
+  &_resizable.smwb-left {
+    padding-right: @sheetHandleSpace;
+  }
+  &_resizable.smwb-right {
+    padding-left: @sheetHandleSpace;
+  }
+
+  &.smwb-bottom &__drag-handle,
+  &.smwb-top &__drag-handle {
+    left: 0;
+    right: 0;
+    height: @sheetHandleSpace;
+    cursor: ns-resize;
+    .smwb-sheet__drag-handle-bar {
+      width: 36px;
+      height: 4px;
+    }
+  }
+  &.smwb-bottom &__drag-handle {
+    top: 0;
+  }
+  &.smwb-top &__drag-handle {
+    bottom: 0;
+  }
+
+  &.smwb-left &__drag-handle,
+  &.smwb-right &__drag-handle {
+    top: 0;
+    bottom: 0;
+    width: @sheetHandleSpace;
+    cursor: ew-resize;
+    .smwb-sheet__drag-handle-bar {
+      width: 4px;
+      height: 36px;
+    }
+  }
+  &.smwb-right &__drag-handle {
+    left: 0;
+  }
+  &.smwb-left &__drag-handle {
+    right: 0;
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  &.smwb-bottom {
+    border-radius: @sheetBorderRadius @sheetBorderRadius 0 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: var(--sizeProp);
+    transform: translateY(100%);
+    flex-direction: column;
+    .smwb-sheet__header {
+      width: 100%;
+    }
+  }
+
+  &.smwb-top {
+    border-radius: 0 0 @sheetBorderRadius @sheetBorderRadius;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--sizeProp);
+    transform: translateY(-100%);
+    flex-direction: column;
+    .smwb-sheet__header {
+      width: 100%;
+    }
+  }
+
+  &.smwb-left {
+    border-radius: 0 @sheetBorderRadius @sheetBorderRadius 0;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: var(--sizeProp);
+    transform: translateX(-100%);
+    flex-direction: row-reverse;
+    .smwb-sheet__header {
+      flex-direction: column;
+      height: 100%;
+      padding-left: @sheetContentPaddingLeft;
+    }
+  }
+
+  &.smwb-right {
+    border-radius: @sheetBorderRadius 0 0 @sheetBorderRadius;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: var(--sizeProp);
+    transform: translateX(100%);
+    .smwb-sheet__header {
+      flex-direction: column;
+      height: 100%;
+    }
+  }
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
+    opacity: 0;
+    transition: all 0.25s ease-in-out;
+    &.smwb-entered {
+      opacity: 1;
+    }
+    &.smwb-dark {
+      background-color: @modalOverlayBg;
+    }
+  }
+
+  &__default,
+  &__overlay {
+    &.smwb-entered {
+      .smwb-sheet {
+        opacity: 1;
+        &.smwb-bottom {
+          transform: translateY(0);
+          &.smwb-expanded {
+            height: 90%;
+          }
+          &.smwb-small {
+            height: 10%;
+          }
+        }
+        &.smwb-top {
+          transform: translateY(0);
+          &.smwb-expanded {
+            height: 90%;
+          }
+          &.smwb-small {
+            height: 10%;
+          }
+        }
+        &.smwb-left {
+          transform: translateX(0);
+          &.smwb-expanded {
+            width: 90%;
+          }
+          &.smwb-small {
+            width: 10%;
+          }
+        }
+        &.smwb-right {
+          transform: translateX(0);
+          &.smwb-expanded {
+            width: 90%;
+          }
+          &.smwb-small {
+            width: 10%;
+          }
+        }
+      }
+    }
+  }
+}
+
+.smwb-scrollbar {
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--smui-scrollThumbColor);
+    width: 6px;
+    border-radius: 999px;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}

package/less/components/sidebar/sidebar.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./sidebar.less";

package/less/components/sidebar/sidebar.less

@@ -0,0 +1,137 @@
+.smwb-sidebar {
+  color: var(--smui-onSurfaceVariant);
+  min-height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--smui-surfaceBackground);
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
+  font-size: 1rem;
+  clip-path: inset(0px -15px 0px 0px);
+  min-width: 56px;
+  z-index: 2;
+  &.smwb-default {
+    width: 240px;
+    .smwb-nav-item {
+      flex-direction: row;
+      gap: @sidebarOpenGap;
+      padding: @sidebarPadding;
+    }
+  }
+  &.smwb-compact {
+    width: 72px;
+    .smwb-nav-item {
+      flex-direction: column;
+      padding: @sidebarPadding;
+      height: 72px;
+      width: 100%;
+      justify-content: center;
+      &__title {
+        font-size: 0.85rem;
+      }
+    }
+  }
+  &.smwb-compactMini {
+    width: 56px;
+    .smwb-nav-item {
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 56px;
+      &__title {
+        display: none;
+      }
+    }
+  }
+
+  &__collapse {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+
+  &.smwb-compactMini &__collapse {
+    justify-content: center;
+  }
+
+  &__collapse-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 0;
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--smui-onSurfaceVariant);
+    background-color: transparent;
+    transition: background-color 0.15s ease-in-out;
+
+    &:hover {
+      background-color: var(--smui-onSurfaceHover);
+    }
+
+    &:active {
+      background-color: var(--smui-onSurfaceActive);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+
+  &__nav {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: @sidebarNavGap;
+  }
+
+  .smwb-nav-item {
+    position: relative;
+    color: var(--smui-primaryTextColor);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: @sidebarNavItemGap;
+    text-align: center;
+    &:hover {
+      background-color: var(--smui-onSurfaceHover);
+    }
+    &:active {
+      background-color: var(--smui-onSurfaceActive);
+    }
+    &__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    &.smwb-active {
+      color: var(--smui-primaryColor);
+      background-color: var(--smui-navItemActiveBg);
+      &:hover {
+        background-color: var(--smui-primaryColorHover);
+      }
+      &__title {
+        color: var(--smui-primaryColor);
+      }
+      &__icon {
+        color: var(--smui-primaryColor);
+      }
+      &:active {
+        background-color: var(--smui-primaryColorActive);
+      }
+    }
+  }
+}

package/less/components/skeleton/skeleton.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./skeleton.less";

package/less/components/skeleton/skeleton.less

@@ -0,0 +1,67 @@
+.smwb-skeleton {
+  display: block;
+  background-color: var(--smui-onSurfaceHover);
+  position: relative;
+  overflow: hidden;
+
+  &_text {
+    width: 100%;
+    height: 1em;
+    border-radius: @skeletonRadius;
+    transform: scale(1, 0.7);
+    transform-origin: 0 55%;
+  }
+
+  &_rectangular {
+    border-radius: 0;
+  }
+
+  &_rounded {
+    border-radius: @smui-radius-lg;
+  }
+
+  &_circular {
+    border-radius: @circleBorderRadius;
+  }
+
+  &_pulse {
+    animation: smwb-skeleton-pulse 1.6s ease-in-out 0.5s infinite;
+  }
+
+  &_wave::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, transparent, var(--smui-onSurfaceActive), transparent);
+    animation: smwb-skeleton-wave 1.6s linear 0.5s infinite;
+  }
+}
+
+@keyframes smwb-skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes smwb-skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  60%,
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.smwb-skeleton__group {
+  display: flex;
+  flex-direction: column;
+  gap: @smui-space-sm;
+}

package/less/components/slider/slider.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./slider.less";