@ldmjs/ui 1.0.89 → 2.0.0-beta.0

package/dist/scss/_loader.scss

@@ -0,0 +1,163 @@
+@use "sass:selector";
+@use "sass:list";
+@use "utils";
+
+$loader-xs: 16px;
+$loader-s: 24px;
+$loader-m: 32px;
+$loader-l: 48px;
+$loader-xl: 64px;
+
+$loaderSize: $loader-xs, $loader-s, $loader-m, $loader-l, $loader-xl;
+
+$colors: (
+  "primary": (var(--primary), var(--primary-l-1)),
+  "success": (var(--success), var(--success-l-1)),
+  "warning": (var(--warning), var(--warning-l-1)),
+  "error": (var(--error), var(--error-l-1)),
+  "white": (var(--white), var(--white)),
+);
+
+:root {
+  --loader-xs: #{$loader-xs};
+  --loader-s: #{$loader-s};
+  --loader-m: #{$loader-m};
+  --loader-l: #{$loader-l};
+  --loader-xl: #{$loader-xl};
+}
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 1;
+  }
+  49% {
+    opacity: 0.1;
+  }
+  51% {
+    opacity: 0.1;
+  }
+  75% {
+    opacity: 1
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@mixin loadersize() {
+  $sizearray: ('x-small', 'small', 'large', 'x-large', 'extra-large');
+  $parent: utils.getParent(&);
+
+  @at-root {
+    $index: 0;
+    @each $s in $sizearray {
+      $index: $index + 1;
+      $prefix: #{selector.append("--", $s)};
+
+      &#{utils.getSelector($parent, $prefix)} {
+        $size: list.nth($loaderSize, $index);
+
+        svg {
+          margin-top: calc($size / 2 * -1);
+          margin-left: calc($size / 2 * -1);
+        }
+
+        &#{utils.getSelector($parent, '--dotts')} {
+          i {
+            &:after {
+              border-radius: calc($size / 11);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin loadercolor() {
+  $parent: utils.getParent(&);
+
+  @at-root {
+    @each $color, $values in $colors {
+      &.text-#{$color} {
+        $selector: utils.getSelector($parent, '--circle');
+
+        &#{$selector} {
+          i {
+            background: conic-gradient(
+              from 90deg,
+              rgba(52, 126, 255, 0) 0deg,
+              list.nth($values, 1) 180deg,
+              list.nth($values, 2) 306.266deg,
+              rgba(52, 126, 255, 0) 360deg
+            );
+          }
+        }
+
+        $selector: utils.getSelector($parent, '--dotts');
+
+        &#{$selector} {
+          i {
+            &:after {
+              background-color: list.nth($values, 1);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+body {
+  .ld-loader {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    background-color: rgba(255, 255, 255, 1);
+
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      animation: rotating 1s linear infinite;
+    }
+
+    @include loadersize();
+
+    &.ld-loader--transparent {
+      background-color: rgba(255, 255, 255, 0.5);
+    }
+
+    &.ld-loader--dotts {
+      i {
+        overflow: hidden;
+        &:after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 23%;
+        }
+      }
+
+      @for $i from 0 through 8 {
+        i:nth-child(#{$i + 1}) {
+          animation: blink 1s linear #{$i * 0.125}s infinite;
+        }
+      }
+    }
+
+    @include loadercolor();
+  }
+}

package/dist/scss/_pager.scss

@@ -1,20 +1,87 @@
-.pager {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: var(--pager-height);
-  padding: 2px 12px !important;
-  background-color: var(--white);
-  font-size: var(--font-size);
-
-  &--border-top {
-    border-top: 1px solid var(--grey-l-5);
-  }
+body {
+  .ld-pager {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .ld-pager-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--button-xs);
+      border-radius: var(--border-radius);
+      font-family: var(--semibold);
+      font-size: var(--text-body-s);
+      color: var(--grey-d-3);
+      cursor: pointer;
+      transition: all 0.15s;
+
+      &[aria-selected=false]:not([disabled]),
+      &[aria-role=navigation] {
+        &:hover {
+          background-color: var(--grey-l-6);
+          color: var(--grey-d-4);
+        }
+
+        &:active {
+          background-color: var(--grey-l-5);
+          color: var(--grey-d-5);
+        }
+      }
+
+      &[disabled] {
+        color: var(--grey-l-2);
+
+        span {
+          color: var(--grey-l-2);
+        }
+      }
+
+      &[aria-selected=true] {
+        background-color: var(--primary-l-6);
+        color: var(--primary-d-1);
+
+        &:hover {
+          background-color: var(--primary-l-6);
+          color: var(--primary-d-1);
+        }
+
+        &:active {
+          background-color: var(--primary-l-6);
+          color: var(--primary-d-1);
+        }
+      }
+
+      &.ld-pager-button--icon {
+        width: var(--button-xs);
+      }
+    }
+
+    &.ld-pager--rounded {
+      .ld-pager-button {
+        border-radius: var(--button-xs);
+      }
+    }
+
+    &.ld-pager--fluid {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    span {
+      color: var(--grey-d-3);
+    }
+
+    ul {
+      display: flex;
+      align-items: center;
+      list-style: none;
+    }
 
-  .v-btn {
-    &.--active {
-      font-weight: 700 !important;
-      color: var(--primary) !important;
+    .ld-pager-page {
+      font-family: var(--semibold);
+      font-size: var(--text-body-s);
+      color: var(--text);
     }
   }
 }

package/dist/scss/_progress.scss

@@ -0,0 +1,282 @@
+body {
+  .ld-progress {
+
+    .ld-progress-counter {
+      color: var(--text);
+    }
+
+    .ld-progress-text {
+      color: var(--grey-d-1);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &--complete {
+        color: var(--text);
+      }
+    }
+
+    // --------- linear
+
+    &.ld-progress--linear {
+      &.ld-progress--no-label {
+        display: flex;
+        align-items: center;
+      }
+
+      .ld-progress-label {
+        display: flex;
+        align-items: center;
+        height: 20px;
+        margin-bottom: 8px;
+      }
+
+      .ld-progress-text {
+        font-size: var(--text-body-s);
+        flex: 1 1 auto;
+      }
+
+      .ld-progress-counter {
+        font-size: var(--text-body-s);
+        color: var(--grey-d-1);
+        white-space: nowrap;
+        font-weight: 500;
+        margin-left: 16px;
+        flex-shrink: 0;
+      }
+
+      .ld-progress-bar {
+        flex: 1 1 auto;
+        height: 4px;
+        background-color: var(--grey-l-5);
+        border-radius: 6px;
+
+        &:after {
+          content: '';
+          display: block;
+          height: 100%;
+          width: calc(var(--n) * 1%);
+          background-color: var(--primary);
+          border-radius: 6px;
+        }
+      }
+    }
+
+    @mixin counterabsolute() {
+      .ld-progress-counter {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        width: 100%;
+        top: 0;
+        left: 0;
+        font-family: var(--semibold);
+        font-weight: 600;
+      }
+    }
+
+    // --------- circular
+
+    &.ld-progress--circular {
+      position: relative;
+
+      @include counterabsolute();
+
+      .ld-progress-text {
+        text-align: center;
+      }
+
+      &.ld-progress--x-small {
+        .ld-progress-counter {
+          font-size: var(--text-body-s);
+          height: 24px;
+          top: 20px;
+        }
+      }
+
+      &.ld-progress--small {
+        .ld-progress-counter {
+          font-size: var(--text-body-m);
+          height: 24px;
+          top: 32px;
+        }
+      }
+
+      &.ld-progress--default {
+        .ld-progress-counter {
+          font-size: calc(var(--font-size) * 2 + 4px);
+          font-weight: 500;
+          height: 36px;
+          top: 50px;
+        }
+
+        .ld-progress-text {
+          width: 100%;
+          position: absolute;
+          bottom: 50px;
+          left: 0;
+          line-height: 20px;
+        }
+      }
+
+      &.ld-progress--large {
+        .ld-progress-counter {
+          font-size: var(--heading-4);
+          font-weight: 500;
+          height: 44px;
+          top: 66px;
+        }
+
+        .ld-progress-text {
+          width: 100%;
+          position: absolute;
+          bottom: 66px;
+          left: 0;
+          line-height: 20px;
+        }
+      }
+
+      &.ld-progress--x-large {
+        .ld-progress-counter {
+          font-size: var(--heading-3);
+          font-weight: 500;
+          height: 48px;
+          top: 84px;
+        }
+
+        .ld-progress-text {
+          width: 100%;
+          position: absolute;
+          bottom: 84px;
+          left: 0;
+          font-size: var(--text-body-m);
+          line-height: 20px;
+        }
+      }
+
+      &.ld-progress--extra-large {
+        .ld-progress-counter {
+          font-size: var(--heading-1);
+          font-weight: 500;
+          height: 56px;
+          top: 98px;
+        }
+
+        .ld-progress-text {
+          width: 100%;
+          position: absolute;
+          bottom: 98px;
+          left: 0;
+          font-size: var(--text-body-l);
+          line-height: 24px;
+        }
+      }
+    }
+
+    // --------- half-circle
+
+    &.ld-progress--half-circle {
+      position: relative;
+
+      @include counterabsolute();
+
+      .ld-progress-text {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        bottom: 0;
+        left: 0;
+        text-align: center;
+      }
+
+      &.ld-progress--x-small {
+        .ld-progress-counter {
+          font-size: var(--text-body-s);
+          height: 20px;
+          top: 12px;
+        }
+        .ld-progress-text {
+          font-size: var(--font-size);
+          height: 16px;
+        }
+      }
+
+      &.ld-progress--small {
+        .ld-progress-counter {
+          font-size: var(--text-body-m);
+          height: 24px;
+          top: 20px;
+        }
+        .ld-progress-text {
+          font-size: var(--text-body-s);
+          height: 20px;
+        }
+      }
+
+      &.ld-progress--default {
+        .ld-progress-counter {
+          font-size: calc(var(--font-size) * 2 + 4px);
+          font-weight: 500;
+          height: 36px;
+          top: 40px;
+        }
+
+        .ld-progress-text {
+          font-size: var(--text-body-s);
+          height: 20px;
+        }
+      }
+
+      &.ld-progress--large {
+        .ld-progress-counter {
+          font-size: var(--heading-4);
+          font-weight: 500;
+          height: 44px;
+          top: 48px;
+        }
+
+        .ld-progress-text {
+          font-size: var(--text-body-s);
+          height: 20px;
+        }
+      }
+
+      &.ld-progress--x-large {
+        .ld-progress-counter {
+          font-size: var(--heading-3);
+          font-weight: 500;
+          height: 48px;
+          top: 58px;
+        }
+
+        .ld-progress-text {
+          font-size: var(--text-body-m);
+          height: 20px;
+        }
+      }
+
+      &.ld-progress--extra-large {
+        .ld-progress-counter {
+          font-size: var(--heading-1);
+          font-weight: 500;
+          height: 56px;
+          top: 70px;
+        }
+
+        .ld-progress-text {
+          font-size: var(--text-body-l);
+          height: 24px;
+        }
+      }
+    }
+
+    &.ld-progress--error {
+      .ld-progress-bar {
+        &:after {
+          background-color: var(--error);
+        }
+      }
+    }
+  }
+}