@laser-ui/themes 0.0.1

package/components/notification.scss

@@ -0,0 +1,127 @@
+@use '../variables';
+@use '../mixins';
+
+@mixin notification-root {
+  position: fixed;
+  z-index: var(--#{variables.$prefix}zindex-max);
+  pointer-events: none;
+}
+
+##{variables.$prefix}notification-lt-root {
+  top: 20px;
+  left: 20px;
+
+  @include notification-root;
+}
+
+##{variables.$prefix}notification-rt-root {
+  top: 20px;
+  right: 20px;
+
+  @include notification-root;
+}
+
+##{variables.$prefix}notification-lb-root {
+  bottom: 20px;
+  left: 20px;
+
+  @include notification-root;
+}
+
+##{variables.$prefix}notification-rb-root {
+  right: 20px;
+  bottom: 20px;
+
+  @include notification-root;
+}
+
+@include mixins.b(notification) {
+  --color: var(--#{variables.$prefix}notification-color);
+
+  display: flex;
+  align-items: flex-start;
+  width: 380px;
+  max-width: calc(100vw - 40px);
+  padding: 12px 24px;
+  margin-bottom: 20px;
+  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}notification-color, var(--#{variables.$prefix}color-success));
+  }
+
+  @include mixins.m(warning) {
+    --color: var(--#{variables.$prefix}notification-color, var(--#{variables.$prefix}color-warning));
+  }
+
+  @include mixins.m(error) {
+    --color: var(--#{variables.$prefix}notification-color, var(--#{variables.$prefix}color-danger));
+  }
+
+  @include mixins.m(info) {
+    --color: var(--#{variables.$prefix}notification-color, var(--#{variables.$prefix}color-primary));
+  }
+
+  @include mixins.e(icon) {
+    padding: 4px 0;
+    margin-right: 10px;
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    font-size: 32px;
+    color: var(--color);
+  }
+
+  @include mixins.e(content) {
+    flex: 1 0 0;
+  }
+
+  @include mixins.e(header) {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  @include mixins.e(title) {
+    flex: 1 0 0;
+    padding: 4px 0;
+    font-size: var(--#{variables.$prefix}font-size-title);
+    font-weight: var(--#{variables.$prefix}font-weight-bold);
+  }
+
+  @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(description) {
+    padding: 1px 0 4px;
+  }
+}

package/components/pagination.scss

@@ -0,0 +1,134 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(pagination) {
+  --size: var(--#{variables.$prefix}pagination-size, var(--size-mini, 32px));
+  --font-size: var(--#{variables.$prefix}pagination-font-size, var(--font-size-mini, var(--#{variables.$prefix}font-size-medium)));
+  --button-padding-size: var(--#{variables.$prefix}pagination-button-padding-size, var(--button-padding-size-mini, 8px));
+  --gutter-x: var(--#{variables.$prefix}pagination-gutter-x, var(--gutter-x-mini, 6px));
+  --gutter-y: var(--#{variables.$prefix}pagination-gutter-y, var(--gutter-y-mini, 6px));
+
+  --#{variables.$prefix}select-size: var(--size);
+  --#{variables.$prefix}input-size: var(--size);
+
+  padding: 0;
+  font-size: var(--font-size);
+
+  @include mixins.e(row) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: calc(-1 * var(--gutter-y)) calc(-0.5 * var(--gutter-x)) 0 calc(-0.5 * var(--gutter-x));
+
+    & > * {
+      padding-right: calc(var(--gutter-x) * 0.5);
+      padding-left: calc(var(--gutter-x) * 0.5);
+      margin-top: var(--gutter-y);
+    }
+  }
+
+  @include mixins.m(mini) {
+    --size-mini: 24px;
+    --font-size-mini: var(--#{variables.$prefix}font-size-small);
+    --button-padding-size-mini: 4px;
+    --gutter-x-mini: 4px;
+    --gutter-y-mini: 2px;
+
+    @include mixins.e(button) {
+      &:not(.is-active) {
+        border-color: transparent;
+      }
+    }
+  }
+
+  @include mixins.e(jump) {
+    display: inline-flex;
+    align-items: center;
+
+    & > * + * {
+      margin-left: 4px;
+    }
+  }
+
+  @include mixins.e(button) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--size);
+    height: var(--size);
+    vertical-align: top;
+    cursor: pointer;
+    user-select: none;
+    border-radius: var(--#{variables.$prefix}border-radius);
+    outline: none;
+    transition:
+      border-color var(--#{variables.$prefix}animation-duration-base) linear,
+      color var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:hover,
+    &:focus {
+      color: var(--#{variables.$prefix}color-light-primary);
+      border-color: var(--#{variables.$prefix}color-light-primary);
+    }
+
+    @include mixins.when(disabled) {
+      color: var(--#{variables.$prefix}color-disabled);
+      pointer-events: none;
+    }
+
+    @include mixins.when(active) {
+      color: var(--#{variables.$prefix}color-primary);
+      border-color: var(--#{variables.$prefix}color-primary);
+    }
+
+    @include mixins.m(border) {
+      border: 1px solid var(--#{variables.$prefix}color-border);
+    }
+
+    @include mixins.m(number) {
+      padding: 0 var(--button-padding-size);
+      transition:
+        border-color var(--#{variables.$prefix}animation-duration-base) linear,
+        color var(--#{variables.$prefix}animation-duration-base) linear,
+        box-shadow var(--#{variables.$prefix}animation-duration-base) linear;
+
+      &:focus-visible {
+        box-shadow: 0 0 0 3px rgb(var(--#{variables.$prefix}color-primary-rgb) / var(--#{variables.$prefix}shadow-normal));
+      }
+    }
+
+    @include mixins.m(jump5) {
+      &:hover,
+      &:focus {
+        @include mixins.e(jump5-icon) {
+          opacity: 1;
+        }
+
+        @include mixins.e(ellipsis) {
+          opacity: 0;
+        }
+      }
+
+      @include mixins.e(jump5-icon) {
+        color: var(--#{variables.$prefix}color-primary);
+        opacity: 0;
+        transition: opacity var(--#{variables.$prefix}animation-duration-fast) linear;
+      }
+    }
+  }
+
+  @include mixins.e(ellipsis) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--#{variables.$prefix}color-disabled);
+    transition: opacity var(--#{variables.$prefix}animation-duration-fast) linear;
+    transform: scale(1.5);
+  }
+}

package/components/popover.scss

@@ -0,0 +1,197 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(popover) {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  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(mask) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: all;
+  }
+
+  @include mixins.e(content) {
+    position: absolute;
+    z-index: 1;
+    max-width: calc(100% - 32px);
+    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-popup);
+  }
+
+  @include mixins.e(arrow) {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    pointer-events: none;
+    background-color: inherit;
+  }
+
+  @include mixins.e(body) {
+    padding: 12px;
+  }
+
+  @include mixins.e(header) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    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-title);
+    font-weight: var(--#{variables.$prefix}font-weight-bold);
+  }
+
+  @include mixins.e(header-actions) {
+    @include mixins.polyfill-column-gap(6px);
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+
+    .#{variables.$prefix}button {
+      --#{variables.$prefix}button-size: 20px;
+      --#{variables.$prefix}button-padding-size: 6px;
+      --#{variables.$prefix}button-font-size: 14px;
+    }
+  }
+
+  @include mixins.e(footer) {
+    @include mixins.polyfill-column-gap(6px);
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 12px 10px;
+
+    .#{variables.$prefix}button {
+      --#{variables.$prefix}button-size: 28px;
+      --#{variables.$prefix}button-padding-size: 10px;
+      --#{variables.$prefix}button-font-size: 14px;
+    }
+
+    @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/progress.scss

@@ -0,0 +1,125 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@keyframes #{variables.$prefix}progress-line-wave {
+  0% {
+    opacity: 0.1;
+    transform: translateX(-100%) scaleX(0);
+  }
+
+  20% {
+    opacity: 0.5;
+    transform: translateX(-100%) scaleX(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(0) scaleX(1);
+  }
+}
+
+@include mixins.b(progress) {
+  --background-color: var(--#{variables.$prefix}progress-background-color, var(--#{variables.$prefix}background-color-indicator));
+
+  position: relative;
+  color: var(--color);
+
+  @include mixins.m(line) {
+    display: flex;
+    align-items: center;
+
+    @include mixins.e(label) {
+      flex-shrink: 0;
+      min-width: 2em;
+      margin-left: 8px;
+      /* stylelint-disable-next-line declaration-property-value-allowed-list */
+      font-size: 14px;
+    }
+  }
+
+  @include mixins.m(circle) {
+    display: inline-block;
+    vertical-align: top;
+
+    @include mixins.e(label) {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  @include mixins.m(dashboard) {
+    display: inline-block;
+    vertical-align: top;
+
+    @include mixins.e(label) {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  @include mixins.m(success) {
+    --color: var(--#{variables.$prefix}progress-color, var(--#{variables.$prefix}color-success));
+  }
+
+  @include mixins.m(warning) {
+    --color: var(--#{variables.$prefix}progress-color, var(--#{variables.$prefix}color-warning));
+  }
+
+  @include mixins.m(error) {
+    --color: var(--#{variables.$prefix}progress-color, var(--#{variables.$prefix}color-danger));
+  }
+
+  @include mixins.m(process) {
+    --color: var(--#{variables.$prefix}progress-color, var(--#{variables.$prefix}color-primary));
+
+    @include mixins.e(label) {
+      color: var(--#{variables.$prefix}color-text);
+    }
+  }
+
+  @include mixins.e(line-track) {
+    position: relative;
+    flex: 1 0 0;
+    background-color: var(--background-color);
+  }
+
+  @include mixins.e(line-bar) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    background-color: var(--color);
+    border-radius: inherit;
+    transition:
+      opacity var(--#{variables.$prefix}animation-duration-slow) ease,
+      background-color var(--#{variables.$prefix}animation-duration-slow) ease,
+      width var(--#{variables.$prefix}animation-duration-slow) ease;
+  }
+
+  @include mixins.e(line-wave) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: map.get(variables.$colors, 'white');
+    border-radius: inherit;
+    animation: #{variables.$prefix}progress-line-wave 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
+    animation-fill-mode: both;
+  }
+
+  @include mixins.e(svg) {
+    circle {
+      transition:
+        opacity var(--#{variables.$prefix}animation-duration-slow) ease,
+        stroke var(--#{variables.$prefix}animation-duration-slow) ease,
+        stroke-dasharray var(--#{variables.$prefix}animation-duration-slow) ease;
+    }
+  }
+}