@ldmjs/ui 1.0.89 → 2.0.0-beta.0

package/dist/scss/_radiobutton.scss

@@ -0,0 +1,218 @@
+@use "sass:list";
+
+$colors: (
+  "primary": (
+    // default color
+    var(--primary),
+    // hover color
+    var(--primary-d-1),
+    // active color
+    var(--primary-d-2)
+  ),
+  "error": (
+    var(--error),
+    var(--error-d-1),
+    var(--error-d-2),
+  ),
+);
+
+$sizearray: (
+  "x-small": (
+    // height
+    var(--radio-s),
+    // font size
+    var(--text-body-s),
+
+  ),
+  "small": (
+    var(--radio-m),
+    var(--text-body-m),
+  ),
+  "large": (
+    var(--radio-l),
+    var(--text-body-l),
+  ),
+);
+
+body {
+  .ld-radiobutton {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    label[for] {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.1s;
+
+      input[type='radio'] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+        opacity: 0;
+      }
+    }
+
+    @each $color, $values in $colors {
+      &.ld-radiobutton.text-#{$color} {
+        $d: list.nth($values, 1);
+        $h: list.nth($values, 2);
+        $a: list.nth($values, 3);
+        label[for] {
+          input[type='radio'] + .ld-radiobutton-icon {
+            background-color: var(--white);
+          }
+
+          input[type='radio']:checked + .ld-radiobutton-icon {
+            background-color: $d;
+            outline-color: $d;
+          }
+
+          &:hover {
+            input[type='radio']:checked + .ld-radiobutton-icon {
+              background-color: $h;
+              outline-color: $h;
+            }
+          }
+
+          &:active {
+            input[type='radio']:checked + .ld-radiobutton-icon {
+              background-color: $a;
+              outline-color: $a;
+            }
+          }
+        }
+
+        &.ld-radiobutton--hovered {
+          label[for] {
+            input[type='radio']:checked + .ld-radiobutton-icon {
+              background-color: $h;
+              outline-color: $h;
+            }
+          }
+        }
+      }
+    }
+
+    @each $size, $values in $sizearray {
+      &.ld-radiobutton--#{$size} {
+        $h: list.nth($values, 1);
+        $f: list.nth($values, 2);
+        min-height: calc($h + 8px);
+
+        label[for] {
+          width: calc($h + 4px);
+          height: calc($h + 4px);
+          border-radius: calc($h + 4px);
+
+          .ld-radiobutton-icon {
+            width: $h;
+            height: $h;
+            border: 1px solid var(--grey-l-4);
+            border-radius: $h;
+            box-sizing: border-box;
+          }
+
+          input[type='radio']:checked + .ld-radiobutton-icon {
+            border: calc($h / 4) solid var(--white);
+            outline: 1px solid var(--primary);
+          }
+
+          &:hover {
+            background-color: var(--shade-05);
+
+            input[type='radio']:checked + .ld-radiobutton-icon {
+              border: calc($h / 4) solid var(--white);
+              outline: 1px solid var(--primary);
+            }
+          }
+
+          &:active {
+            input[type='radio']:checked + .ld-radiobutton-icon {
+              border: calc($h / 4) solid var(--white);
+              outline: 1px solid var(--primary);
+            }
+          }
+        }
+
+        &.ld-radiobutton--hovered {
+          label[for] {
+            background-color: var(--shade-05);
+          }
+        }
+
+        &.ld-radiobutton--focused {
+          label[for] {
+            &:after {
+              content: '';
+              display: block;
+              position: absolute;
+              top: -2px;
+              left: -2px;
+              width: calc(100% + 4px);
+              height: calc(100% + 4px);
+              border: 2px solid var(--focus);
+              border-radius: $h;
+            }
+          }
+        }
+
+        &.ld-radiobutton--disabled,
+        &.ld-radiobutton--readonly {
+          label[for] {
+            &:hover {
+              background-color: unset;
+            }
+
+            .ld-radiobutton-icon {
+              background-color: var(--grey-l-5);
+              border: 1px solid var(--grey-l-5);
+            }
+
+            input[type='radio']:checked + .ld-radiobutton-icon {
+              background-color: var(--white);
+            }
+          }
+        }
+
+        &.ld-radiobutton--disabled {
+          .ld-label-content {
+            color: var(--grey-l-2);
+          }
+        }
+
+        &.ld-radiobutton--readonly {
+          .ld-label-content {
+            color: var(--grey-d-3);
+          }
+        }
+
+        &:not(.ld-radiobutton--label-to-left) {
+          .ld-radiobutton-hint {
+            padding-left: calc($h + 8px + 4px);
+          }
+        }
+
+        .ld-label-content {
+          font-size: $f;
+          line-height: calc($f + 6px);
+        }
+
+        .ld-radiobutton-hint {
+          font-size: calc($f - 2px);
+          line-height: calc($f - 2px + 6px);
+        }
+      }
+    }
+
+    .ld-radiobutton-hint {
+      font-family: var(--regular);
+      color: var(--grey-d-1);
+    }
+  }
+}
+

package/dist/scss/_radiogroup.scss

@@ -0,0 +1,86 @@
+@use "sass:list";
+
+:root {
+  --radio-s: 16px;
+  --radio-m: 20px;
+  --radio-l: 24px;
+}
+
+$sizearray: (
+  "x-small": (
+    // font size
+    var(--text-body-s),
+  ),
+  "small": (
+    var(--text-body-m),
+  ),
+  "large": (
+    var(--text-body-l),
+  ),
+);
+
+body {
+  .ld-radiogroup {
+    padding: 0 !important;
+
+    .ld-radiogroup-radiobuttons {
+      display: flex;
+    }
+
+    .ld-radiogroup-label {
+      min-height: unset;
+    }
+
+    .validate {
+      overflow: hidden;
+      height: 20px;
+    }
+
+    &.ld-radiogroup--row {
+      &.ld-radiogroup--ltr {
+        .ld-radiogroup-radiobuttons {
+          flex-direction: row;
+        }
+        .ld-radiobutton:not(:first-child) {
+          margin-left: 8px;
+        }
+      }
+      &.ld-radiogroup--rtl {
+        .ld-radiogroup-radiobuttons {
+          flex-direction: row-reverse;
+        }
+        .ld-radiobutton:not(:first-child) {
+          margin-right: 8px;
+        }
+      }
+    }
+
+    &.ld-radiogroup--column {
+      :deep(.ld-radiogroup-label) {
+        margin-bottom: 16px;
+      }
+      .ld-radiogroup-radiobuttons {
+        flex-direction: column;
+        :deep(.ld-radiobutton) {
+          margin-bottom: 14px;
+        }
+        :deep(.ld-label) {
+          min-height: unset;
+        }
+      }
+    }
+
+    @each $size, $values in $sizearray {
+      $f: list.nth($values, 1);
+
+      &.ld-radiogroup--#{$size} {
+        .ld-radiogroup-label {
+          .ld-label-content {
+            font-size: $f;
+            line-height: calc($f + 6px);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/scss/_scroll.scss

@@ -0,0 +1,65 @@
+*:not(.scroll-s)::-webkit-scrollbar {
+  width: 16px;
+}
+
+*:not(.scroll-s)::-webkit-scrollbar-thumb {
+  border: 4px solid var(--white);
+  border-radius: var(--border-radius);
+  background-color: var(--grey-l-4);
+  transition: 0.2s;
+}
+
+*:not(.scroll-s)::-webkit-scrollbar-thumb:hover {
+  border: 4px solid var(--white);
+  border-radius: var(--border-radius);
+  background-color: var(--grey-l-2);
+  transition: 0.2s;
+}
+
+*:not(.scroll-s)::-webkit-scrollbar-track {
+  background-color: var(--white);
+  transition: 0.2s;
+}
+
+*:not(.scroll-s)::-webkit-scrollbar-track:hover {
+  transition: 0.2s;
+}
+
+*:not(.scroll-s)::-webkit-scrollbar:horizontal {
+  height: 16px;
+}
+
+// -------small scroll
+
+.scroll-s::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scroll-s::-webkit-scrollbar-thumb {
+  border: 2px solid var(--white);
+  border-radius: var(--border-radius);
+  background-color: var(--grey-l-4);
+  transition: 0.2s;
+}
+
+.scroll-s::-webkit-scrollbar-thumb:hover {
+  border: 2px solid var(--white);
+  border-radius: var(--border-radius);
+  background-color: var(--grey-l-2);
+  transition: 0.2s;
+}
+
+.scroll-s::-webkit-scrollbar-track {
+  background-color: var(--white);
+  transition: 0.2s;
+}
+
+.scroll-s::-webkit-scrollbar-track:hover {
+  background-color: var(--white);
+  transition: 0.2s;
+}
+
+.scroll-s::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+

package/dist/scss/_shadows.scss

@@ -0,0 +1,47 @@
+$shadow-xs: 0px 1px 4px 0px hsla(218, 87%, 6%, 0.05);
+$shadow-s: 0px 1px 4px 0px hsla(218, 87%, 6%, 0.1);
+$shadow-sm: 0px 4px 8px -2px hsla(218, 87%, 6%, 0.07);
+$shadow-m: 0px 12px 16px -4px hsla(218, 87%, 6%, 0.07);
+$shadow-l: 0px 20px 24px -4px hsla(218, 87%, 6%, 0.07);
+$shadow-xl: 0px 24px 48px -12px hsla(218, 87%, 6%, 0.1);
+$shadow-xxl: 0px 32px 64px -12px hsla(218, 87%, 6%, 0.2);
+
+:root {
+  --shadow-xs: #{$shadow-xs};
+  --shadow-s: #{$shadow-s};
+  --shadow-sm: #{$shadow-sm};
+  --shadow-m: #{$shadow-m};
+  --shadow-l: #{$shadow-l};
+  --shadow-xl: #{$shadow-xl};
+  --shadow-xxl: #{$shadow-xxl};
+}
+
+body {
+  .shadow-xs {
+    box-shadow: var(--shadow-xs);
+  }
+
+  .shadow-s {
+    box-shadow: var(--shadow-s);
+  }
+
+  .shadow-sm {
+    box-shadow: var(--shadow-sm);
+  }
+
+  .shadow-m {
+    box-shadow: var(--shadow-m);
+  }
+
+  .shadow-l {
+    box-shadow: var(--shadow-l);
+  }
+
+  .shadow-xl {
+    box-shadow: var(--shadow-xl);
+  }
+
+  .shadow-xxl {
+    box-shadow: var(--shadow-xxl);
+  }
+}

package/dist/scss/_slider.scss

@@ -0,0 +1,53 @@
+body {
+  .ld-slider {
+    %label {
+      font-family: var(--medium);
+      font-size: var(--text-body-s);
+      line-height: 20px;
+      color: var(--grey-d-3);
+    }
+
+    .v-slider-thumb {
+      .v-slider-thumb__surface {
+        background-color: var(--white);
+        &:before {
+          content: unset;
+        }
+      }
+      .v-slider-thumb__label {
+        @extend %label;
+        background: var(--white);
+        padding: 6px 12px;
+        border-radius: var(--border-radius);
+        box-shadow: 0 4px 8px -2px rgba(27, 39, 55, 0.10), 0 2px 6px -2px rgba(27, 39, 55, 0.06);
+      }
+    }
+
+    .v-slider-track {
+      .v-slider-track__fill {
+        background-color: var(--primary);
+      }
+      .v-slider-track__background {
+        background-color: var(--grey-l-5);
+        opacity: 1 !important;
+      }
+      .v-slider-track__tick-label {
+        @extend %label;
+        margin-top: 14px !important;
+      }
+    }
+
+    &.v-input--disabled {
+      .v-slider-thumb {
+        .v-slider-thumb__surface {
+          background-color: var(--grey-l-3);
+        }
+      }
+      .v-slider-track {
+        .v-slider-track__fill {
+          background-color: var(--grey-l-2);
+        }
+      }
+    }
+  }
+}

package/dist/scss/_splitter.scss

@@ -0,0 +1,60 @@
+:root {
+  --splitter: 8px;
+}
+
+body {
+  .ld-splitter {
+    height: inherit;
+    display: flex;
+
+    .splitter-pane {
+      height: inherit;
+      overflow-y: auto;
+      background: var(--white);
+    }
+
+    .splitter {
+      display: flex;
+      background-color: var(--white) !important;
+      border-color: var(--grey-l-5);
+      border-style: solid;
+
+      &--hor {
+        justify-content: center;
+        width: 100%;
+        height: var(--splitter);
+        cursor: ns-resize;
+        border-width: 1px 0;
+
+        &.splitter--disabled {
+          height: 1px;
+          border-top: none;
+        }
+      }
+      &--ver {
+        align-items: center;
+        width: var(--splitter);
+        height: 100%;
+        cursor: ew-resize;
+        border-width: 0 1px;
+
+        &.splitter--disabled {
+          width: 1px;
+          border-left: none;
+        }
+      }
+      &--disabled {
+        cursor: default;
+        svg {
+          display: none;
+        }
+      }
+    }
+
+    &.splitter {
+      width: 100%;
+      border-left: none;
+      border-right: none;
+    }
+  }
+}

package/dist/scss/_step.scss

@@ -0,0 +1,179 @@
+body {
+  .ld-step {
+    display: grid;
+
+    &--vertical {
+      grid-auto-flow: row;
+      grid-auto-rows: 1fr;
+
+      .ld-step-item {
+        display: flex;
+        align-items: start;
+        min-height: 88px;
+
+        &:last-child {
+          min-height: 40px;
+        }
+
+        &-icon {
+          width: var(--icon-height);
+          height: 100%;
+          margin-right: 8px;
+
+          &:after {
+            top: 0;
+            left: 12px;
+            width: 1px;
+            height: 100%;
+          }
+        }
+      }
+    }
+
+    &--horizontal {
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+
+      .ld-step-item {
+        max-height: 88px;
+        overflow: hidden;
+        &-icon {
+          width: 100%;
+          height: var(--icon-height);
+          margin-bottom: 8px;
+
+          &:after {
+            top: 12px;
+            left: 0;
+            width: 100%;
+            height: 1px;
+          }
+        }
+      }
+    }
+
+    &-item {
+      &:last-child {
+        .ld-step-item-icon {
+          &:after {
+            display: none;
+          }
+        }
+      }
+
+      &-icon {
+        position: relative;
+
+        svg {
+          position: relative;
+          z-index: 1;
+        }
+
+        &:after {
+          content: '';
+          display: block;
+          position: absolute;
+          z-index: 0;
+        }
+      }
+      &-title {
+        font-family: var(--regular);
+        font-size: var(--text-body-s);
+        line-height: 20px;
+        color: var(--text);
+      }
+      &-subtitle {
+        font-family: var(--regular);
+        font-size: var(--text-body-s);
+        line-height: 20px;
+        color: var(--grey-d-1);
+      }
+
+      &--success {
+        .ld-step-item-icon {
+          color: var(--primary);
+
+          &:after {
+            background-color: var(--primary);
+          }
+        }
+      }
+
+      &--warning {
+        .ld-step-item-icon {
+          color: var(--warning);
+
+          &:after {
+            background-color: var(--warning);
+          }
+        }
+      }
+
+      &--error {
+        .ld-step-item-icon {
+          color: var(--error);
+
+          &:after {
+            background-color: var(--error);
+          }
+        }
+      }
+
+      &--active {
+        .ld-step-item-icon {
+          color: var(--primary);
+
+          &:after {
+            background-color: var(--primary);
+          }
+        }
+
+        &.ld-step-item--disabled {
+          .ld-step-item-icon {
+            color: var(--primary-l-4);
+
+            &:after {
+              background-color: var(--primary-l-4);
+            }
+          }
+
+          .ld-step-item-title {
+            color: var(--grey-l-2);
+          }
+
+          .ld-step-item-subtitle {
+            color: var(--grey-l-2);
+          }
+        }
+      }
+
+      &--scheduled {
+        .ld-step-item-icon {
+          color: var(--grey-d-1);
+
+          &:after {
+            background-color: var(--grey-d-1);
+          }
+        }
+
+        &.ld-step-item--disabled {
+          .ld-step-item-icon {
+            color: var(--grey-l-4);
+
+            &:after {
+              background-color: var(--grey-l-4);
+            }
+          }
+
+          .ld-step-item-title {
+            color: var(--grey-l-2);
+          }
+
+          .ld-step-item-subtitle {
+            color: var(--grey-l-2);
+          }
+        }
+      }
+    }
+  }
+}