intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/FormElements/RangeSlider2/RangeSlider2.scss

@@ -0,0 +1,520 @@
+@import 'https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap';
+
+$triggerHeight: 20px;
+$triggerWidth: 20px;
+$lineHeight: 4px;
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(1px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-2px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(2px, 0, 0);
+  }
+}
+
+.range-slider2 {
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  max-width: 100%;
+  margin-top: 16px;
+
+  .collision {
+    position: absolute;
+    z-index: 1;
+    top: calc($triggerHeight / 2 - 2px);
+
+    width: 0;
+    height: 4px;
+
+    font-size: 0;
+
+    opacity: 0;
+    border-radius: 5px;
+    background: #f06d8d;
+
+    &--visible {
+      opacity: 1;
+    }
+
+    &--left {
+      left: calc($triggerWidth / 2);
+
+      transform: translateX(-100%);
+    }
+
+    &--right {
+      left: calc($triggerWidth / 2);
+    }
+
+    &--both {
+      left: calc($triggerWidth / 2);
+
+      transform: translateX(-50%);
+    }
+  }
+
+  &__track {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    box-sizing: border-box;
+    height: $triggerHeight;
+
+    &__line {
+      position: absolute;
+      left: 0;
+
+      box-sizing: border-box;
+      width: 100%;
+      height: $lineHeight;
+
+      border-radius: 4px;
+      background: linear-gradient(270deg, #99c28c 0%, #f06d8d 100.94%);
+
+      &__dividers {
+        display: flex;
+
+        height: 100%;
+
+        &--item {
+          position: relative;
+
+          box-sizing: border-box;
+          width: 100%;
+
+          &:not(:last-child)::after {
+            position: absolute;
+            right: -1px;
+
+            width: 2px;
+            height: 100%;
+
+            content: '';
+
+            background: #ffffff66;
+          }
+        }
+      }
+
+      &__extremum {
+        &--min,
+        &--max {
+          position: absolute;
+          bottom: 0;
+
+          font-family: 'Roboto';
+          font-size: 13px;
+          font-weight: 400;
+          font-style: normal;
+          line-height: 20px;
+
+          color: #1e1e2d;
+
+          transform: translateY(-22px);
+        }
+
+        &--min {
+          left: 0;
+        }
+
+        &--max {
+          right: 0;
+        }
+      }
+    }
+
+    &__range {
+      &-triggers {
+        position: absolute;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+
+        &--add-trigger {
+          position: absolute;
+          z-index: 1;
+
+          display: flex;
+
+          opacity: 0;
+
+          transition: opacity 0.3s;
+          transform: translateX(-50%);
+
+          &--fixed {
+            z-index: 999 !important;
+
+            opacity: 1 !important;
+          }
+
+          &--force-visible {
+            opacity: 1 !important;
+          }
+
+          &--moved-smoothly {
+            transition: all 0.3s;
+          }
+
+          &__point {
+            position: relative;
+            z-index: 3;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            box-sizing: border-box;
+            width: 20px;
+            height: 20px;
+            margin: 0 auto;
+
+            cursor: pointer;
+
+            border: 1px solid #6b81dd;
+            border-radius: 50%;
+            background: #f4f6ff;
+            box-shadow: 0 4px 4px 0 #0000001a;
+
+            transition: opacity 0.5s;
+
+            svg {
+              position: relative;
+
+              width: 16px;
+              height: 16px;
+
+              cursor: pointer;
+
+              color: #6b81dd;
+            }
+
+            &:before {
+              position: absolute;
+              top: calc(-100% - 13px);
+
+              font-family: 'Roboto';
+              font-size: 13px;
+              font-weight: 400;
+              font-style: normal;
+              line-height: 20px;
+              content: attr(data-point-value);
+              white-space: nowrap;
+
+              color: #9aa0b9;
+            }
+
+            &--shake {
+              animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+            }
+          }
+
+          &__settings {
+            position: absolute;
+            z-index: 999;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            min-width: 125px;
+            padding: 2px;
+
+            border-radius: 3px;
+            background: #ffffff;
+            box-shadow:
+              0px 0px 2px rgba(0, 0, 0, 0.15),
+              0px 4px 4px rgba(0, 0, 0, 0.05);
+
+            transform: translate(calc(-50% + $triggerWidth / 2), 0px);
+
+            &-body {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+
+              width: 100%;
+              margin-bottom: 4px;
+
+              &--assign-left,
+              &--assign-right {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+
+                box-sizing: border-box;
+                width: 22px;
+                height: 24px;
+
+                cursor: pointer;
+
+                border-radius: 3px;
+                background: #f4f6ff;
+
+                &[attr-is-active='true'] {
+                  border: 1px solid #6b81dd;
+                  border-radius: 3px;
+                  background: #e2e6f8;
+                }
+
+                svg {
+                  width: 16px;
+                  height: 16px;
+                }
+              }
+
+              &--lenders-count {
+                font-size: 13px;
+                line-height: 20px;
+
+                color: #1e1e2d;
+              }
+            }
+
+            &-actions {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+
+              width: 100%;
+
+              &--cancel,
+              &--apply {
+                width: calc(100% - 4px);
+
+                font-size: 11px;
+                line-height: 20px;
+                cursor: pointer;
+                text-align: center;
+
+                color: #6b81dd;
+              }
+
+              &--apply {
+                color: #ffffff;
+                border-radius: 3px;
+                background: #6b81dd;
+              }
+            }
+          }
+
+          &__collision {
+            @extend .collision;
+          }
+        }
+
+        &--trigger {
+          position: absolute;
+          z-index: 3;
+          top: 50%;
+
+          width: $triggerWidth;
+          height: $triggerHeight;
+
+          transform: translate(-50%, -50%);
+
+          &__moving {
+            z-index: 2;
+          }
+
+          &__fixed {
+            pointer-events: none;
+          }
+
+          &__point {
+            position: absolute;
+            z-index: 10;
+
+            box-sizing: border-box;
+            width: $triggerWidth;
+            height: $triggerHeight;
+
+            cursor: move;
+
+            border: 1px solid #ffffff;
+            border-radius: 50%;
+            background: #6b81dd;
+            box-shadow: 0px 4px 6px rgb(0 0 0 / 20%);
+
+            &:before {
+              position: absolute;
+              top: calc(-100% - 13px);
+              left: 9px;
+
+              width: fit-content;
+
+              font-family: 'Roboto';
+              font-size: 13px;
+              font-weight: 400;
+              font-style: normal;
+              line-height: 20px;
+              content: attr(data-point-value);
+              white-space: nowrap;
+
+              color: #1e1e2d;
+
+              transform: translateX(-50%);
+            }
+
+            &:after {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+
+              width: 50%;
+              height: 50%;
+
+              content: '';
+
+              border-radius: 50%;
+              background: #e2e6f8;
+
+              transform: translate(-50%, -50%);
+            }
+
+            &--shake {
+              animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+            }
+          }
+
+          &__collision {
+            @extend .collision;
+          }
+
+          &__actions {
+            position: absolute;
+            z-index: 9;
+            top: 0;
+            left: 0;
+
+            display: flex;
+            overflow: hidden;
+            justify-content: center;
+            align-items: flex-end;
+
+            box-sizing: border-box;
+            width: $triggerWidth;
+            height: 0;
+
+            opacity: 0;
+            border: 1px solid #ffffff;
+            border-radius: 16px;
+            background: #fff4f7;
+            box-shadow: 0px 2px 2px rgb(0 0 0 / 5%);
+
+            transition: all 0.3s;
+
+            &--hidden {
+              height: 0 !important;
+            }
+
+            &--remove {
+              position: relative;
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              width: 20px;
+              height: 20px;
+
+              cursor: pointer;
+
+              color: #f06d8d;
+
+              transition: margin 0.5s;
+
+              &[is-hidden='true'] {
+                margin-top: -20px !important;
+              }
+
+              svg {
+                width: 16px;
+                height: 16px;
+              }
+            }
+          }
+
+          &__hidden &__point,
+          &__hidden &__collision,
+          &__hidden &__actions {
+            display: none;
+          }
+
+          &:hover &__point {
+            background: #4f68d1;
+          }
+
+          &:hover &__actions {
+            height: calc($triggerHeight * 2);
+
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &__ranges-value {
+      position: absolute;
+
+      display: flex;
+
+      width: 100%;
+      height: 100%;
+
+      transform: translateY(calc(50% + 6px));
+
+      &--item {
+        position: absolute;
+
+        display: flex;
+
+        padding: 2px;
+
+        font-size: 13px;
+        line-height: 20px;
+        white-space: nowrap;
+
+        color: #1e1e2d;
+        border-radius: 3px;
+        background: #ffffff;
+        box-shadow:
+          0px 0px 2px rgba(0, 0, 0, 0.15),
+          0px 4px 4px rgba(0, 0, 0, 0.05);
+
+        transition: left 0.3s;
+        transform: translateX(-50%);
+      }
+    }
+  }
+
+  &:hover [class*='add-trigger'] {
+    opacity: 1;
+  }
+}
+
+.moving-cursor {
+  cursor: move !important;
+}