@laser-ui/themes 0.0.1

package/components/slider.scss

@@ -0,0 +1,202 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(slider) {
+  --color: var(--#{variables.$prefix}slider-color, var(--#{variables.$prefix}color-primary));
+
+  position: relative;
+  cursor: pointer;
+
+  @each $invalid, $color in ('warning': 'warning', 'error': 'danger') {
+    &[data-l-form-invalid='#{$invalid}'] {
+      --color: var(--#{variables.$prefix}slider-color, var(--#{variables.$prefix}color-#{$color})) !important;
+    }
+  }
+
+  @include mixins.when(disabled) {
+    pointer-events: none;
+    filter: opacity(50%);
+  }
+
+  @include mixins.m(horizontal) {
+    width: calc(100% - 14px);
+    padding: 8px 0;
+    margin: 0 7px;
+
+    @include mixins.e(track) {
+      width: 100%;
+      height: 4px;
+    }
+
+    @include mixins.e(thumb) {
+      top: 0;
+      height: 100%;
+
+      @include mixins.when(focused) {
+        transform: scaleY(1.25);
+      }
+
+      @include mixins.m(draggable) {
+        &:hover {
+          transform: scaleY(1.25);
+        }
+      }
+    }
+
+    @include mixins.e(input-wrapper) {
+      top: -5px;
+    }
+
+    @include mixins.e(mark) {
+      top: 9px;
+    }
+
+    @include mixins.e(mark-label) {
+      top: 6px;
+      left: 1px;
+      transform: translateX(-50%);
+    }
+  }
+
+  @include mixins.m(vertical) {
+    display: inline-block;
+    height: calc(100% - 14px);
+    padding: 0 8px;
+    margin: 7px 0;
+
+    @include mixins.e(track) {
+      width: 4px;
+      height: 100%;
+    }
+
+    @include mixins.e(thumb) {
+      left: 0;
+      width: 100%;
+
+      @include mixins.when(focused) {
+        transform: scaleX(1.25);
+      }
+
+      @include mixins.m(draggable) {
+        &:hover {
+          transform: scaleX(1.25);
+        }
+      }
+    }
+
+    @include mixins.e(input-wrapper) {
+      left: -5px;
+    }
+
+    @include mixins.e(mark) {
+      left: 9px;
+    }
+
+    @include mixins.e(mark-label) {
+      top: 1px;
+      left: 10px;
+      transform: translateY(-50%);
+    }
+  }
+
+  @include mixins.e(track) {
+    position: relative;
+    background-color: var(--#{variables.$prefix}background-color-indicator);
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    border-radius: 2px;
+
+    @include mixins.m(reverse) {
+      transform: rotate(180deg);
+    }
+  }
+
+  @include mixins.e(thumb) {
+    position: absolute;
+    background-color: var(--color);
+    border-radius: inherit;
+
+    @include mixins.m(draggable) {
+      transition: transform var(--#{variables.$prefix}animation-duration-fast) linear;
+    }
+  }
+
+  @include mixins.e(mark) {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background-color: map.get(variables.$colors, 'white');
+    border-radius: 50%;
+
+    @include mixins.m(hidden) {
+      background-color: transparent;
+    }
+  }
+
+  @include mixins.e(mark-label) {
+    position: absolute;
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    font-size: 12px;
+    opacity: 0.5;
+    transition: opacity var(--#{variables.$prefix}animation-duration-fast) linear;
+
+    @include mixins.when(active) {
+      opacity: 1;
+    }
+  }
+
+  @include mixins.e(input-wrapper) {
+    position: absolute;
+    z-index: 1;
+    width: 14px;
+    height: 14px;
+    background-color: var(--#{variables.$prefix}background-color);
+    border: solid 2px var(--color);
+    border-radius: 50%;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: '';
+      border-radius: 50%;
+      opacity: var(--#{variables.$prefix}box-shadow-opacity-normal);
+      transition: box-shadow var(--#{variables.$prefix}animation-duration-fast) linear;
+    }
+
+    &:hover {
+      &::after {
+        box-shadow: 0 0 0 6px var(--color);
+      }
+    }
+
+    &:focus-within {
+      z-index: 5;
+
+      &::after {
+        box-shadow: 0 0 0 6px var(--color);
+      }
+    }
+  }
+
+  @include mixins.e(input) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    appearance: none;
+    pointer-events: none;
+    cursor: pointer;
+    border: none;
+    opacity: 0;
+  }
+}

package/components/slides.scss

@@ -0,0 +1,211 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(slides) {
+  position: relative;
+  overflow: hidden;
+  transition: height var(--#{variables.$prefix}animation-duration-base) linear;
+
+  @include mixins.m(vertical) {
+    @include mixins.e(container) {
+      flex-direction: column;
+    }
+
+    @include mixins.e(arrow) {
+      @include mixins.m(prev) {
+        top: 12px;
+        right: unset;
+        bottom: unset;
+        left: 50%;
+        transform: translate(-50%, 0) rotate(90deg);
+
+        @include mixins.when(hidden) {
+          transform: translate(-50%, -50%) rotate(90deg);
+        }
+      }
+
+      @include mixins.m(next) {
+        top: unset;
+        right: unset;
+        bottom: 12px;
+        left: 50%;
+        transform: translate(-50%, 0) rotate(90deg);
+
+        @include mixins.when(hidden) {
+          transform: translate(-50%, 50%) rotate(90deg);
+        }
+      }
+    }
+
+    @include mixins.e(pagination) {
+      right: 10px;
+      bottom: unset;
+      flex-direction: column;
+      width: unset;
+      height: 100%;
+
+      @include mixins.when(hidden) {
+        transform: translate(100%, 0);
+      }
+
+      @include mixins.m(dynamic) {
+        top: calc(50% - 40px);
+        left: unset;
+        width: unset;
+        height: 80px;
+      }
+    }
+
+    @include mixins.e(pagination-radio) {
+      margin: 4px 0;
+    }
+  }
+
+  @include mixins.m(fade) {
+    @include mixins.e(slide) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      opacity: 0;
+      transition: opacity var(--#{variables.$prefix}animation-duration-base) linear;
+    }
+  }
+
+  @include mixins.e(container) {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    transition: transform var(--#{variables.$prefix}animation-duration-base) linear;
+  }
+
+  @include mixins.e(slide) {
+    flex: 0 0 100%;
+    margin-bottom: auto;
+  }
+
+  @include mixins.e(arrow) {
+    position: absolute;
+    z-index: 5;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    font-size: 18px;
+    color: var(--#{variables.$prefix}text-color);
+    white-space: nowrap;
+    vertical-align: top;
+    appearance: none;
+    cursor: pointer;
+    background-color: var(--#{variables.$prefix}background-color);
+    border: none;
+    border-radius: 50%;
+    box-shadow: 0 1px 4px 0 var(--#{variables.$prefix}shadow-color);
+    transition:
+      opacity var(--#{variables.$prefix}animation-duration-base) linear,
+      color var(--#{variables.$prefix}animation-duration-base) linear,
+      background-color var(--#{variables.$prefix}animation-duration-base) linear,
+      transform var(--#{variables.$prefix}animation-duration-base) linear;
+
+    &:disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+
+    &:not(:disabled):hover {
+      color: var(--#{variables.$prefix}color-primary);
+      background-color: var(--#{variables.$prefix}background-color-primary-gray);
+    }
+
+    @include mixins.when(hidden) {
+      opacity: 0;
+    }
+
+    @include mixins.m(prev) {
+      top: 50%;
+      left: 16px;
+      transform: translate(0, -50%);
+
+      @include mixins.when(hidden) {
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    @include mixins.m(next) {
+      top: 50%;
+      right: 16px;
+      transform: translate(0, -50%);
+
+      @include mixins.when(hidden) {
+        transform: translate(50%, -50%);
+      }
+    }
+  }
+
+  @include mixins.e(pagination) {
+    position: absolute;
+    bottom: 12px;
+    z-index: 5;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    transition:
+      opacity var(--#{variables.$prefix}animation-duration-base) linear,
+      transform var(--#{variables.$prefix}animation-duration-base) linear;
+
+    @include mixins.when(hidden) {
+      opacity: 0;
+      transform: translate(0, 100%);
+    }
+
+    @include mixins.m(dynamic) {
+      left: calc(50% - 40px);
+      justify-content: flex-start;
+      width: 80px;
+    }
+  }
+
+  @include mixins.e(pagination-radio) {
+    position: relative;
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    margin: 0 4px;
+    appearance: none;
+    pointer-events: all;
+    cursor: pointer;
+    background: var(--#{variables.$prefix}background-color-mask);
+    border-radius: 50%;
+    transition:
+      transform var(--#{variables.$prefix}animation-duration-base) linear,
+      left var(--#{variables.$prefix}animation-duration-base) linear,
+      top var(--#{variables.$prefix}animation-duration-base) linear;
+
+    @include mixins.when(checked) {
+      background: var(--#{variables.$prefix}color-primary);
+    }
+
+    @include mixins.m(prev-1) {
+      transform: scale(0.66);
+    }
+
+    @include mixins.m(prev-2) {
+      transform: scale(0.33);
+    }
+
+    @include mixins.m(next-1) {
+      transform: scale(0.66);
+    }
+
+    @include mixins.m(next-2) {
+      transform: scale(0.33);
+    }
+  }
+}

package/components/spinner.scss

@@ -0,0 +1,43 @@
+@use '../variables';
+@use '../mixins';
+
+@include mixins.b(spinner) {
+  $selector: &;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--#{variables.$prefix}zindex-absolute);
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--#{variables.$prefix}color-primary);
+  background-color: rgb(var(--#{variables.$prefix}background-color-rgb) / 80%);
+
+  @include mixins.m(alone) {
+    position: relative;
+    top: unset;
+    right: unset;
+    bottom: unset;
+    left: unset;
+    display: inline-flex;
+    vertical-align: top;
+    background-color: transparent;
+  }
+
+  @include mixins.e(container) {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include mixins.e(icon) {
+    & + #{$selector}__text {
+      margin-top: 8px;
+    }
+  }
+}

package/components/stepper.scss

@@ -0,0 +1,226 @@
+@use 'sass:map';
+@use '../variables';
+@use '../mixins';
+
+@keyframes #{variables.$prefix}stepper-active {
+  0% {
+    box-shadow: 0 0 0 4px var(--color);
+    opacity: var(--#{variables.$prefix}box-shadow-opacity-normal);
+  }
+
+  100% {
+    box-shadow: 0 0 0 6px var(--color);
+    opacity: var(--#{variables.$prefix}box-shadow-opacity-dark);
+  }
+}
+
+@include mixins.b(stepper) {
+  $selector: &;
+
+  display: flex;
+
+  @include mixins.m(button) {
+    @include mixins.e(step) {
+      cursor: pointer;
+      transition: color var(--#{variables.$prefix}animation-duration-base) linear;
+
+      @include mixins.when(wait) {
+        @include mixins.e(step-dot) {
+          transition: border-color var(--#{variables.$prefix}animation-duration-base) linear;
+        }
+      }
+
+      &:hover,
+      &:focus {
+        color: var(--#{variables.$prefix}color-light-primary);
+
+        @include mixins.when(wait) {
+          @include mixins.e(step-dot) {
+            border: 1px solid var(--#{variables.$prefix}color-light-primary);
+          }
+        }
+      }
+    }
+  }
+
+  @include mixins.m(label-bottom) {
+    @include mixins.e(step-header) {
+      justify-content: center;
+    }
+
+    @include mixins.e(step-title) {
+      margin: 8px 0 0;
+      font-size: 1.1em;
+      text-align: center;
+    }
+
+    @include mixins.e(step-separator) {
+      position: absolute;
+    }
+
+    @include mixins.e(step-description) {
+      text-align: center;
+    }
+  }
+
+  @include mixins.m(vertical) {
+    flex-direction: column;
+
+    @include mixins.e(step) {
+      &:not(:last-child) {
+        padding-bottom: 20px;
+      }
+    }
+
+    @include mixins.e(step-separator) {
+      position: absolute;
+      width: 2px;
+
+      &::after {
+        top: 10px;
+        right: 0;
+        bottom: 10px;
+        left: 0;
+      }
+    }
+  }
+
+  @include mixins.e(step) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    &:not(:last-child) {
+      flex: 1 0 0;
+    }
+
+    @include mixins.when(wait) {
+      --color: var(--#{variables.$prefix}stepper-color, var(--#{variables.$prefix}color-disabled));
+
+      color: var(--color);
+
+      @include mixins.e(step-dot) {
+        border: 1px solid var(--color);
+      }
+    }
+
+    @include mixins.when(active) {
+      --color: var(--#{variables.$prefix}stepper-color, var(--#{variables.$prefix}color-primary));
+
+      @include mixins.e(step-dot) {
+        color: map.get(variables.$colors, 'white');
+        background-color: var(--color);
+
+        &:not(#{$selector}__step-dot--progress)::after {
+          animation: #{variables.$prefix}stepper-active 1.2s linear infinite alternate;
+          animation-fill-mode: both;
+        }
+      }
+    }
+
+    @include mixins.when(completed) {
+      --color: var(--#{variables.$prefix}stepper-color, var(--#{variables.$prefix}color-primary));
+
+      @include mixins.e(step-dot) {
+        color: map.get(variables.$colors, 'white');
+        background-color: var(--color);
+      }
+
+      @include mixins.e(step-separator) {
+        &::after {
+          background-color: var(--color);
+        }
+      }
+    }
+
+    @include mixins.when(warning) {
+      --color: var(--#{variables.$prefix}stepper-color, var(--#{variables.$prefix}color-warning));
+
+      color: var(--color);
+
+      @include mixins.e(step-dot) {
+        color: map.get(variables.$colors, 'white');
+        background-color: var(--color);
+      }
+
+      @include mixins.e(step-separator) {
+        &::after {
+          background-color: var(--color);
+        }
+      }
+    }
+
+    @include mixins.when(error) {
+      --color: var(--#{variables.$prefix}stepper-color, var(--#{variables.$prefix}color-danger));
+
+      color: var(--color);
+
+      @include mixins.e(step-dot) {
+        color: map.get(variables.$colors, 'white');
+        background-color: var(--color);
+      }
+
+      @include mixins.e(step-separator) {
+        &::after {
+          background-color: var(--color);
+        }
+      }
+    }
+  }
+
+  @include mixins.e(step-header) {
+    position: relative;
+    display: flex;
+    font-size: 1.1em;
+  }
+
+  @include mixins.e(step-title) {
+    margin-left: 8px;
+    font-weight: var(--#{variables.$prefix}font-weight-bold);
+  }
+
+  @include mixins.e(step-description) {
+    margin-top: 4px;
+  }
+
+  @include mixins.e(step-dot) {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: '';
+      border-radius: 50%;
+    }
+  }
+
+  @include mixins.e(step-separator) {
+    position: relative;
+    flex: 1 0 0;
+    height: 2px;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 10px;
+      bottom: 0;
+      left: 10px;
+      content: '';
+      background-color: var(--#{variables.$prefix}background-color-indicator);
+    }
+  }
+
+  @include mixins.e(step-progress) {
+    position: absolute;
+    top: -4px;
+    left: -4px;
+  }
+}