pixel-react 1.6.9 → 1.7.0

package/src/components/NLPInput/NLPInput.scss

@@ -1,246 +1,302 @@
-@use '../../assets/styles/fonts';
-
-@mixin transition-all($time: 0.3s) {
-  transition: opacity $time ease-out, transform $time ease-out,
-    font-size $time ease-out, padding $time ease-out;
-}
-
-@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
-  position: absolute;
-  top: $top;
-  right: $right;
-  bottom: $bottom;
-  left: $left;
-}
-
-@mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
-  opacity: $opacity;
-
-  @if $color {
-    color: $color;
-  }
-
-  @if $border-color-arg {
-    border-color: $border-color-arg;
-  }
-}
-
-.ff-nlp-input-wrapper {
-  position: relative;
-
-  .ff-nlp-input {
-    @extend .fontSm;
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    min-height: 32px;
-    min-width: 489px;
-    display: flex;
-    align-items: end;
-    position: relative;
-
-    &-fieldset {
-      margin: 0;
-      padding: 25px 0px 0px 8px;
-      border: 1px solid transparent;
-      box-sizing: border-box;
-      height: 100%;
-      width: 100%;
-      border-radius: 4px;
-      display: block;
-
-      &--border-radius {
-        border-radius: 0px 4px 4px 0px;
-      }
-
-      &--no-label {
-        padding: 30px 0px 0px 8px;
-      }
-
-      &--default {
-        @include opacity-style(0, null, var(--ff-nlp-input-border-color));
-      }
-
-      &--active {
-        @include opacity-style(1, null, var(--ff-nlp-input-brand-color));
-      }
-
-      &--option {
-        opacity: 1;
-      }
-
-      &--no-border {
-        border-color: transparent;
-      }
-
-      &--error {
-        border-color: var(--error-light);
-      }
-
-      .ff-nlp-input-legend {
-        @extend .font-size-8;
-        padding: 0 2px;
-        letter-spacing: 0.5px;
-
-        &--default {
-          @include transition-all(0.3s);
-          opacity: 0;
-        }
-
-        &--active {
-          @include transition-all(0.25s);
-          @include opacity-style(1, var(--ff-nlp-input-brand-color));
-        }
-
-        &--option {
-          @include opacity-style(1, var(--ff-nlp-input-default-color));
-        }
-
-        &--error {
-          color: var(--error-light);
-        }
-
-        &--required {
-          margin-right: 2px;
-        }
-      }
-    }
-
-    &-input {
-      @extend .fontSm;
-      @include absolute-position(6px, auto, auto, auto);
-      width: calc(100% - 38px);
-      min-height: calc(100% - 8px);
-      padding: 0 28px 0 8px;
-      border-radius: 4px;
-      border: 1px solid transparent;
-      z-index: 100;
-      background: transparent;
-      outline: none;
-      color: var(--ff-nlp-input-text-color);
-
-      &:hover {
-        ~ .ff-nlp-input-label {
-          color: var(--ff-nlp-input-text-hover-color);
-        }
-      }
-
-      &--border-radius {
-        border-radius: 0px 4px 4px 0px;
-      }
-
-      &--default {
-        @include opacity-style(1, null, var(--ff-nlp-input-border-color));
-
-        &:hover {
-          border-color: var(--ff-nlp-input-text-color);
-
-          ~ .ff-nlp-input-fieldset--option {
-            border-color: var(--ff-nlp-input-text-color);
-
-            .ff-nlp-input-legend--option {
-              color: var(--ff-nlp-input-text-color);
-            }
-          }
-        }
-      }
-
-      &--no-label {
-        min-height: calc(100% - 2px);
-        margin-top: 0px;
-        top: 0px;
-      }
-
-      &--active {
-        border-color: transparent;
-
-        &:hover {
-          border-color: transparent;
-        }
-      }
-
-      &--no-border {
-        border: none;
-        border-color: transparent;
-
-        &:hover {
-          border-color: transparent;
-
-          ~ .ff-nlp-input-fieldset--no-border {
-            border-color: transparent;
-          }
-        }
-      }
-
-      &--disable {
-        border-color: var(--ff-nlp-input-border-color);
-
-        &:hover {
-          border-color: var(--ff-nlp-input-border-color);
-
-          ~ .ff-nlp-input-label--default {
-            color: var(--ff-nlp-input-default-color);
-          }
-        }
-      }
-
-      &--error {
-        border-color: var(--error-light);
-
-        &:hover {
-          border-color: var(--error-light);
-        }
-      }
-    }
-
-    &-label {
-      @include absolute-position(13px, auto, auto, 8px);
-      z-index: 1;
-      font-size: 12px;
-      top: 60%;
-      padding-left: 8px;
-
-      &--default {
-        @include transition-all;
-        @include opacity-style(1, var(--ff-nlp-input-default-color));
-
-        transform: translateY(-50%);
-      }
-
-      &--active {
-        @extend .font-size-8;
-        @include transition-all;
-        opacity: 0;
-        transform: translateY(-150%);
-        padding: 0 6px;
-      }
-
-      &--required {
-        margin-right: 2px;
-      }
-    }
-
-    &-arrow {
-      position: absolute;
-      top: 60%;
-      height: 100%;
-      right: 10px;
-      transform: rotateX(180deg) translateY(50%);
-      cursor: pointer;
-
-      &--no-label {
-        top: 50%;
-      }
-
-      &--down {
-        transform: rotateX(0deg) translateY(-50%);
-        z-index: 101;
-      }
-    }
-  }
-
-  &-error-text {
-    @include absolute-position(auto, auto, -14px, 12px);
-    white-space: nowrap;
-  }
-}
+@use '../../assets/styles/fonts';
+
+@mixin transition-all($time: 0.3s) {
+  transition: opacity $time ease-out, transform $time ease-out,
+    font-size $time ease-out, padding $time ease-out;
+}
+
+@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+
+@mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
+  opacity: $opacity;
+  @if $color {
+    color: var(--nlp-input-placeholder-color);
+  }
+  @if $border-color-arg {
+    border-color: var(--nlp-border-color);
+  }
+}
+
+.ff-nlp-input-wrapper {
+  position: relative;
+
+  .ff-nlp-input {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    min-height: 32px;
+    min-width: 482px;
+    display: flex;
+    align-items: end;
+    position: relative;
+    &-fieldset {
+      margin: 0;
+      padding: 25px 0px 0px 8px;
+      border: 1px solid transparent;
+      box-sizing: border-box;
+      height: 32px;
+      width: 100%;
+      border-radius: 4px;
+      display: block;
+
+      &--border-radius {
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      &--no-label {
+        padding: 30px 0px 0px 8px;
+      }
+
+      &--default {
+        @include opacity-style(0, null, var(--ff-nlp-input-border-color));
+      }
+
+      &--active {
+        @include opacity-style(1, null, var(--ff-nlp-input-brand-color));
+      }
+
+      &--option {
+        opacity: 1;
+      }
+
+      &--no-border {
+        border-color: transparent;
+      }
+
+      &--error {
+        border-color: var(--error-light);
+      }
+
+      .ff-nlp-input-legend {
+        @extend .font-size-8;
+        padding: 0 2px;
+        letter-spacing: 0.5px;
+        &--default {
+          @include transition-all(0.3s);
+          opacity: 0;
+        }
+
+        &--active {
+          @include transition-all(0.25s);
+          @include opacity-style(1, var(--ff-nlp-input-brand-color));
+        }
+
+        &--option {
+          @include opacity-style(1, var(--ff-nlp-input-default-color));
+        }
+
+        &--error {
+          color: var(--error-light);
+        }
+
+        &--required {
+          margin-right: 2px;
+        }
+      }
+    }
+
+    &-container {
+      @include absolute-position(6px, auto, auto, auto);
+      width: calc(100% - 38px);
+      height: 32px;
+      padding: 0 28px 0 8px;
+      border-radius: 4px;
+      border: 1px solid transparent;
+      z-index: 100;
+      background: transparent;
+      outline: none;
+      color: var(--ff-nlp-input-text-color);
+      text-indent: 22px;
+
+      &:hover {
+        ~ .ff-nlp-input-label {
+          color: var(--nlp-input-placeholder-color);
+          padding-left: 26px;
+        }
+      }
+
+      &--border-radius {
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      &--default {
+        @include opacity-style(1, null, var(--ff-nlp-input-border-color));
+
+        &:hover {
+          border-color: var(--nlp-input-placeholder-color);
+
+          ~ .ff-nlp-input-fieldset--option {
+            border-color: var(--ff-nlp-input-text-color);
+
+            .ff-nlp-input-legend--option {
+              color: var(--ff-nlp-input-text-color);
+            }
+          }
+        }
+      }
+
+      &--no-label {
+        min-height: calc(100% - 2px);
+        margin-top: 0px;
+        top: 0px;
+      }
+
+      &--active {
+        border-color: transparent;
+
+        &:hover {
+          border-color: transparent;
+        }
+      }
+
+      &--no-border {
+        border: none;
+        border-color: transparent;
+
+        &:hover {
+          border-color: transparent;
+
+          ~ .ff-nlp-input-fieldset--no-border {
+            border-color: transparent;
+          }
+        }
+      }
+
+      &--disable {
+        border-color: var(--ff-nlp-input-border-color);
+
+        &:hover {
+          border-color: var(--ff-nlp-input-border-color);
+
+          ~ .ff-nlp-input-label--default {
+            color: var(--ff-nlp-input-default-color);
+          }
+        }
+      }
+
+      &--error {
+        border-color: var(--error-light);
+
+        &:hover {
+          border-color: var(--error-light);
+        }
+      }
+    }
+
+    &-label {
+      @include absolute-position(13px, auto, auto, 8px);
+      z-index: 1;
+      font-size: 12px;
+      top: 60%;
+      padding-left: 8px;
+
+      &--default {
+        @include transition-all;
+        @include opacity-style(1, var(--ff-nlp-input-default-color));
+
+        transform: translateY(-50%);
+      }
+
+      &--active {
+        @include transition-all;
+        opacity: 0;
+        transform: translateY(-150%);
+        padding: 0 6px;
+      }
+
+      &--required {
+        margin-right: 2px;
+      }
+    }
+
+    &-arrow {
+      position: absolute;
+      top: 60%;
+      height: 100%;
+      right: 10px;
+      transform: rotateX(0deg) translateY(-50%);
+      cursor: pointer;
+
+      &--no-label {
+        top: 50%;
+      }
+    }
+  }
+
+  &-error-text {
+    @include absolute-position(auto, auto, -14px, 12px);
+    white-space: nowrap;
+  }
+  .ff-nlp-input-label {
+    display: flex;
+    align-items: center;
+    padding-left: 26px;
+    gap: 4px;
+  }
+  .ff-nlp-help_icon {
+    position: absolute;
+    bottom: 2px;
+    left: 8px;
+    width: 30px;
+    height: 30px;
+    z-index: 100;
+    cursor: pointer;
+  }
+}
+.ff-nlp-input-arrow {
+  z-index: 111;
+}
+.icon-container {
+  position: relative;
+  display: inline-block;
+}
+
+.icon-label {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-55%);
+  transform: translateY(-145%);
+  margin-bottom: 5px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+  background-color: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  padding: 2px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.icon-container:hover .icon-label {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+
+.help-icon-label {
+  position: absolute;
+  bottom: 80%;
+  left: 96%;
+  transform: translateX(-50%);
+  margin-bottom: 5px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+  background-color: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  padding: 2px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+.help-icon-container:hover .help-icon-label {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}