@smwb/ui-styles 1.0.0

package/less/components/progressIndicator/progressIndicator.less

@@ -0,0 +1,107 @@
+.smwb-indicator_circular {
+  display: inline-block;
+  position: relative;
+  width: 48px;
+  height: 48px;
+  &.smwb-indeterminate {
+    div {
+      box-sizing: border-box;
+      display: block;
+      position: absolute;
+      width: 48px;
+      height: 48px;
+      margin: @progressDotMargin;
+      border: 4px solid var(--smui-primaryColor);
+      border-radius: 50%;
+      animation: cirleLoad 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+      border-color: var(--smui-primaryColor) transparent transparent transparent;
+    }
+    div:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+    div:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+    div:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+  }
+  .smwb-indicator_circular {
+    &__svg {
+      width: 48px;
+      height: 48px;
+    }
+    &__circle {
+      fill: none;
+      stroke: var(--smui-primaryColor);
+      stroke-width: 4px;
+      transform-origin: center;
+      transform: rotate(-90deg);
+      transition: stroke-dashoffset 0.1s ease-in-out;
+    }
+  }
+}
+
+@keyframes cirleLoad {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.smwb-indicator_linear {
+  height: 4px;
+  position: relative;
+  width: 240px;
+  background-color: var(--smui-indicatorTrackBg);
+  overflow: hidden;
+  &__thumb {
+    position: absolute;
+    height: 4px;
+    background-color: var(--smui-primaryColor);
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+  &.smwb-indeterminate {
+    .smwb-indicator_linear__thumb {
+      animation: linearLoad 1.2s ease-in-out infinite;
+      width: 50%;
+    }
+  }
+  &.smwb-determinate {
+    .smwb-indicator_linear__thumb {
+      transition: all 0.1s linear;
+    }
+  }
+}
+
+@keyframes linearLoad {
+  0% {
+    left: -70%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+.smwb-indicator_color-primary { color: var(--smui-primaryColor); }
+.smwb-indicator_color-secondary { color: var(--smui-secondaryColor); }
+.smwb-indicator_color-error { color: var(--smui-errorColor); }
+.smwb-indicator_color-success { color: var(--smui-successColor); }
+.smwb-indicator_color-warning { color: var(--smui-warningColor); }
+.smwb-indicator_color-info { color: var(--smui-infoColor); }
+.smwb-indicator_color-secondary .smwb-indicator_circular__circle,
+.smwb-indicator_color-error .smwb-indicator_circular__circle,
+.smwb-indicator_color-success .smwb-indicator_circular__circle,
+.smwb-indicator_color-warning .smwb-indicator_circular__circle,
+.smwb-indicator_color-info .smwb-indicator_circular__circle { stroke: currentColor; }
+.smwb-indicator_color-secondary .smwb-indicator_linear__thumb,
+.smwb-indicator_color-error .smwb-indicator_linear__thumb,
+.smwb-indicator_color-success .smwb-indicator_linear__thumb,
+.smwb-indicator_color-warning .smwb-indicator_linear__thumb,
+.smwb-indicator_color-info .smwb-indicator_linear__thumb { background-color: currentColor; }
+.smwb-indicator_size-small.smwb-indicator_circular { width: 28px; height: 28px; }
+.smwb-indicator_size-large.smwb-indicator_circular { width: 64px; height: 64px; }

package/less/components/radioButton/radioButton.entry.less

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

package/less/components/radioButton/radioButton.less

@@ -0,0 +1,138 @@
+.smwb-radio {
+  display: inline-flex;
+  gap: @radioGroupGap;
+  align-items: center;
+  &__group {
+    display: flex;
+    gap: @radioRowGap;
+    align-items: center;
+  }
+
+  &__wrapper {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  &__bg {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    border-radius: @circleBorderRadius;
+    transition: all 0.2s ease-in-out;
+    &.smwb-disabled {
+      display: none;
+    }
+  }
+
+  &__input {
+    display: none;
+    &:active {
+      & ~ .radio__btn:hover ~ .smwb-radio__bg {
+        transform: translate(-50%, -50%) scale(1);
+        background-color: var(--smui-onSurfaceActive);
+      }
+      & ~ .smwb-radio__bg {
+        background-color: var(--smui-onSurfaceActive);
+        transform: translate(-50%, -50%) scale(1);
+      }
+      &:checked {
+        ~ .smwb-radio__bg {
+          transform: translate(-50%, -50%) scale(1);
+          background-color: var(--smui-primaryColorActive);
+        }
+        &:active ~ .radio__btn:hover ~ .smwb-radio__bg {
+          transform: translate(-50%, -50%) scale(1);
+          background-color: var(--smui-primaryColorActive);
+        }
+      }
+    }
+    &:checked {
+      & ~ .smwb-radio__btn {
+        border: 2px solid var(--smui-primaryColor);
+        &::after {
+          transform: translate(-50%, -50%) scale(1);
+        }
+        &::before {
+          animation: ping 0.6s cubic-bezier(0, 0, 0.2, 1) alternate;
+        }
+      }
+      &:disabled ~ .smwb-radio__btn {
+        border: 2px solid var(--smui-disabledTextColor);
+        &::after {
+          background-color: var(--smui-disabledTextColor);
+        }
+      }
+    }
+    & ~ .smwb-radio__btn {
+      &:hover ~ .smwb-radio__bg {
+        transform: translate(-50%, -50%) scale(1);
+        background-color: var(--smui-onSurfaceHover);
+      }
+    }
+    &:checked:hover ~ .smwb-radio__btn {
+      &:hover ~ .smwb-radio__bg {
+        transform: translate(-50%, -50%) scale(1);
+        background-color: var(--smui-primaryColorHover);
+      }
+    }
+  }
+
+  &__btn {
+    z-index: 2;
+    height: 20px;
+    width: 20px;
+    border-radius: @circleBorderRadius;
+    border: 2px solid var(--smui-checkboxBorderColor);
+    position: relative;
+    cursor: pointer;
+    &.smwb-disabled {
+      border-color: var(--smui-disabledTextColor);
+      pointer-events: none;
+      &::before {
+        display: none;
+      }
+    }
+    &::before {
+      content: "";
+      width: 40px;
+      height: 40px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      border-radius: @circleBorderRadius;
+      background-color: @radioRippleColor;
+      transition: all 0.2s ease-in-out;
+    }
+    &::after {
+      content: "";
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      border-radius: @circleBorderRadius;
+      background-color: var(--smui-primaryColor);
+      transition: all 0.2s ease-in-out;
+    }
+  }
+
+  &__label {
+    pointer-events: none;
+    color: var(--smui-primaryTextColor);
+  }
+}
+
+@keyframes ping {
+  75%,
+  100% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0;
+  }
+}

package/less/components/rating/rating.entry.less

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

package/less/components/rating/rating.less

@@ -0,0 +1,65 @@
+.smwb-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: @ratingGap;
+  color: var(--smui-primaryColor);
+
+  &_disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+
+  &__item {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  &__icon {
+    position: absolute;
+    inset: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    &_empty {
+      color: var(--smui-outlineColor);
+    }
+
+    &_filled {
+      color: var(--smui-primaryColor);
+      width: 0;
+      transition: width 0.1s ease-in-out;
+    }
+  }
+}
+
+.smwb-rating_color-secondary .smwb-rating__icon_filled {
+  color: var(--smui-secondaryColor);
+}
+.smwb-rating_color-error .smwb-rating__icon_filled {
+  color: var(--smui-errorColor);
+}
+.smwb-rating_color-success .smwb-rating__icon_filled {
+  color: var(--smui-successColor);
+}
+.smwb-rating_color-warning .smwb-rating__icon_filled {
+  color: var(--smui-warningColor);
+}
+.smwb-rating_color-info .smwb-rating__icon_filled {
+  color: var(--smui-infoColor);
+}
+.smwb-rating_error .smwb-rating__icon_empty {
+  color: var(--smui-errorColor);
+}
+
+.smwb-rating__helper {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-rating__helper_error {
+  color: var(--smui-errorColor);
+}

package/less/components/ripple/ripple.entry.less

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

package/less/components/ripple/ripple.less

@@ -0,0 +1,24 @@
+.smwb-ripple {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+
+  &__child {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: rippleKeyframes 600ms linear;
+    background-color: currentColor;
+    opacity: 0.35;
+  }
+}
+
+@keyframes rippleKeyframes {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}

package/less/components/screenDivider/screenDivider.entry.less

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

package/less/components/screenDivider/screenDivider.less

@@ -0,0 +1,56 @@
+.smwb-screen-divider {
+  &__wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    &.smwb-vertical {
+      flex-direction: column;
+      .smwb-screen-divider__resizer {
+        border-top: thin solid var(--smui-primaryColor);
+        border-bottom: thin solid var(--smui-primaryColor);
+        border-left: none;
+        margin: 0 @screenDividerLabelMargin;
+        min-width: 100%;
+        max-height: 0.7rem;
+        min-height: 0.7rem;
+        cursor: n-resize;
+        writing-mode: vertical-rl;
+      }
+    }
+  }
+  &__resizer {
+    border-left: thin solid var(--smui-primaryColor);
+    border-right: thin solid var(--smui-primaryColor);
+    background: var(--smui-primaryContainer);
+    margin: @screenDividerLabelMargin 0;
+    max-width: 0.7rem;
+    min-width: 0.7rem;
+    flex-shrink: 0;
+    min-height: 100%;
+    cursor: e-resize;
+    z-index: 2;
+    user-select: none;
+    // Pointer-drag resize must own the touch gesture (no page scroll).
+    touch-action: none;
+    overflow-wrap: break-word;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    line-height: 10px;
+    &::after {
+      content: "......";
+      text-align: center;
+    }
+  }
+  &__first {
+    min-height: 5px;
+    min-width: 5px;
+    flex-shrink: 1;
+  }
+  &__second {
+    min-height: 5px;
+    min-width: 5px;
+    flex-shrink: 1;
+  }
+}

package/less/components/selectField/selectField.entry.less

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

package/less/components/selectField/selectField.less

@@ -0,0 +1,182 @@
+.smwb-select-field {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:not(&--inline) {
+    padding: @selectFieldPadding;
+  }
+
+  &:not(&--inline)&--filled {
+    padding: @selectFieldFilledPadding;
+  }
+
+  &__option {
+    &__inner {
+      display: flex;
+      align-items: center;
+      gap: @selectFieldChipsGap;
+    }
+    &__helper-text {
+      font-size: 70%;
+      display: inline-flex;
+      align-items: center;
+      opacity: 0.7;
+    }
+  }
+
+  &__search-wrapper {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    overflow-y: hidden;
+    overflow-x: auto;
+    min-height: 24px;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    column-gap: @selectFieldValueGap;
+    margin-right: -7px;
+  }
+
+  &__values {
+    white-space: nowrap;
+    font: inherit;
+    color: inherit;
+    user-select: none;
+
+    & > *:not(:first-child) {
+      margin-left: @selectFieldChipMarginLeft;
+    }
+
+    & + span {
+      margin-left: @selectFieldChipMarginLeft;
+    }
+  }
+
+  &__search {
+    display: inline-flex;
+    flex: 1 1 auto;
+    position: relative;
+    height: 23px;
+  }
+
+  &__search-text {
+    font: inherit;
+    visibility: hidden;
+    white-space: pre;
+  }
+
+  &__search-input {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 100%;
+    min-width: 4px;
+    letter-spacing: inherit;
+    font: inherit;
+    color: inherit;
+    background-color: transparent;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    fill: currentcolor;
+    user-select: none;
+    font-size: 1.5rem;
+    vertical-align: top;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &--opened {
+      transform: rotate(180deg);
+    }
+
+    &--focused {
+      color: var(--smui-primaryColor);
+    }
+
+    &--error {
+      color: var(--smui-errorColor);
+    }
+
+    &--close {
+      font-size: 1rem;
+    }
+  }
+
+  &:not(&--inline)&--filled &__icon--arrow {
+    margin-top: -12px;
+  }
+
+  &__empty-items {
+    padding: @selectFieldMenuItemPadding;
+    text-align: center;
+    font-style: italic;
+    font-size: 14px;
+  }
+
+  &__menu {
+    &-search {
+    }
+    &-loading {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      padding: @selectFieldCreatePaddingY 0;
+    }
+    &__loader {
+      width: 36px !important;
+      height: 36px !important;
+      div {
+        width: 36px !important;
+        height: 36px !important;
+      }
+    }
+  }
+
+  &__menu-search-input {
+    padding: @selectFieldSearchPadding;
+    color: var(--smui-selectFieldSearchMenuColor);
+    background-color: transparent;
+  }
+
+  &--search {
+    cursor: text;
+  }
+
+  &--disabled {
+    cursor: default;
+  }
+}
+
+.smwb-select-field__group-label {
+  padding: 6px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--smui-onSurfaceVariant);
+  pointer-events: none;
+}
+
+.smwb-select-field__create-option {
+  font-style: italic;
+  color: var(--smui-primaryColor);
+}

package/less/components/sheet/sheet.entry.less

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