@laser-ui/themes 0.0.1

package/components/input.scss

@@ -0,0 +1,172 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(input) {
+  $selector: &;
+
+  display: inline-flex;
+  align-items: center;
+  height: var(--size);
+  padding: 0 calc(var(--horizontal-space) - 1px);
+  font-size: var(--font-size);
+  color: var(--#{variables.$prefix}color-text);
+  vertical-align: top;
+  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;
+      }
+    }
+  }
+
+  @include mixins.when(disabled) {
+    color: var(--#{variables.$prefix}color-disabled);
+    pointer-events: none;
+    background-color: var(--#{variables.$prefix}background-color-disabled);
+
+    @include mixins.e(input) {
+      &::placeholder {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  @include mixins.m(small) {
+    --size: var(--#{variables.$prefix}input-size, var(--#{variables.$prefix}size-small));
+    --horizontal-space: var(--#{variables.$prefix}input-horizontal-space, var(--#{variables.$prefix}horizontal-space-small));
+    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-small));
+  }
+
+  @include mixins.m(medium) {
+    --size: var(--#{variables.$prefix}input-size, var(--#{variables.$prefix}size-medium));
+    --horizontal-space: var(--#{variables.$prefix}input-horizontal-space, var(--#{variables.$prefix}horizontal-space-medium));
+    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-medium));
+  }
+
+  @include mixins.m(large) {
+    --size: var(--#{variables.$prefix}input-size, var(--#{variables.$prefix}size-large));
+    --horizontal-space: var(--#{variables.$prefix}input-horizontal-space, var(--#{variables.$prefix}horizontal-space-large));
+    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-large));
+  }
+
+  @include mixins.e(prefix) {
+    flex-shrink: 0;
+    margin-right: 4px;
+  }
+
+  @include mixins.e(input) {
+    display: inline-block;
+    flex: 1 0 0;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    appearance: none;
+    caret-color: var(--#{variables.$prefix}color-primary);
+    background-color: transparent;
+    border: none;
+    outline: none;
+
+    &[type='number'] {
+      appearance: textfield;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        margin: 0;
+        appearance: none;
+      }
+    }
+
+    &::placeholder {
+      color: var(--#{variables.$prefix}color-disabled);
+    }
+  }
+
+  @include mixins.e(clear) {
+    flex-shrink: 0;
+    margin: 0 0 0 4px;
+    color: var(--#{variables.$prefix}color-icon-decorator);
+    cursor: pointer;
+    transition:
+      color var(--#{variables.$prefix}animation-duration-base) linear,
+      opacity var(--#{variables.$prefix}animation-duration-fast) linear;
+
+    &:hover,
+    &:focus {
+      color: var(--#{variables.$prefix}color-light-primary);
+    }
+
+    &:active {
+      color: var(--#{variables.$prefix}color--dark-primary);
+    }
+  }
+
+  @include mixins.e(password) {
+    flex-shrink: 0;
+    padding: 0;
+    margin: 0 0 0 4px;
+    color: var(--#{variables.$prefix}color-icon-decorator);
+    cursor: pointer;
+    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(suffix) {
+    flex-shrink: 0;
+    margin-left: 4px;
+  }
+
+  @include mixins.e(number-container) {
+    display: inline-flex;
+    flex-direction: column;
+    height: 100%;
+    margin-left: 4px;
+  }
+
+  @include mixins.e(number) {
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    color: var(--#{variables.$prefix}color-icon-decorator);
+    cursor: pointer;
+    transition:
+      color var(--#{variables.$prefix}animation-duration-base) linear,
+      background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover,
+    &:focus {
+      color: var(--#{variables.$prefix}color-light-primary);
+      background-color: var(--#{variables.$prefix}background-color-light-primary);
+    }
+
+    &:active {
+      color: var(--#{variables.$prefix}color-dark-primary);
+      background-color: var(--#{variables.$prefix}background-color-primary);
+    }
+  }
+}

package/components/mask.scss

@@ -0,0 +1,11 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(mask) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--#{variables.$prefix}background-color-mask);
+}

package/components/menu.scss

@@ -0,0 +1,327 @@
+@use '../variables';
+@use '../mixins';
+
+$menu-item-height: 40px;
+
+@include mixins.b(menu) {
+  $selector: &;
+
+  position: relative;
+  padding: 8px 0;
+  outline: none;
+
+  &:not(#{&}--horizontal) {
+    overflow: hidden auto;
+  }
+
+  @include mixins.m(horizontal) {
+    display: inline-flex;
+    align-items: center;
+    min-width: 100%;
+
+    &::after {
+      position: absolute;
+      right: 4px;
+      bottom: 8px;
+      left: 4px;
+      height: 1px;
+      pointer-events: none;
+      content: '';
+      background-color: var(--#{variables.$prefix}background-color-indicator);
+    }
+  }
+
+  @include mixins.e(item) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: $menu-item-height;
+    margin: 0;
+    list-style: none;
+    cursor: pointer;
+    transition:
+      height var(--#{variables.$prefix}animation-duration-base) linear,
+      color var(--#{variables.$prefix}animation-duration-base) linear,
+      background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover {
+      color: var(--#{variables.$prefix}color-primary);
+    }
+
+    &:not(#{$selector}__item--horizontal):hover {
+      background-color: var(--#{variables.$prefix}background-color-light-primary);
+    }
+
+    @include mixins.when(active) {
+      color: var(--#{variables.$prefix}color-primary);
+
+      &:not(#{$selector}__item--horizontal) {
+        @include mixins.e(indicator-thumb) {
+          transform: scaleY(1);
+        }
+      }
+    }
+
+    @include mixins.when(disabled) {
+      pointer-events: none;
+      filter: opacity(50%);
+    }
+
+    @include mixins.m(item) {
+      padding: 0 16px;
+
+      &#{$selector}__item--horizontal:hover::after {
+        background-color: var(--#{variables.$prefix}color-primary);
+        transform: scaleX(1);
+      }
+    }
+
+    @include mixins.m(sub) {
+      &:not(#{$selector}__item--horizontal) {
+        padding-right: 32px;
+      }
+
+      &#{$selector}__item--horizontal {
+        @include mixins.when(expand) {
+          &::after {
+            background-color: var(--#{variables.$prefix}color-primary);
+            transform: scaleX(1);
+          }
+        }
+      }
+
+      &#{$selector}__item--icon {
+        @include mixins.e(sub-arrow) {
+          opacity: 0;
+        }
+      }
+
+      @include mixins.when(expand) {
+        color: var(--#{variables.$prefix}color-primary);
+      }
+    }
+
+    @include mixins.m(horizontal) {
+      display: inline-flex;
+      min-width: unset;
+      padding: 0 20px;
+
+      &::after {
+        position: absolute;
+        right: 20px;
+        bottom: -2px;
+        left: 20px;
+        z-index: 1;
+        height: 2px;
+        content: '';
+        background-color: transparent;
+        transition:
+          background-color var(--#{variables.$prefix}animation-duration-base) linear,
+          transform var(--#{variables.$prefix}animation-duration-base) linear;
+        transform: scaleX(0.8);
+      }
+
+      @include mixins.when(active) {
+        &::after {
+          background-color: var(--#{variables.$prefix}color-primary);
+          transform: scaleX(1);
+        }
+      }
+
+      @include mixins.e(item-content) {
+        flex-shrink: 0;
+      }
+    }
+
+    @include mixins.m(icon) {
+      height: 52px;
+
+      @include mixins.e(item-icon) {
+        width: 48px;
+        padding-left: 4px;
+        /* stylelint-disable-next-line declaration-property-value-allowed-list */
+        font-size: 24px;
+      }
+    }
+  }
+
+  @include mixins.e(item-icon) {
+    flex-shrink: 0;
+    width: calc(1em + 8px);
+    font-size: 1.25em;
+    transition:
+      width var(--#{variables.$prefix}animation-duration-base) linear,
+      padding var(--#{variables.$prefix}animation-duration-base) linear,
+      font-size var(--#{variables.$prefix}animation-duration-base) linear;
+    transform-origin: left;
+  }
+
+  @include mixins.e(item-content) {
+    @include mixins.utils-ellipsis;
+
+    min-width: 1em;
+  }
+
+  @include mixins.e(group-title) {
+    @include mixins.utils-ellipsis;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: $menu-item-height;
+    padding: 0 16px;
+    margin: 0;
+    font-size: var(--#{variables.$prefix}font-size-subtitle);
+    color: var(--#{variables.$prefix}color-text-sub);
+  }
+
+  @include mixins.e(group-list) {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  @include mixins.e(sub-list) {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  @include mixins.e(sub-arrow) {
+    position: absolute;
+    right: 21px;
+    width: 13px;
+    height: 3px;
+    pointer-events: none;
+    transition: transform var(--#{variables.$prefix}animation-duration-base) linear;
+    transform: rotate(90deg) scale(0.5);
+    transform-origin: 12px center;
+
+    @include mixins.when(expand) {
+      transform: translateY(-3px) rotate(90deg) scale(0.5);
+
+      div:nth-child(1) {
+        transform: rotate(130deg);
+      }
+
+      div:nth-child(2) {
+        transform: rotate(-130deg);
+      }
+    }
+
+    @include mixins.m(horizontal) {
+      right: 18px;
+      transform: rotate(0deg) scale(0.5);
+    }
+
+    div {
+      position: absolute;
+      width: 13px;
+      height: 3px;
+      background-color: currentcolor;
+      /* stylelint-disable-next-line declaration-property-value-allowed-list */
+      border-radius: 3px;
+      transition:
+        color var(--#{variables.$prefix}animation-duration-base) linear,
+        transform var(--#{variables.$prefix}animation-duration-base) linear;
+      transform-origin: 12px center;
+    }
+
+    div:nth-child(1) {
+      transform: rotate(50deg);
+    }
+
+    div:nth-child(2) {
+      transform: rotate(-50deg);
+    }
+  }
+
+  @include mixins.e(indicator) {
+    position: absolute;
+    height: 100%;
+    pointer-events: none;
+
+    @include mixins.m(first) {
+      @include mixins.e(indicator-track) {
+        bottom: 0;
+        height: calc(100% - 8px);
+      }
+
+      @include mixins.e(indicator-thumb) {
+        transform-origin: top;
+      }
+    }
+
+    @include mixins.m(last) {
+      @include mixins.e(indicator-track) {
+        top: 0;
+        height: calc(100% - 8px);
+      }
+
+      @include mixins.e(indicator-thumb) {
+        top: unset;
+        bottom: 8px;
+        transform-origin: bottom;
+      }
+    }
+  }
+
+  @include mixins.e(indicator-track) {
+    position: absolute;
+    left: -8px;
+    width: 2px;
+    height: 100%;
+    background-color: var(--#{variables.$prefix}background-color-indicator);
+
+    @include mixins.m(hidden) {
+      background-color: unset;
+    }
+  }
+
+  @include mixins.e(indicator-thumb) {
+    position: absolute;
+    top: 8px;
+    left: -8px;
+    width: 2px;
+    height: calc(100% - 16px);
+    background-color: var(--#{variables.$prefix}color-primary);
+    transition: transform var(--#{variables.$prefix}animation-duration-base) linear;
+    transform: scaleY(0);
+  }
+
+  @include mixins.e(empty) {
+    display: flex;
+    align-items: center;
+    height: $menu-item-height;
+    color: var(--#{variables.$prefix}color-disabled);
+  }
+}
+
+@include mixins.b(menu-popup) {
+  $menu-selector: '.#{variables.$prefix}menu';
+
+  $padding-size: 8px;
+
+  position: fixed;
+  padding: 4px;
+  background-color: var(--#{variables.$prefix}background-color);
+  border-radius: var(--#{variables.$prefix}border-radius);
+  box-shadow: var(--#{variables.$prefix}box-shadow-popup);
+
+  #{$menu-selector}__item {
+    padding: 0 $padding-size;
+  }
+
+  #{$menu-selector}__item--sub {
+    padding: 0 24px 0 $padding-size;
+  }
+
+  #{$menu-selector}__sub-arrow {
+    right: 12px;
+  }
+
+  #{$menu-selector}__group-title {
+    padding: 0 $padding-size;
+  }
+}

package/components/modal.scss

@@ -0,0 +1,139 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(modal) {
+  $selector: &;
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  outline: none;
+
+  @include mixins.m(center) {
+    display: flex;
+
+    @include mixins.e(content) {
+      max-height: calc(100% - 40px);
+      margin: auto;
+    }
+  }
+
+  @include mixins.m(alert) {
+    @include mixins.e(footer) {
+      padding: 0 16px 12px;
+      border-top: none;
+    }
+  }
+
+  @include mixins.e(content) {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    max-width: calc(100% - 32px);
+    margin: 0 auto;
+    background-color: var(--#{variables.$prefix}background-color);
+    border-radius: var(--#{variables.$prefix}border-radius);
+    box-shadow: 0 8px 40px 0 var(--#{variables.$prefix}box-shadow-color);
+  }
+
+  @include mixins.e(body) {
+    position: relative;
+    padding: 20px;
+    overflow: hidden auto;
+  }
+
+  @include mixins.e(header) {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    padding: 12px 20px;
+    border-bottom: 1px solid var(--#{variables.$prefix}color-divider);
+  }
+
+  @include mixins.e(header-title) {
+    @include mixins.utils-ellipsis;
+
+    flex: 1 0 0;
+    font-size: var(--#{variables.$prefix}font-size-header);
+    font-weight: var(--#{variables.$prefix}font-weight-bold);
+  }
+
+  @include mixins.e(header-actions) {
+    @include mixins.polyfill-column-gap(8px);
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+
+  @include mixins.e(footer) {
+    @include mixins.polyfill-column-gap(8px);
+
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    padding: 12px 16px;
+    border-top: 1px solid var(--#{variables.$prefix}color-divider);
+
+    @include mixins.m(left) {
+      justify-content: flex-start;
+    }
+
+    @include mixins.m(right) {
+      justify-content: flex-end;
+    }
+
+    @include mixins.m(center) {
+      justify-content: center;
+    }
+  }
+
+  @include mixins.e(alert) {
+    display: flex;
+
+    @include mixins.m(success) {
+      --color: var(--#{variables.$prefix}modal-alert-color, var(--#{variables.$prefix}color-success));
+    }
+
+    @include mixins.m(warning) {
+      --color: var(--#{variables.$prefix}modal-alert-color, var(--#{variables.$prefix}color-warning));
+    }
+
+    @include mixins.m(error) {
+      --color: var(--#{variables.$prefix}modal-alert-color, var(--#{variables.$prefix}color-danger));
+    }
+
+    @include mixins.m(info) {
+      --color: var(--#{variables.$prefix}modal-alert-color, var(--#{variables.$prefix}color-primary));
+    }
+  }
+
+  @include mixins.e(alert-icon) {
+    margin-right: 10px;
+    font-size: calc(var(--#{variables.$prefix}font-size-title) * 1.5);
+    color: var(--color);
+  }
+
+  @include mixins.e(alert-content) {
+    flex: 1 0 0;
+  }
+
+  @include mixins.e(alert-title) {
+    font-size: var(--#{variables.$prefix}font-size-title);
+    font-weight: var(--#{variables.$prefix}font-weight-bold);
+
+    & + #{ $selector}__alert-message {
+      margin-top: 6px;
+    }
+  }
+
+  @include mixins.e(alert-message) {
+    color: var(--#{variables.$prefix}color-text-sub);
+  }
+}