@smwb/ui-styles 1.0.0

package/less/components/slider/slider.less

@@ -0,0 +1,294 @@
+.smwb-slider {
+  display: inline-block;
+  position: relative;
+  height: 4px;
+  width: 100%;
+  padding: @sliderPaddingY 0;
+  border-radius: 12px;
+  cursor: pointer;
+  box-sizing: content-box;
+  color: var(--smui-primaryColor);
+  // Let JS own the drag gesture on touch instead of the browser
+  // scrolling/zooming the page.
+  touch-action: none;
+
+  &__ticks {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    z-index: 1;
+    height: 4px;
+    justify-content: space-between;
+  }
+
+  &__tick {
+    height: 2px;
+    width: 4px;
+    background-color: rgba(red, 0.35);
+    border-radius: 50%;
+  }
+
+  &__container {
+    display: flex;
+    align-items: center;
+    gap: @sliderMarksGap;
+    width: 100%;
+
+    .smwb-text-field__input {
+      padding-top: @sliderLabelPaddingTop;
+    }
+  }
+
+  &--discrete {
+    &:focus {
+      .smwb-slider__thumb-tooltip {
+        opacity: 1;
+      }
+
+      .smwb-slider__thumb {
+        &:before {
+          box-shadow: @sliderActiveColor 0 0 0 14px;
+        }
+      }
+    }
+  }
+
+  &--dragging &__track,
+  &--dragging &__thumb {
+    transition: none;
+  }
+
+  &--disabled {
+    pointer-events: none;
+    cursor: default;
+    color: @sliderDisabledColor;
+  }
+
+  &__rail {
+    display: block;
+    position: absolute;
+    border-radius: inherit;
+    background-color: currentColor;
+    opacity: 0.38;
+    width: 100%;
+    height: inherit;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &__track {
+    display: block;
+    position: absolute;
+    top: 50%;
+    border-radius: inherit;
+    border: 1px solid currentColor;
+    background-color: currentColor;
+    transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    height: inherit;
+    transform: translateY(-50%);
+    box-sizing: content-box;
+  }
+
+  &__thumb {
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    outline: 0;
+    box-sizing: border-box;
+    background-color: currentcolor;
+    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transform: translate(-45%, -50%);
+
+    &:before {
+      position: absolute;
+      content: "";
+      border-radius: inherit;
+      width: 100%;
+      height: 100%;
+      box-shadow: rgb(0 0 0 / 20%) 0 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 42px;
+      height: 42px;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &:hover {
+      box-shadow: @sliderHoverColor 0 0 0 14px;
+    }
+
+    &--active {
+      &:before {
+        box-shadow: @sliderActiveColor 0 0 0 14px;
+      }
+    }
+
+    &--discrete {
+      &:hover,
+      &:active {
+        .smwb-slider__thumb-tooltip {
+          opacity: 1;
+        }
+      }
+    }
+
+    &-tooltip {
+      border-radius: 4px;
+      position: absolute;
+      top: -24px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: var(--smui-tooltipBg);
+      text-align: center;
+      color: var(--smui-tooltipTextColor);
+      padding: @sliderTooltipPadding;
+      z-index: 1;
+      opacity: 0;
+      transition: all 0.2s ease-in-out;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 7px solid var(--smui-tooltipBg);
+        bottom: -6px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+  }
+
+  &__input {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    clip: rect(0px, 0px, 0px, 0px);
+  }
+}
+
+.smwb-slider_color-secondary {
+  color: var(--smui-secondaryColor);
+}
+.smwb-slider_color-error {
+  color: var(--smui-errorColor);
+}
+.smwb-slider_color-success {
+  color: var(--smui-successColor);
+}
+.smwb-slider_color-warning {
+  color: var(--smui-warningColor);
+}
+.smwb-slider_color-info {
+  color: var(--smui-infoColor);
+}
+
+.smwb-slider_size-small {
+  height: 2px;
+
+  .smwb-slider__thumb {
+    width: 14px;
+    height: 14px;
+  }
+}
+.smwb-slider_size-large {
+  height: 6px;
+
+  .smwb-slider__thumb {
+    width: 26px;
+    height: 26px;
+  }
+}
+
+.smwb-slider--vertical {
+  display: inline-block;
+  width: 4px;
+  height: 160px;
+  padding: 0 @sliderPaddingY;
+
+  .smwb-slider__rail {
+    width: inherit;
+    height: 100%;
+    left: 50%;
+    top: auto;
+    transform: translateX(-50%);
+  }
+
+  .smwb-slider__track {
+    width: inherit;
+    left: 50%;
+    top: auto;
+    transform: translateX(-50%);
+  }
+
+  .smwb-slider__thumb {
+    left: 50%;
+    top: auto;
+    transform: translate(-50%, 50%);
+  }
+}
+
+.smwb-slider--range {
+  .smwb-slider__track {
+    background-color: currentColor;
+  }
+}
+
+.smwb-slider__marks {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.smwb-slider__mark {
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 8px;
+  background-color: currentColor;
+  opacity: 0.4;
+  transform: translate(-50%, -50%);
+
+  .smwb-slider--vertical & {
+    top: auto;
+    left: 50%;
+    width: 8px;
+    height: 2px;
+    transform: translate(-50%, 50%);
+  }
+}
+
+.smwb-slider__mark-label {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 11px;
+  white-space: nowrap;
+  opacity: 0.7;
+}

package/less/components/snackbar/snackbar.entry.less

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

package/less/components/snackbar/snackbar.less

@@ -0,0 +1,157 @@
+.smwb-snackbars {
+  display: flex;
+  flex-direction: column;
+  gap: @snackbarGap;
+  position: fixed;
+  z-index: 777;
+  &.smwb-top {
+    top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &.smwb-top-right {
+    right: 1rem;
+    top: 1rem;
+  }
+  &.smwb-top-left {
+    left: 1rem;
+    top: 1rem;
+  }
+  &.smwb-bottom {
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &.smwb-bottom-right {
+    right: 1rem;
+    bottom: 1rem;
+  }
+  &.smwb-bottom-left {
+    left: 1rem;
+    bottom: 1rem;
+  }
+}
+
+.smwb-snackbar {
+  box-sizing: border-box;
+  width: @snackbarWidth;
+  min-width: @snackbarWidth;
+  max-width: @snackbarWidth;
+  padding: @snackbarPadding;
+  box-shadow:
+    0 3px 5px -1px rgba(19, 19, 19, 0.2),
+    0 6px 10px 0 rgb(0 0 0 / 14%),
+    0 1px 18px 0 rgb(0 0 0 / 12%);
+  border-radius: 4px;
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  line-height: 1.5;
+  cursor: pointer;
+  &:not(.smwb-snackbar-enter-done):not(.smwb-snackbar-enter-active):not(.smwb-snackbar-exit-active) {
+    max-height: 0;
+    min-height: 0;
+    padding-block: 0;
+    margin-block: 0;
+    overflow: hidden;
+    border: none;
+    box-shadow: none;
+  }
+  &.smwb-dark {
+    color: @snackbarLightBg;
+    background-color: @snackbarDarkBg;
+  }
+  &.smwb-light {
+    background-color: @snackbarLightBg;
+    color: @snackbarDarkBg;
+  }
+  &.smwb-danger {
+    color: #fff;
+    background-color: var(--smui-errorColor);
+  }
+  &.smwb-success {
+    background-color: var(--smui-successColor);
+    color: #fff;
+  }
+  &.smwb-warning {
+    background-color: var(--smui-warningColor);
+    color: #fff;
+  }
+  &.smwb-info {
+    background-color: var(--smui-primaryColor);
+    color: #fff;
+  }
+
+  &.smwb-top-left {
+    transform: translateX(-100%);
+    &.smwb-snackbar-enter-done {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    &.smwb-snackbar-exit-active {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+  }
+  &.smwb-top-right {
+    transform: translateX(100%);
+    &.smwb-snackbar-enter-done {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    &.smwb-snackbar-exit-active {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+  &.smwb-top {
+    transform: translateY(-100%);
+    &.smwb-snackbar-enter-done {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    &.smwb-snackbar-exit-active {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+  }
+
+  &.smwb-bottom {
+    transform: translateY(100%);
+    &.smwb-snackbar-enter-done {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    &.smwb-snackbar-exit-active {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+  }
+  &.smwb-bottom-right {
+    transform: translateX(100%);
+    &.smwb-snackbar-enter-done {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    &.smwb-snackbar-exit-active {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+  &.smwb-bottom-left {
+    transform: translateX(-100%);
+    &.smwb-snackbar-enter-done {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    &.smwb-snackbar-exit-active {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+  }
+}
+
+.smwb-snackbar__action {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 12px;
+}

package/less/components/stack/stack.entry.less

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

package/less/components/stack/stack.less

@@ -0,0 +1,10 @@
+.smwb-stack {
+  // layout is driven by inline flex props; this hook is for overrides
+  min-width: 0;
+
+  &__divider {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+  }
+}

package/less/components/stepper/stepper.entry.less

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

package/less/components/stepper/stepper.less

@@ -0,0 +1,142 @@
+.smwb-stepper {
+  display: flex;
+  width: 100%;
+
+  &_horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &_vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  &__step {
+    display: flex;
+    align-items: center;
+    gap: @stepperLabelGap;
+    flex-shrink: 0;
+    color: var(--smui-onSurfaceVariant);
+
+    &_active {
+      color: var(--smui-onSurfaceColor);
+
+      .smwb-stepper__icon {
+        background-color: var(--smui-primaryColor);
+        color: var(--smui-onPrimaryColor);
+      }
+
+      .smwb-stepper__label {
+        font-weight: 600;
+        color: var(--smui-primaryColor);
+      }
+    }
+
+    &_completed {
+      .smwb-stepper__icon {
+        background-color: var(--smui-primaryColor);
+        color: var(--smui-onPrimaryColor);
+      }
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: @stepperIconSize;
+    height: @stepperIconSize;
+    border-radius: @circleBorderRadius;
+    background-color: var(--smui-disabledBgColor);
+    color: var(--smui-onSurfaceVariant);
+    font-size: 0.8rem;
+    font-weight: 500;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.3;
+  }
+
+  &__label {
+    font-size: 0.875rem;
+  }
+
+  &__optional {
+    font-size: 0.75rem;
+    opacity: 0.7;
+  }
+
+  &__description {
+    margin-top: @smui-space-xs;
+    font-size: 0.8125rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__connector {
+    flex: 1 1 auto;
+  }
+
+  &_horizontal &__connector {
+    height: 1px;
+    min-width: @stepperConnectorGap;
+    margin: 0 @stepperConnectorGap;
+    background-color: var(--smui-dividerColor);
+  }
+
+  &_vertical {
+    .smwb-stepper__step {
+      align-items: flex-start;
+    }
+
+    .smwb-stepper__connector {
+      width: 1px;
+      min-height: @smui-space-6;
+      margin: @smui-space-xs 0 @smui-space-xs (@stepperIconSize / 2);
+      background-color: var(--smui-dividerColor);
+      flex: 0 0 auto;
+    }
+  }
+
+  &_alt-label {
+    align-items: flex-start;
+
+    .smwb-stepper__step {
+      flex-direction: column;
+      flex: 1 1 0;
+      text-align: center;
+      gap: @smui-space-sm;
+    }
+
+    .smwb-stepper__text {
+      align-items: center;
+    }
+
+    .smwb-stepper__connector {
+      margin-top: (@stepperIconSize / 2);
+    }
+  }
+}
+
+.smwb-stepper__step_error {
+  .smwb-stepper__icon {
+    background-color: var(--smui-errorColor);
+    color: var(--smui-onErrorColor);
+  }
+
+  .smwb-stepper__label {
+    color: var(--smui-errorColor);
+  }
+}
+
+.smwb-stepper__step_disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.smwb-stepper__step_clickable {
+  cursor: pointer;
+}

package/less/components/table/table.entry.less

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