@laser-ui/themes 0.0.1

package/components/time-picker.scss

@@ -0,0 +1,212 @@
+@use '../variables';
+@use '../mixins';
+
+$time-picker-cell-height: 28px;
+
+@include mixins.b(time-picker) {
+  $selector: &;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: var(--size);
+  padding: 0 calc(var(--horizontal-space) - 1px);
+  font-size: var(--font-size);
+  vertical-align: top;
+  cursor: pointer;
+  background-color: var(--#{variables.$prefix}background-color-input);
+  border: 1px solid var(--#{variables.$prefix}color-border);
+  border-radius: var(--#{variables.$prefix}border-radius);
+  transition: border-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+  &:hover,
+  &:focus-within {
+    border-color: var(--#{variables.$prefix}color-light-primary);
+  }
+
+  @each $invalid, $color in ('warning': 'warning', 'error': 'danger') {
+    &[data-l-form-invalid='#{$invalid}'] {
+      border-color: var(--#{variables.$prefix}color-#{$color}) !important;
+
+      #{$selector}__input {
+        caret-color: var(--#{variables.$prefix}color-#{$color}) !important;
+      }
+
+      #{$selector}__indicator {
+        background-color: var(--#{variables.$prefix}color-#{$color}) !important;
+      }
+    }
+  }
+
+  @include mixins.when(disabled) {
+    color: var(--#{variables.$prefix}color-disabled);
+    pointer-events: none;
+    background-color: var(--#{variables.$prefix}background-color-disabled);
+
+    @include mixins.e(icon) {
+      color: var(--#{variables.$prefix}color-disabled);
+    }
+  }
+
+  @include mixins.m(small) {
+    --size: var(--#{variables.$prefix}select-size, var(--#{variables.$prefix}size-small));
+    --horizontal-space: var(--#{variables.$prefix}select-horizontal-space, var(--#{variables.$prefix}horizontal-space-small));
+    --font-size: var(--#{variables.$prefix}select-font-size, var(--#{variables.$prefix}font-size-small));
+  }
+
+  @include mixins.m(medium) {
+    --size: var(--#{variables.$prefix}select-size, var(--#{variables.$prefix}size-medium));
+    --horizontal-space: var(--#{variables.$prefix}select-horizontal-space, var(--#{variables.$prefix}horizontal-space-medium));
+    --font-size: var(--#{variables.$prefix}select-font-size, var(--#{variables.$prefix}font-size-medium));
+  }
+
+  @include mixins.m(large) {
+    --size: var(--#{variables.$prefix}select-size, var(--#{variables.$prefix}size-large));
+    --horizontal-space: var(--#{variables.$prefix}select-horizontal-space, var(--#{variables.$prefix}horizontal-space-large));
+    --font-size: var(--#{variables.$prefix}select-font-size, var(--#{variables.$prefix}font-size-large));
+  }
+
+  @include mixins.e(input) {
+    display: inline-block;
+    flex: 1 0 0;
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: var(--#{variables.$prefix}color-text);
+    letter-spacing: inherit;
+    appearance: none;
+    caret-color: var(--#{variables.$prefix}color-primary);
+    background-color: transparent;
+    border: none;
+    outline: none;
+
+    &::placeholder {
+      color: var(--#{variables.$prefix}color-disabled);
+    }
+
+    &:disabled {
+      color: var(--#{variables.$prefix}color-disabled);
+
+      &::placeholder {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  @include mixins.e(indicator) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 0;
+    height: 2px;
+    pointer-events: none;
+    background-color: var(--#{variables.$prefix}color-primary);
+    opacity: 0;
+    transition:
+      opacity var(--#{variables.$prefix}animation-duration-base) linear,
+      left var(--#{variables.$prefix}animation-duration-slow) linear,
+      width var(--#{variables.$prefix}animation-duration-base) linear;
+  }
+
+  @include mixins.e(separator) {
+    flex-shrink: 0;
+    margin: 0 8px;
+    color: var(--#{variables.$prefix}color-icon-decorator);
+  }
+
+  @include mixins.e(clear) {
+    position: absolute;
+    right: calc(var(--horizontal-space) - 1px);
+    z-index: 1;
+    color: var(--#{variables.$prefix}color-icon-decorator);
+    transition: color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover,
+    &:focus {
+      color: var(--#{variables.$prefix}color-light-primary);
+    }
+
+    &:active {
+      color: var(--#{variables.$prefix}color-dark-primary);
+    }
+  }
+
+  @include mixins.e(icon) {
+    flex-shrink: 0;
+    margin-left: 4px;
+    color: var(--#{variables.$prefix}color-icon-decorator);
+  }
+
+  @include mixins.e(panel) {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  @include mixins.e(header) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 41px;
+    border-bottom: 1px solid var(--#{variables.$prefix}color-divider);
+  }
+
+  @include mixins.e(column) {
+    position: relative;
+    display: inline-block;
+    height: calc(8px + #{$time-picker-cell-height} * 8);
+    padding: 4px 0;
+    margin: 0;
+    overflow: hidden auto;
+    vertical-align: top;
+    list-style: none;
+
+    &::after {
+      display: block;
+      height: calc(#{$time-picker-cell-height} * 7);
+      content: '';
+    }
+  }
+
+  @include mixins.e(cell) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: $time-picker-cell-height;
+    margin: 0;
+    font-variant-numeric: tabular-nums;
+    list-style: none;
+    cursor: pointer;
+
+    &:not(.is-active):hover {
+      background-color: var(--#{variables.$prefix}background-color-hover);
+    }
+
+    @include mixins.when(active) {
+      background-color: var(--#{variables.$prefix}background-color-primary);
+    }
+
+    @include mixins.when(disabled) {
+      color: var(--#{variables.$prefix}color-disabled);
+      pointer-events: none;
+    }
+  }
+
+  @include mixins.e(footer) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 41px;
+    border-top: 1px solid var(--#{variables.$prefix}color-divider);
+  }
+}
+
+@include mixins.b(time-picker-popup) {
+  position: fixed;
+  background-color: var(--#{variables.$prefix}background-color);
+  border-radius: var(--#{variables.$prefix}border-radius);
+  box-shadow: var(--#{variables.$prefix}box-shadow-popup);
+}

package/components/timeline.scss

@@ -0,0 +1,107 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(timeline) {
+  $selector: &;
+
+  @include mixins.e(content) {
+    display: flex;
+    align-items: stretch;
+
+    #{$selector}__text {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    #{$selector}__track {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    #{$selector}__separator {
+      flex: 1 0 0;
+      width: 2px;
+    }
+
+    @include mixins.m(gap) {
+      height: 20px;
+    }
+  }
+
+  @include mixins.e(text-container) {
+    display: flex;
+
+    #{$selector}__text {
+      padding: 0 8px;
+      text-align: center;
+    }
+  }
+
+  @include mixins.e(text) {
+    flex: 1 0 0;
+
+    @include mixins.m(left) {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+
+  @include mixins.e(track-container) {
+    display: flex;
+
+    #{$selector}__track {
+      position: relative;
+      display: flex;
+      flex: 1 0 0;
+      align-items: center;
+    }
+
+    #{$selector}__separator {
+      flex: 1 0 0;
+      height: 2px;
+    }
+  }
+
+  @include mixins.e(track) {
+    color: var(--color);
+
+    @include mixins.when(wait) {
+      --color: var(--#{variables.$prefix}timeline-color, var(--#{variables.$prefix}color-disabled));
+    }
+
+    @include mixins.when(active) {
+      --color: var(--#{variables.$prefix}timeline-color, var(--#{variables.$prefix}color-primary));
+    }
+
+    @include mixins.when(completed) {
+      --color: var(--#{variables.$prefix}timeline-color, var(--#{variables.$prefix}color-success));
+    }
+
+    @include mixins.when(warning) {
+      --color: var(--#{variables.$prefix}timeline-color, var(--#{variables.$prefix}color-warning));
+    }
+
+    @include mixins.when(error) {
+      --color: var(--#{variables.$prefix}timeline-color, var(--#{variables.$prefix}color-danger));
+    }
+  }
+
+  @include mixins.e(dot) {
+    position: relative;
+    z-index: 5;
+    width: 12px;
+    height: 12px;
+    background-color: var(--#{variables.$prefix}background-color);
+    border: 2px solid currentcolor;
+    border-radius: 50%;
+  }
+
+  @include mixins.e(separator) {
+    background-color: var(--#{variables.$prefix}background-color-indicator);
+
+    @include mixins.m(hidden) {
+      background-color: transparent;
+    }
+  }
+}

package/components/toast.scss

@@ -0,0 +1,101 @@
+@use '../variables';
+@use '../mixins';
+
+@mixin toast-root {
+  position: fixed;
+  right: 20px;
+  left: 20px;
+  z-index: var(--#{variables.$prefix}zindex-max);
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+}
+
+##{variables.$prefix}toast-t-root {
+  top: 20px;
+
+  @include toast-root;
+}
+
+##{variables.$prefix}toast-b-root {
+  bottom: 20px;
+
+  @include toast-root;
+}
+
+@include mixins.b(toast) {
+  --color: var(--#{variables.$prefix}toast-color);
+
+  display: flex;
+  align-items: center;
+  max-width: calc(100vw - 40px);
+  padding: 6px 16px;
+  margin: 0 auto 12px;
+  pointer-events: all;
+  background-color: var(--#{variables.$prefix}background-color);
+  border-radius: var(--#{variables.$prefix}border-radius);
+  outline: none;
+  box-shadow: var(--#{variables.$prefix}box-shadow-dialog);
+
+  @include mixins.m(success) {
+    --color: var(--#{variables.$prefix}toast-color, var(--#{variables.$prefix}color-success));
+  }
+
+  @include mixins.m(warning) {
+    --color: var(--#{variables.$prefix}toast-color, var(--#{variables.$prefix}color-warning));
+  }
+
+  @include mixins.m(error) {
+    --color: var(--#{variables.$prefix}toast-color, var(--#{variables.$prefix}color-danger));
+  }
+
+  @include mixins.m(info) {
+    --color: var(--#{variables.$prefix}toast-color, var(--#{variables.$prefix}color-primary));
+  }
+
+  @include mixins.e(icon) {
+    padding: 4px 0;
+    margin-right: 8px;
+    font-size: 1.5em;
+    color: var(--color);
+  }
+
+  @include mixins.e(message) {
+    flex: 1 0 0;
+  }
+
+  @include mixins.e(close) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    margin: 0 0 0 8px;
+    font: inherit;
+    font-size: 1.25em;
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: top;
+    appearance: none;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    border-radius: 50%;
+    outline: none;
+    transition:
+      color var(--#{variables.$prefix}animation-duration-base) linear,
+      background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover,
+    &:focus {
+      background-color: var(--#{variables.$prefix}background-color-hover);
+    }
+
+    &:active {
+      color: var(--#{variables.$prefix}color-dark-primary);
+    }
+  }
+
+  @include mixins.e(message) {
+    padding: 4px 0;
+  }
+}

package/components/tooltip.scss

@@ -0,0 +1,118 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(tooltip) {
+  position: fixed;
+  padding: 4px 12px;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  color: #eef0f3;
+  white-space: pre;
+  background-color: var(--#{variables.$prefix}tooltip-background-color);
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  border-radius: 4px;
+  outline: none;
+
+  @include mixins.m(top) {
+    @include mixins.e(arrow) {
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, 50%) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(top-left) {
+    @include mixins.e(arrow) {
+      bottom: 0;
+      left: 20px;
+      transform: translate(0, 50%) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(top-right) {
+    @include mixins.e(arrow) {
+      right: 20px;
+      bottom: 0;
+      transform: translate(0, 50%) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(right) {
+    @include mixins.e(arrow) {
+      top: 50%;
+      left: 0;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(right-top) {
+    @include mixins.e(arrow) {
+      top: 12px;
+      left: 0;
+      transform: translate(-50%, 0) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(right-bottom) {
+    @include mixins.e(arrow) {
+      bottom: 12px;
+      left: 0;
+      transform: translate(-50%, 0) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(bottom) {
+    @include mixins.e(arrow) {
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(bottom-left) {
+    @include mixins.e(arrow) {
+      top: 0;
+      left: 20px;
+      transform: translate(0, -50%) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(bottom-right) {
+    @include mixins.e(arrow) {
+      top: 0;
+      right: 20px;
+      transform: translate(0, -50%) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(left) {
+    @include mixins.e(arrow) {
+      top: 50%;
+      right: 0;
+      transform: translate(50%, -50%) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(left-top) {
+    @include mixins.e(arrow) {
+      top: 12px;
+      right: 0;
+      transform: translate(50%, 0) rotate(45deg);
+    }
+  }
+
+  @include mixins.m(left-bottom) {
+    @include mixins.e(arrow) {
+      right: 0;
+      bottom: 12px;
+      transform: translate(50%, 0) rotate(45deg);
+    }
+  }
+
+  @include mixins.e(arrow) {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    pointer-events: none;
+    background-color: inherit;
+  }
+}

package/components/transfer.scss

@@ -0,0 +1,122 @@
+@use '../variables';
+@use '../mixins';
+
+$transfer-option-height: 32px;
+
+@include mixins.b(transfer) {
+  $selector: &;
+
+  display: flex;
+  align-items: center;
+
+  @each $invalid, $color in ('warning': 'warning', 'error': 'danger') {
+    &[data-l-form-invalid='#{$invalid}'] {
+      #{$selector}__panel {
+        border-color: var(--#{variables.$prefix}color-#{$color}) !important;
+      }
+    }
+  }
+
+  @include mixins.when(disabled) {
+    pointer-events: none;
+    filter: opacity(50%);
+  }
+
+  @include mixins.e(panel) {
+    flex: 1 0 0;
+    overflow: hidden;
+    border: 1px solid var(--#{variables.$prefix}color-border);
+    border-radius: var(--#{variables.$prefix}border-radius);
+  }
+
+  @include mixins.e(actions) {
+    display: flex;
+    flex-direction: column;
+    margin: 0 8px;
+
+    .#{variables.$prefix}button {
+      --#{variables.$prefix}button-size: 20px;
+      --#{variables.$prefix}button-font-size: 14px;
+    }
+
+    .#{variables.$prefix}button + .#{variables.$prefix}button {
+      margin-top: 4px;
+    }
+  }
+
+  @include mixins.e(header) {
+    display: flex;
+    align-items: center;
+    height: 41px;
+    padding: 0 12px;
+    border-bottom: 1px solid var(--#{variables.$prefix}color-divider);
+  }
+
+  @include mixins.e(header-title) {
+    @include mixins.utils-ellipsis;
+
+    flex: 1 0 0;
+    text-align: right;
+  }
+
+  @include mixins.e(search) {
+    margin: 10px 12px;
+  }
+
+  @include mixins.e(list-container) {
+    position: relative;
+  }
+
+  @include mixins.e(list) {
+    position: relative;
+    height: calc(#{$transfer-option-height} * 6);
+    padding: 0;
+    margin: 0;
+    overflow: hidden auto;
+    list-style: none;
+  }
+
+  @include mixins.e(loading) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--#{variables.$prefix}color-primary);
+    background-color: rgb(var(--#{variables.$prefix}background-color-rgb) / 80%);
+  }
+
+  @include mixins.e(option) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: $transfer-option-height;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover {
+      background-color: var(--#{variables.$prefix}background-color-hover);
+    }
+
+    @include mixins.when(disabled) {
+      color: var(--#{variables.$prefix}color-disabled);
+      pointer-events: none;
+    }
+  }
+
+  @include mixins.e(option-prefix) {
+    display: inline-flex;
+    margin-right: 8px;
+  }
+
+  @include mixins.e(option-content) {
+    @include mixins.utils-ellipsis;
+
+    flex: 1 0 0;
+  }
+}