@milaboratories/uikit 1.2.3

package/src/assets/mixins.scss

@@ -0,0 +1,204 @@
+@import './base-btn';
+
+@mixin mask-var($bg) {
+  -webkit-mask-image: $bg;
+  mask-image: $bg;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: var(--mask-size);
+  width: var(--mask-size);
+  height: var(--mask-size);
+}
+
+@mixin vendor-prefix($name, $value) {
+  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
+    #{$vendor}#{$name}: #{$value};
+  }
+}
+
+@mixin size($w: 24px, $h: null) {
+  width: $w;
+
+  @if $h ==null {
+    height: $w;
+  } @else {
+    height: $h;
+  }
+}
+
+@mixin icon($bg, $w: 24px, $h: null) {
+  background: $bg no-repeat center;
+  width: $w;
+
+  @if $h ==null {
+    height: $w;
+  } @else {
+    height: $h;
+  }
+}
+
+@mixin theme-icon($bg-light, $bg-dark, $w: 24px, $h: null) {
+  background: $bg-light no-repeat center;
+
+  width: $w;
+
+  @if $h ==null {
+    height: $w;
+  } @else {
+    height: $h;
+  }
+}
+
+@mixin mask($url, $w: 24px, $h: null) {
+  mask-image: $url;
+  -webkit-mask-image: $url;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: $w;
+  -webkit-mask-size: $w;
+  width: $w;
+
+  @if $h ==null {
+    height: $w;
+  } @else {
+    height: $h;
+  }
+}
+
+@mixin flex($direction: row, $justify: center, $align: center) {
+  display: flex;
+  flex-direction: $direction;
+  justify-content: $justify;
+  align-items: $align;
+}
+
+@mixin scrollbar($y: true, $x: false, $over: auto) {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 5px;
+    padding-right: 5px;
+    background-color: transparent;
+    display: block;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-ic-02);
+    border-radius: 5px;
+  }
+
+  @if $y {
+    overflow-y: $over;
+  }
+
+  @if $x {
+    overflow-x: $over;
+  }
+
+  &:hover {
+    --color-ic-02: var(--border-color-focus);
+  }
+}
+
+@mixin border-fix($offset: 0) {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: $offset;
+    left: $offset;
+    right: $offset;
+    bottom: $offset;
+    pointer-events: none;
+    @content;
+  }
+}
+
+@mixin abs-center-y {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+// label for "outlined" form controls
+@mixin outlined-control-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  top: 0;
+  transform: translateY(-60%);
+  left: var(--label-offset-left-x);
+  padding: 0 4px;
+  max-width: calc(100% - 16px);
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+  cursor: inherit;
+  color: var(--label-color);
+  font-size: 12px;
+  font-weight: 500;
+
+  > span {
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+  }
+
+  .required-icon {
+    background: url(@/assets/images/required.svg);
+    width: 5px;
+    height: 12px;
+    margin-top: 2px;
+  }
+}
+
+@mixin field-helper {
+  font-size: 12px;
+  color: var(--txt-03);
+  padding: 2px 0 0;
+  white-space: pre-wrap;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  line-height: 16px;
+  margin-top: 6px;
+}
+
+@mixin field-error {
+  font-size: 12px;
+  color: var(--txt-error);
+  padding: 2px 0 0;
+  white-space: pre-wrap;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  line-height: 16px;
+  margin-top: 6px;
+}
+
+@mixin scrollbarTable($y: true, $x: false) {
+  @if $y {
+    overflow-y: auto;
+  }
+
+  @if $x {
+    overflow-x: auto;
+  }
+
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 8px;
+    background-color: #e1e3eb;
+    display: block;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #fff;
+    border-radius: 9999px;
+    background-clip: padding-box;
+    border: 2px solid transparent;
+    border-right: 1px solid transparent;
+  }
+}

package/src/assets/progress-bar.scss

@@ -0,0 +1,28 @@
+.ui-progress-bar {
+  background-color: red;
+  height: 40px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color-default);
+  background-color: var(--bg-elevated-01);
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  &__indicator {
+    position: absolute;
+    height: 100%;
+    transition: width 0.4s ease-in-out;
+    background: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);
+  }
+
+  &__messages {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    z-index: 1;
+  }
+
+  &__percent {
+    transition: all 4s ease-in-out;
+  }
+}

package/src/assets/scroll.scss

@@ -0,0 +1,65 @@
+.ui-scrollable {
+  position: relative;
+  overflow: hidden;
+  padding-right: 14px;
+  &__container {
+    overflow: hidden;
+    max-height: 100%;
+  }
+}
+
+.v-scroll {
+  --v-scroll-width: 14px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--v-scroll-width);
+  border: 1px solid #E1E3EB;
+  background-color: #FFF;
+  transition-delay: 1s;
+  z-index: 10;
+  &__scrollbar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      background-color: var(--color-ic-02);
+      border-radius: 4px;
+    }
+  }
+}
+
+.h-scroll {
+  --v-scroll-width: 14px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--v-scroll-width);
+  border: 1px solid #E1E3EB;
+  background-color: #FFF;
+  transition-delay: 1s;
+  z-index: 9;
+  &__scrollbar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      background-color: var(--color-ic-02);
+      border-radius: 4px;
+    }
+  }
+}

package/src/assets/slider.scss

@@ -0,0 +1,241 @@
+@import "./mixins";
+
+.ui-slider {
+  --progress-bg: linear-gradient(to right, #A1E59C, #D0F5B0);
+  --border-color: var(--color-border-default);
+  --padding-gap: 8px; // half of thumb width
+
+  // * {
+  //   outline: none;
+  // }
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &__envelope {
+    font-family: var(--control-font-family);
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+  }
+
+  &__mode-text,
+  &__mode-input {
+    padding-bottom: 12px;
+
+    label {
+      margin-bottom: 8px;
+    }
+  }
+
+  &__mode-input {
+    display: flex;
+    flex-direction: row;
+    padding-bottom: 0;
+
+    .ui-slider__wrapper {
+      padding-bottom: 12px;
+    }
+  }
+
+  &__input-wrapper {
+    align-items: center;
+
+    .ui-input-range {
+      margin-left: 12px;
+    }
+  }
+
+  &__wrapper {
+    flex-grow: 1;
+  }
+
+  &__value {
+    display: flex;
+    width: 56px;
+    height: 32px;
+    margin-left: 12px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    background: var(--bg-elevated-01);
+    text-align: center;
+  }
+
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
+  }
+
+  &__base {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__container {
+    flex: 1;
+    position: relative;
+    width: 100%;
+  }
+
+  &__container-thumb {
+    // height: 10px;
+    flex: unset;
+    width: calc(100% - 16px);
+    transform: translateY(-4px);
+  }
+
+  &__bar {
+    position: relative;
+    border: 1px solid var(--border-color);
+    height: 8px;
+    border-radius: 4px;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__progress {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--progress-bg);
+  }
+
+  &__thumb {
+    cursor: pointer;
+    outline: none;
+    position: absolute;
+    box-sizing: border-box;
+    top: 50%;
+    transform: translate(50%, -50%);
+    border-radius: 3px;
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--color-border-default);
+    background: var(--color-ic-00, #FFF);
+    box-shadow: 0 2px 6px 0 rgba(17, 5, 41, 0.16), 0px -3px 0px 0px rgba(36, 34, 61, 0.12) inset;
+  }
+
+  &__thumb:active {
+    border-width: 2px;
+    z-index: 1;
+  }
+
+  &__thumb:focus-visible &__thumb-focused-contour {
+    display: block;
+    z-index: 1;
+  }
+
+  &__thumb:active &__thumb-focused-contour {
+    display: none;
+    z-index: 1;
+    top: -1px;
+    left: -1px;
+  }
+
+  &__thumb-focused-contour {
+    display: none;
+    width: 22px;
+    height: 22px;
+    position: absolute;
+    top: 0;
+    transform: translate(-4px, -4px);
+    border-radius: 5px;
+    border: 2px solid var(--border-color-focus);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  &__label-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__value-static {
+    margin-bottom: 8px;
+  }
+
+  &__triple-thumb::before {
+    content: attr(data-percent);
+    position: relative;
+    display: block;
+    width: fit-content;
+    top: -24px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    color: var(--txt-01);
+    font-family: Manrope;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+  }
+
+  &__triple &__label-section {
+    margin-bottom: 20px;
+  }
+
+  &__triple-thumb::after {
+    content: attr(data-hint);
+    position: relative;
+    display: block;
+    width: fit-content;
+    top: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    color: var(--txt-03);
+    font-family: Manrope;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+  }
+
+  &__triple-thumb:active::before {
+    top: -25px;
+  }
+
+  &__triple-thumb:active::after {
+    top: -1px;
+  }
+
+  &__triple {
+    padding-bottom: 12px;
+  }
+
+  &__thumb-step {
+    border-left: 1px solid var(--color-border-default);
+    height: 2px;
+    position: absolute;
+    top: 0;
+    transform: translateY(-1px);
+  }
+
+  &__disabled {
+
+    *,
+    *::before,
+    *::after {
+      color: var(--color-dis-01) !important;
+      border-color: var(--color-dis-01) !important;
+      pointer-events: none !important;
+    }
+
+    .ui-slider__progress {
+      opacity: 0.5;
+    }
+  }
+}

package/src/assets/sortable.scss

@@ -0,0 +1,10 @@
+.sortable {
+  &__item {
+    z-index: 1;
+    user-select: none;
+  }
+
+  &__animate {
+    transition: transform 0.15s ease-in-out;
+  }
+}

package/src/assets/theme-switcher.scss

@@ -0,0 +1,32 @@
+@import "./mixins";
+
+.ui-theme-switcher {
+  $root: &;
+
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+
+  > div {
+    background-color: var(--theme-switcher-icon-color);
+    @include mask(url('./images/24_dark-mode.svg'), 24px);
+  }
+
+  &.dark {
+    > div {
+      @include mask(url('./images/24_light-mode.svg'), 24px);
+    }
+
+    &:hover {
+      --theme-switcher-icon-color: var(--color-ic-link);
+    }
+  }
+
+  &:hover {
+    background-color: var(--color-sec-hover-white);
+  }
+}