@laser-ui/themes 0.0.1

package/components/compose.scss

@@ -0,0 +1,121 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(compose) {
+  display: inline-flex;
+  align-items: stretch;
+  vertical-align: top;
+
+  & > [data-l-compose-disabled='true'] {
+    z-index: 0;
+  }
+
+  & > :not([data-l-compose-disabled='true']) {
+    z-index: 1;
+
+    &[data-l-compose-active='true'] {
+      z-index: 2;
+    }
+
+    &[data-l-form-invalid='warning'] {
+      z-index: 5;
+    }
+
+    &[data-l-form-invalid='error'] {
+      z-index: 6;
+    }
+
+    &:hover {
+      z-index: 9;
+    }
+
+    &:focus,
+    &:focus-within {
+      z-index: 10;
+    }
+  }
+
+  &:not(#{&}--vertical) {
+    & > :not(:first-child):not(:only-child) {
+      margin-left: -1px !important;
+    }
+
+    & > :first-child:not(:only-child) {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+
+    & > :last-child:not(:only-child) {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+
+    & > :not(:first-child):not(:last-child) {
+      border-radius: 0 !important;
+    }
+  }
+
+  @include mixins.m(vertical) {
+    flex-direction: column;
+
+    & > :not(:first-child):not(:only-child) {
+      margin-top: -1px !important;
+    }
+
+    & > :first-child:not(:only-child) {
+      border-bottom-right-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+
+    & > :last-child:not(:only-child) {
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+
+    & > :not(:first-child):not(:last-child) {
+      border-radius: 0 !important;
+    }
+  }
+
+  @include mixins.e(item) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--size);
+    height: var(--size);
+    padding: 0 calc(var(--padding-size) - 1px);
+    font-size: var(--font-size);
+    white-space: nowrap;
+    vertical-align: top;
+    border: 1px solid var(--#{variables.$prefix}color-border);
+    border-radius: var(--#{variables.$prefix}border-radius);
+
+    @include mixins.when(disabled) {
+      color: var(--#{variables.$prefix}color-disabled);
+      pointer-events: none;
+      background-color: var(--#{variables.$prefix}background-color-disabled);
+    }
+
+    @include mixins.m(gray) {
+      background-color: var(--#{variables.$prefix}background-color-light-gray);
+    }
+
+    @include mixins.m(small) {
+      --size: var(--#{variables.$prefix}compose-size, var(--#{variables.$prefix}size-small));
+      --padding-size: var(--#{variables.$prefix}compose-padding-size, var(--#{variables.$prefix}padding-size-small));
+      --font-size: var(--#{variables.$prefix}compose-font-size, var(--#{variables.$prefix}font-size-small));
+    }
+
+    @include mixins.m(medium) {
+      --size: var(--#{variables.$prefix}compose-size, var(--#{variables.$prefix}size-medium));
+      --padding-size: var(--#{variables.$prefix}compose-padding-size, var(--#{variables.$prefix}padding-size-medium));
+      --font-size: var(--#{variables.$prefix}compose-font-size, var(--#{variables.$prefix}font-size-medium));
+    }
+
+    @include mixins.m(large) {
+      --size: var(--#{variables.$prefix}compose-size, var(--#{variables.$prefix}size-large));
+      --padding-size: var(--#{variables.$prefix}compose-padding-size, var(--#{variables.$prefix}padding-size-large));
+      --font-size: var(--#{variables.$prefix}compose-font-size, var(--#{variables.$prefix}font-size-large));
+    }
+  }
+}

package/components/date-picker.scss

@@ -0,0 +1,310 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+$date-picker-cell-height: 28px;
+
+@include mixins.b(date-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(preset) {
+    min-width: 120px;
+    padding: 4px;
+    margin: 0;
+    overflow: hidden auto;
+    list-style: none;
+    border-right: 1px solid var(--#{variables.$prefix}color-divider);
+  }
+
+  @include mixins.e(preset-option) {
+    padding: 0 6px;
+    margin: 0;
+    line-height: 28px;
+    list-style: none;
+    cursor: pointer;
+    transition: background-color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover {
+      background-color: var(--#{variables.$prefix}background-color-hover);
+    }
+  }
+
+  @include mixins.e(panel-wrapper) {
+    white-space: nowrap;
+  }
+
+  @include mixins.e(panel) {
+    display: inline-block;
+    vertical-align: top;
+
+    & + .#{variables.$prefix}time-picker__panel {
+      border-left: 1px solid var(--#{variables.$prefix}color-divider);
+    }
+  }
+
+  @include mixins.e(header) {
+    display: flex;
+    align-items: center;
+    height: 41px;
+    padding: 0 8px;
+    border-bottom: 1px solid var(--#{variables.$prefix}color-divider);
+  }
+
+  @include mixins.e(header-button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: var(--#{variables.$prefix}color-icon-decorator);
+    white-space: nowrap;
+    vertical-align: top;
+    appearance: none;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    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(header-date) {
+    margin: 0 auto;
+  }
+
+  @include mixins.e(table) {
+    width: calc(7 * 36px);
+    margin: 4px;
+    table-layout: fixed;
+    border-collapse: collapse;
+
+    tr {
+      height: 32px;
+    }
+  }
+
+  @include mixins.e(cell) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 26px;
+    cursor: pointer;
+
+    &:not(.is-active):not(.is-hover):not(.is-between):not(.is-between-hover):hover {
+      background-color: var(--#{variables.$prefix}background-color-hover);
+    }
+
+    @include mixins.when(active) {
+      color: map.get(variables.$colors, 'white');
+      background-color: var(--#{variables.$prefix}color-primary);
+    }
+
+    @include mixins.when(hover) {
+      color: map.get(variables.$colors, 'white');
+      background-color: var(--#{variables.$prefix}color-light-primary);
+    }
+
+    @include mixins.when(between) {
+      background-color: var(--#{variables.$prefix}background-color-primary);
+    }
+
+    @include mixins.when(between-hover) {
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        content: '';
+        background-color: var(--#{variables.$prefix}background-color-primary);
+      }
+    }
+
+    @include mixins.when(disabled) {
+      color: var(--#{variables.$prefix}color-disabled);
+      pointer-events: none;
+      background-color: var(--#{variables.$prefix}background-color-disabled);
+    }
+
+    @include mixins.m(out-month) {
+      color: var(--#{variables.$prefix}color-disabled);
+    }
+
+    @include mixins.m(today) {
+      &::after {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        bottom: 2px;
+        left: 2px;
+        content: '';
+        border: 1px solid var(--#{variables.$prefix}color-primary);
+      }
+    }
+  }
+
+  @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(date-picker-popup) {
+  position: fixed;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  overflow: auto;
+  background-color: var(--#{variables.$prefix}background-color);
+  border-radius: var(--#{variables.$prefix}border-radius);
+  box-shadow: var(--#{variables.$prefix}box-shadow-popup);
+}

package/components/drawer.scss

@@ -0,0 +1,113 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(drawer) {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  outline: none;
+  transition: transform var(--#{variables.$prefix}animation-duration-base) linear;
+
+  @include mixins.m(top) {
+    @include mixins.e(content) {
+      top: 0;
+      left: 0;
+      width: 100%;
+      border-radius: 0 0 var(--#{variables.$prefix}border-radius) var(--#{variables.$prefix}border-radius);
+    }
+  }
+
+  @include mixins.m(bottom) {
+    @include mixins.e(content) {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      border-radius: var(--#{variables.$prefix}border-radius) var(--#{variables.$prefix}border-radius) 0 0;
+    }
+  }
+
+  @include mixins.m(left) {
+    @include mixins.e(content) {
+      top: 0;
+      left: 0;
+      height: 100%;
+      border-radius: 0 var(--#{variables.$prefix}border-radius) var(--#{variables.$prefix}border-radius) 0;
+    }
+  }
+
+  @include mixins.m(right) {
+    @include mixins.e(content) {
+      top: 0;
+      right: 0;
+      height: 100%;
+      border-radius: var(--#{variables.$prefix}border-radius) 0 0 var(--#{variables.$prefix}border-radius);
+    }
+  }
+
+  @include mixins.e(content) {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    max-height: 100%;
+    background-color: var(--#{variables.$prefix}background-color);
+    box-shadow: 0 8px 40px 0 var(--#{variables.$prefix}box-shadow-color);
+  }
+
+  @include mixins.e(body) {
+    position: relative;
+    flex: 1 0 0;
+    padding: 20px;
+    overflow: hidden auto;
+  }
+
+  @include mixins.e(header) {
+    position: relative;
+    display: flex;
+    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;
+    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;
+    }
+  }
+}

package/components/dropdown.scss

@@ -0,0 +1,156 @@
+@use '../variables';
+@use '../mixins';
+
+$dropdown-item-height: 32px;
+
+@include mixins.b(dropdown) {
+  @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(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.e(item) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: $dropdown-item-height;
+    margin: 0;
+    list-style: none;
+    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.m(item) {
+      padding: 0 12px;
+    }
+
+    @include mixins.m(sub) {
+      padding: 0 24px 0 12px;
+
+      @include mixins.when(expand) {
+        background-color: var(--#{variables.$prefix}background-color-hover);
+      }
+    }
+  }
+
+  @include mixins.e(item-icon) {
+    flex-shrink: 0;
+    width: calc(1em + 8px);
+    font-size: 1.25em;
+  }
+
+  @include mixins.e(item-content) {
+    @include mixins.utils-ellipsis;
+  }
+
+  @include mixins.e(group-title) {
+    @include mixins.utils-ellipsis;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: $dropdown-item-height;
+    padding: 0 12px;
+    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-arrow) {
+    position: absolute;
+    right: 4px;
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  @include mixins.e(list) {
+    position: relative;
+    min-width: 120px;
+    max-height: calc(8px + #{$dropdown-item-height} * 6);
+    padding: 4px 0;
+    margin: 0;
+    overflow: hidden auto;
+    list-style: none;
+  }
+
+  @include mixins.e(empty) {
+    display: flex;
+    align-items: center;
+    height: $dropdown-item-height;
+    padding: 0 12px;
+    color: var(--#{variables.$prefix}color-disabled);
+  }
+
+  @include mixins.e(arrow) {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    pointer-events: none;
+    background-color: inherit;
+  }
+}
+
+@include mixins.b(dropdown-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);
+}