@smwb/ui-styles 1.0.0

package/less/components/textField/textField.less

@@ -0,0 +1,373 @@
+.smwb-text-field {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 20em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: top;
+
+  &--inline {
+    border-bottom: 1px dotted var(--smui-primaryTextColor);
+  }
+
+  &__label {
+    display: block;
+    padding: 0;
+    font-size: 16px;
+    font-weight: 400;
+    color: var(--smui-textFieldLabelColor);
+    letter-spacing: 0.009375em;
+    line-height: 23px;
+    transform-origin: left top;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 26px);
+    z-index: 1;
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform: translate(16px, 16px);
+    transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+    user-select: none;
+
+    &--shrink {
+      max-width: calc(133% - 24px);
+      transform: translate(15px, -9px) scale(0.75);
+      user-select: none;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  &__input-holder {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    border-radius: @textFieldBorderRadius;
+    color: var(--smui-textFieldInputColor);
+    font-family: var(--smui-fontFamily);
+    font-size: 16px;
+    line-height: 1.4375em;
+    font-weight: 400;
+    letter-spacing: 0.009375em;
+    cursor: text;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  &__input {
+    height: 23px;
+    color: currentcolor;
+    font: inherit;
+    border: 0;
+    background: none;
+    outline: none;
+    caret-color: var(--smui-primaryColor);
+    letter-spacing: inherit;
+    box-sizing: content-box;
+    width: 100%;
+
+    &:not(&--inline) {
+      padding: @textFieldFilledInputPadding;
+    }
+
+    &::placeholder {
+      opacity: 0;
+      color: currentColor;
+      transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+    }
+
+    &--show-placeholder {
+      &::placeholder {
+        opacity: 0.6;
+      }
+    }
+
+    &&--adornment-start {
+      padding-left: 0;
+    }
+
+    &&--adornment-end {
+      padding-right: 0;
+    }
+  }
+
+  &__inline-input {
+    &::placeholder {
+      opacity: 0.6;
+      color: currentColor;
+      transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+    }
+  }
+
+  &__notched {
+    position: absolute;
+    inset: -5px 0 0;
+    top: -5px;
+    right: 0;
+    bottom: 0;
+    min-width: 0;
+    margin: 0;
+    padding: 0 @textFieldNotchPaddingX;
+    border: 1px solid var(--smui-textFieldNotchedColor);
+    border-radius: inherit;
+    pointer-events: none;
+    overflow: hidden;
+    text-align: left;
+    user-select: none;
+
+    > legend {
+      float: unset;
+      width: auto;
+      padding: 0;
+      line-height: 11px;
+      transition: width 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+      overflow: hidden;
+    }
+
+    &--with-label {
+      > legend {
+        display: block;
+        height: 11px;
+        max-width: 0.01px;
+        padding: 0;
+        font-size: 0.75em;
+        transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+        white-space: nowrap;
+        visibility: hidden;
+
+        > span {
+          display: inline-block;
+          padding: 0 @textFieldNotchCondensedPaddingX;
+          font-size: inherit;
+          visibility: visible;
+          opacity: 0;
+        }
+      }
+    }
+
+    &--active {
+      > legend {
+        max-width: 100%;
+        transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
+      }
+    }
+  }
+
+  &__helper-line {
+    display: flex;
+    justify-content: space-between;
+    padding-right: @textFieldAffixPaddingX;
+    padding-left: @textFieldAffixPaddingX;
+    margin-top: @textFieldHelperMarginTop;
+  }
+
+  &__helper-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+    letter-spacing: 0.0333333333em;
+    color: var(--smui-textFieldHelperTextColor);
+  }
+
+  &__adornment {
+    display: flex;
+    align-items: center;
+    height: 0.01em;
+    white-space: nowrap;
+    color: var(--smui-textFieldInputColor);
+
+    &--start {
+      margin-right: @textFieldAdornmentGap;
+      margin-left: @textFieldAffixMarginX;
+    }
+
+    &--end {
+      margin-left: @textFieldAdornmentGap;
+      margin-right: @textFieldAffixMarginX;
+    }
+
+    &--disable-pointer {
+      pointer-events: none;
+    }
+
+    &--text {
+      opacity: 0.7;
+    }
+
+    &--filled&--start {
+      margin-top: @textFieldAdornmentFilledMarginTop;
+    }
+  }
+
+  &--filled & {
+    &__label {
+      &--shrink {
+        transform: translate(16px, 7px) scale(0.75);
+      }
+    }
+
+    &__input-holder {
+      border-radius: @textFieldBorderRadius @textFieldBorderRadius 0 0;
+      background-color: var(--smui-textFieldFilledBgColor);
+
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+      }
+
+      &:before {
+        border-bottom: 1px solid var(--smui-textFieldFilledBorderColor);
+      }
+
+      &:after {
+        border-bottom: 2px solid var(--smui-primaryColor);
+        transform: scaleX(0);
+        transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+      }
+    }
+
+    &__input {
+      padding: @textFieldFilledLabelPadding;
+
+      &--adornment-start {
+        padding-left: 0;
+      }
+
+      &--adornment-end {
+        padding-right: 0;
+      }
+    }
+  }
+
+  &:not(&--focused):not(&--disabled):not(&--error) &__input-holder:hover &__notched {
+    border-color: var(--smui-textFieldNotchedHoverColor);
+  }
+
+  &--filled:not(&--focused):not(&--disabled) & {
+    &__input-holder:hover {
+      background-color: var(--smui-textFieldFilledHoverBgColor);
+    }
+  }
+
+  &--filled:not(&--focused):not(&--disabled):not(&--error) & {
+    &__input-holder {
+      &:hover:before {
+        border-bottom-color: var(--smui-textFieldFilledHoverBorderColor);
+      }
+    }
+  }
+
+  &--focused & {
+    &__label {
+      color: var(--smui-primaryColor);
+    }
+
+    &__input {
+      &::placeholder {
+        opacity: 0.6;
+      }
+    }
+
+    &__notched {
+      border: 2px solid var(--smui-primaryColor);
+      transition: border-color 0ms;
+    }
+  }
+
+  &--filled&--focused & {
+    &__input-holder {
+      background-color: var(--smui-textFieldFilledFocusedBgColor);
+
+      &:after {
+        transform: scaleX(1) translateX(0);
+      }
+    }
+  }
+
+  &--error & {
+    &__label {
+      color: var(--smui-errorColor);
+    }
+
+    &__notched {
+      border-color: var(--smui-errorColor);
+    }
+
+    &__input {
+      caret-color: var(--smui-errorColor);
+    }
+
+    &__helper-text {
+      color: var(--smui-errorColor);
+    }
+  }
+
+  &--filled&--error & {
+    &__input-holder {
+      &:before {
+        border-bottom-color: var(--smui-errorColor);
+      }
+
+      &:after {
+        border-bottom: 2px solid var(--smui-errorColor);
+      }
+    }
+  }
+
+  &--disabled & {
+    &__label {
+      color: var(--smui-textFieldLabelDisabledColor);
+    }
+
+    &__input-holder,
+    &__inline-input {
+      color: var(--smui-textFieldInputDisabledColor);
+      pointer-events: none;
+      cursor: default;
+    }
+
+    &__notched {
+      border-color: var(--smui-textFieldNotchedDisabledColor);
+    }
+
+    &__helper-text {
+      color: var(--smui-textFieldHelperTextDisabledColor);
+    }
+  }
+
+  &--filled&--disabled & {
+    &__input-holder {
+      background-color: var(--smui-textFieldFilledDisabledBgColor);
+
+      &:before {
+        border-bottom-color: var(--smui-textFieldFilledDisabledBorderColor);
+      }
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+.smwb-text-field_size-small .smwb-text-field__input:not(.smwb-text-field__input--inline) {
+  padding-top: @smui-space-sm;
+  padding-bottom: @smui-space-sm;
+  font-size: @smui-control-font-sm;
+}
+.smwb-text-field_size-large .smwb-text-field__input:not(.smwb-text-field__input--inline) {
+  padding-top: @smui-space-lg;
+  padding-bottom: @smui-space-lg;
+  font-size: @smui-control-font-lg;
+}

package/less/components/timePicker/timePicker.entry.less

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

package/less/components/timePicker/timePicker.less

@@ -0,0 +1,95 @@
+.smwb-time-picker {
+  width: auto;
+  min-width: 200px;
+  max-width: 328px;
+
+  &__columns {
+    display: flex;
+    border-top: 1px solid var(--smui-dividerColor);
+  }
+
+  &__column {
+    flex: 1 1 0;
+    min-width: 56px;
+
+    &:not(:last-child) {
+      border-right: 1px solid var(--smui-dividerColor);
+    }
+  }
+
+  &__overflow {
+    max-height: 240px;
+    overflow-y: auto;
+  }
+
+  &__list {
+    padding: @datePickerFooterPaddingY 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    padding: 0 @smui-space-sm;
+    font-size: 14px;
+    line-height: 1;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+    cursor: pointer;
+    transition+: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transition+: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover:not(&--selected) {
+      background-color: var(--smui-onSurfaceHover);
+    }
+
+    &:active:not(&--selected) {
+      background-color: var(--smui-onSurfaceActive);
+    }
+
+    &--selected {
+      color: var(--smui-primaryColor);
+      background-color: var(--smui-onSurfaceHover);
+    }
+  }
+}
+
+.smwb-date-time-picker {
+  &.smwb-date-picker {
+    width: max-content;
+    max-width: none;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    width: max-content;
+    border-top: 1px solid var(--smui-dividerColor);
+  }
+
+  &__body {
+    width: 328px;
+    flex-shrink: 0;
+  }
+
+  .smwb-time-picker__columns {
+    border-top: none;
+    border-left: 1px solid var(--smui-dividerColor);
+    flex: 0 0 auto;
+    align-self: stretch;
+  }
+
+  .smwb-time-picker__column {
+    flex: 0 0 56px;
+    width: 56px;
+  }
+
+  .smwb-time-picker__overflow {
+    max-height: 309px;
+  }
+}

package/less/components/toggle/toggle.entry.less

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

package/less/components/toggle/toggle.less

@@ -0,0 +1,110 @@
+.smwb-toggle {
+  width: @toggleTrackWidth;
+  height: @toggleTrackHeight;
+  position: relative;
+  cursor: pointer;
+  display: inline-flex;
+  &__wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    gap: @toggleGap;
+    &_label-left {
+      flex-direction: row;
+      align-items: center;
+    }
+    &_label-right {
+      flex-direction: row-reverse;
+      align-items: center;
+    }
+  }
+  &.smwb-disabled {
+    opacity: 0.35;
+    pointer-events: none;
+  }
+  &__track {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--smui-toggleTrackColor);
+    border-radius: 999px;
+    transition: all 0.2s ease-in-out;
+    & when (@toggleWithBorder = true) {
+      border: 2px solid var(--smui-toggleBorderColor);
+    }
+  }
+
+  &__thumb {
+    position: absolute;
+    z-index: 1;
+    width: @toggleThumbUncheckedHeight;
+    height: @toggleThumbUncheckedHeight;
+    border-radius: @circleBorderRadius;
+    background-color: @toggleDefaultThumbColor;
+    left: @toggleUnselectedLeft;
+    transform: translateY(-50%);
+    top: 50%;
+    transition: all 0.2s ease-in-out;
+    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
+    &::before {
+      width: 40px;
+      height: 40px;
+      border-radius: @circleBorderRadius;
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      background-color: none;
+      opacity: 0;
+      transition: all 0.2s ease-in-out;
+    }
+    &:hover {
+      &::before {
+        transform: translate(-50%, -50%) scale(1);
+        background-color: var(--smui-onSurfaceHover);
+        opacity: 1;
+      }
+    }
+  }
+
+  &__checkbox {
+    display: none;
+    &:checked {
+      & ~ .smwb-toggle__track {
+        background-color: var(--smui-toggleTrackActiveColor);
+        & when (@toggleWithBorder = true) {
+          border: 2px solid transparent;
+        }
+      }
+      & ~ .smwb-toggle__thumb {
+        left: @toggleSelectedLeft;
+        background-color: var(--smui-toggleThumbActiveColor);
+        width: @toggleThumbHeight;
+        height: @toggleThumbHeight;
+        &:hover {
+          &::before {
+            transform: translate(-50%, -50%) scale(1);
+            background-color: var(--smui-primaryColorHover);
+            opacity: 1;
+          }
+        }
+      }
+      &:active {
+        & ~ .smwb-toggle__thumb::before {
+          transform: translate(-50%, -50%) scale(1);
+          background-color: var(--smui-primaryColorActive);
+          opacity: 1;
+        }
+      }
+    }
+    &:active {
+      & ~ .smwb-toggle__thumb::before {
+        transform: translate(-50%, -50%) scale(1);
+        background-color: var(--smui-onSurfaceActive);
+        opacity: 1;
+      }
+    }
+  }
+}

package/less/components/tooltip/tooltip.entry.less

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

package/less/components/tooltip/tooltip.less

@@ -0,0 +1,36 @@
+.smwb-tooltip {
+  border-radius: 4px;
+  background-color: var(--smui-tooltipBg);
+  color: var(--smui-tooltipTextColor);
+  z-index: 5;
+  font-size: 12px;
+  padding: 0 @tooltipPaddingX;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  white-space: nowrap;
+  min-width: 50px;
+
+  &__ref {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &:hover + .smwb-tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &__wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/less/components/treeView/treeView.entry.less

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

package/less/components/treeView/treeView.less

@@ -0,0 +1,71 @@
+.smwb-tree {
+  &__wrapper {
+    .smwb-tree__node {
+      &:first-child {
+        border-left: 0;
+        &::before {
+          opacity: 0;
+        }
+      }
+    }
+  }
+  &__node {
+    &:last-child {
+      border-left-color: transparent;
+    }
+    padding-left: @treeViewIndent;
+    margin-left: 9px;
+    position: relative;
+    border-left: 1px solid var(--smui-primaryColor);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: -1px;
+      height: 20px;
+      width: 25px;
+      border-bottom: 1px solid var(--smui-primaryColor);
+      border-left: 1px solid var(--smui-primaryColor);
+      content: "";
+      font-weight: 600;
+      font-size: 14px;
+    }
+    &__label {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: @treeViewItemGap;
+    }
+
+    &__content {
+      display: flex;
+      align-items: center;
+      gap: @treeViewItemGap;
+      height: 40px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+
+.smwb-tree__node_selected > .smwb-tree__node__content {
+  background-color: var(--smui-onSurfaceHover);
+  border-radius: 4px;
+}
+
+.smwb-tree__node__checkbox {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  min-height: 18px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--smui-checkboxCheckedBg);
+}
+
+.smwb-tree__node__loading {
+  padding: 4px 8px 4px 28px;
+  font-size: 13px;
+  color: var(--smui-onSurfaceVariant);
+}

package/less/components/typography/typography.entry.less

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