intelicoreact 1.5.38 → 1.5.41

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss

@@ -1,17 +1,17 @@
-@use '../../../scss/vars';
+@import "../../../scss/vars";
 
 .tags-dropdown {
   position: relative;
 
   display: flex;
-  overflow: hidden;
-  flex-direction: row;
   flex-wrap: nowrap;
+  flex-direction: row;
 
   width: 100%;
 
   border: 1px solid #e2e5ec;
   border-radius: 3px;
+  overflow: hidden;
 
   &--custom-trigger {
     border: none;
@@ -41,13 +41,12 @@
     align-items: center;
 
     box-sizing: border-box;
-    width: 100%;
     height: fit-content;
     min-height: 28px;
     padding: 1px 24px 1px 5px;
+    width: 100%;
 
     cursor: pointer;
-
     border-radius: 3px;
     background: #fff;
 
@@ -57,13 +56,11 @@
     }
 
     .input__wrap {
-      flex-grow: 1;
-
-      width: 0;
-      min-width: 200px;
       height: 20px;
-
       border: none;
+      width: 0;
+      flex-grow: 1;
+      min-width: 200px;
 
       &_focus {
         border: none;
@@ -74,42 +71,39 @@
 
   &__actions {
     display: flex;
-    overflow: hidden;
-    justify-content: center;
     align-items: center;
-
+    justify-content: center;
+    border-radius: 0px 2px 2px 0px;
+    overflow: hidden;
     box-sizing: border-box;
     min-width: 56px;
 
-    border-radius: 0px 2px 2px 0px;
-
     &-item {
+      height: 100%;
       display: flex;
+      padding: 4px;
+      min-width: 28px;
       justify-content: center;
       align-items: center;
-      align-self: stretch;
       gap: 4px;
-
+      align-self: stretch;
+      background: var(--Background-Light-action, #F4F6FF);
       box-sizing: border-box;
-      min-width: 28px;
-      height: 100%;
-      padding: 4px;
-
       cursor: pointer;
-
-      border-left: 1px solid var(--Border-Input, #e2e5ec);
-      background: var(--Background-Light-action, #f4f6ff);
+      border-left: 1px solid var(--Border-Input, #E2E5EC);
+      box-sizing: border-box;
     }
 
     svg {
       width: 16px;
       height: 16px;
-
-      color: #1e1e2d;
+      color: #1E1E2D;
     }
   }
 
+
   &--focused {
+
     border: 1px solid #6b81dd;
     filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
   }
@@ -131,19 +125,18 @@
 
     &-list-wrapper {
       padding: 8px 8px 4px;
-
       background: #fff;
     }
 
     &--in-list {
-      box-sizing: border-box;
       width: 100%;
-      height: 28px;
+      box-sizing: border-box;
       padding: 4px 8px;
+      height: 28px;
 
       &:focus {
         border-color: #6b81dd;
-        box-shadow: 0px 0px 4px 0px rgba(93, 120, 255, 0.5);
+        box-shadow: 0px 0px 4px 0px rgba(93, 120, 255, 0.50);
       }
     }
   }
@@ -172,56 +165,47 @@
   }
 
   &__creatable-helper {
-    display: flex;
-    align-items: center;
-    align-self: stretch;
-
-    padding: 2px 4px;
-
+    background: #fff;
+    color: var(--Text-Title, #9AA0B9);
     font-family: Roboto;
     font-size: 11px;
-    font-weight: 400;
     font-style: normal;
+    font-weight: 400;
     line-height: 20px;
-
-    color: var(--Text-Title, #9aa0b9);
-    background: #fff;
-  }
-
-  &__create-option {
     display: flex;
+    padding: 2px 4px;
     align-items: center;
     align-self: stretch;
-    gap: 3px;
+  }
 
+  &__create-option {
+    display: flex;
     height: 24px;
     padding: 2px 4px;
-
+    align-items: center;
+    gap: 3px;
+    align-self: stretch;
+    background: var(--Background-Form-Main, #F7FAFC);
+    color: var(--Text-Main, #1E1E2D);
     font-family: Roboto;
     font-size: 11px;
-    font-weight: 400;
     font-style: normal;
+    font-weight: 400;
     line-height: 20px;
     cursor: pointer;
-
-    color: var(--Text-Main, #1e1e2d);
-    background: var(--Background-Form-Main, #f7fafc);
   }
 
   &__no-options {
-    display: flex;
-    align-items: center;
-    align-self: stretch;
-
-    padding: 2px 4px;
-
+    color: var(--Text-Title, #9AA0B9);
     font-family: Roboto;
     font-size: 14px;
-    font-weight: 400;
     font-style: normal;
+    font-weight: 400;
     line-height: 20px;
-
-    color: var(--Text-Title, #9aa0b9);
+    display: flex;
+    padding: 2px 4px;
+    align-items: center;
+    align-self: stretch;
   }
 
   &__selector-wrapper {
@@ -231,14 +215,16 @@
     flex-direction: column;
 
     box-sizing: border-box;
-    max-height: 320px;
     margin-top: 4px;
 
     border: 1px solid #e2e5ec;
     box-shadow: 0 4px 25px rgb(0 0 0 / 25%);
+    max-height: 320px;
   }
 
+
   &__list {
+    height: 100%;
     position: relative;
     z-index: 3;
 
@@ -246,7 +232,7 @@
 
     box-sizing: border-box;
     min-width: 100%;
-    height: 100%;
+    // padding: 8px 0;
     padding: 2px 0;
 
     text-align: left;
@@ -263,7 +249,7 @@
 
     &::-webkit-scrollbar-thumb {
       border-radius: 4px;
-      background: vars.$color--gray--dark;
+      background: $color--gray--dark;
     }
 
     &--with-header {
@@ -280,20 +266,20 @@
       width: 100%;
       min-width: 100%;
       min-height: 24px;
-      padding-right: 4px;
       padding-left: 35px;
+      padding-right: 4px;
 
       font-size: 13px;
       font-weight: 400;
       line-height: 24px;
       cursor: pointer;
 
-      color: vars.$color--dark;
+      color: $color--dark;
 
       &:hover,
       &_active,
       &--editing {
-        background: #f7fafc;
+        background: #F7FAFC;//$color--gray--gentle;
       }
 
       &_disabled {
@@ -315,51 +301,48 @@
       }
 
       &-description {
-        margin-left: vars.$spacing-xs;
+        margin-left: $spacing-xs;
 
         color: #757f8c;
       }
 
       &-edit-trigger {
         display: inline-flex;
+        padding: 2px;
         align-items: flex-start;
         gap: 4px;
-
         width: 20px;
-        min-width: 20px;
         height: 20px;
+        min-width: 20px;
         min-height: 20px;
-        padding: 2px;
 
         &:hover {
-          background-color: #ebeff2;
+          background-color: #EBEFF2;
 
           svg {
-            color: #1e1e2d;
+            color: #1E1E2D;
           }
         }
 
         svg {
           width: 16px;
           height: 16px;
-
-          color: #9aa0b9;
+          color: #9AA0B9;
         }
       }
 
       &--editing &-edit-trigger {
-        background-color: #ebeff2;
+        background-color: #EBEFF2;
 
         svg {
-          color: #1e1e2d;
+          color: #1E1E2D;
         }
       }
 
       pre.inherit-styles {
+        font: inherit!important;
         margin: 0;
         padding: 0;
-
-        font: inherit !important;
       }
     }
   }
@@ -381,121 +364,101 @@
   }
   &__edit-option-modal {
     position: absolute;
-    z-index: 999999;
-
     display: flex;
+    width: 182px;
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
-
-    width: 182px;
-
     border-radius: 4px;
-    background: var(--White, #fff);
+    background: var(--White, #FFF);
     box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.25);
+    z-index: 999999;
 
     &:before {
+      content: '';
       position: absolute;
-
       width: 12px;
       height: 12px;
-
-      content: '';
-
-      background: #ffffff;
-
+      background: #FFFFFF;
       transform: rotate(45deg);
     }
 
     &-section {
       display: flex;
       flex-direction: column;
+      padding: 8px;
       align-items: flex-start;
-      align-self: stretch;
       gap: 8px;
-
-      padding: 8px;
+      align-self: stretch;
 
       button {
         display: flex;
-        align-items: center;
         gap: 4px;
-
-        box-sizing: border-box;
-        height: auto;
         padding: 0;
-
-        color: var(--Text-Main, #1e1e2d);
+        height: auto;
+        box-sizing: border-box;
+        align-items: center;
+        color: var(--Text-Main, #1E1E2D);
 
         .button__text {
-          width: auto;
           margin: 0;
-
+          width: auto;
           font-family: Roboto;
           font-size: 13px;
-          font-weight: 400;
           font-style: normal;
+          font-weight: 400;
           line-height: 20px;
         }
 
         svg {
           display: block;
-
           width: 16px;
           height: 16px;
         }
       }
 
       h3 {
-        margin: 0;
-
+        color: var(--Text-Title, #9AA0B9);
         font-family: Roboto;
         font-size: 10px;
-        font-weight: 400;
         font-style: normal;
+        font-weight: 400;
         line-height: 20px;
         text-transform: uppercase;
-
-        color: var(--Text-Title, #9aa0b9);
+        margin: 0;
       }
 
       &-divider {
         width: 100%;
         height: 1px;
-
-        background: #e2e5ec;
+        background: #E2E5EC;
       }
 
       &-colors {
         display: flex;
-        flex-wrap: wrap;
         gap: 8px;
+        flex-wrap: wrap;
 
         .color-block {
           display: flex;
-          align-items: flex-start;
-          gap: 4px;
-
-          box-sizing: border-box;
           width: 20px;
           height: 20px;
           padding: 2px;
-
-          cursor: pointer;
-
-          border: 1px solid rgba(0, 0, 0, 0.15);
+          align-items: flex-start;
+          gap: 4px;
           border-radius: 3px;
+          box-sizing: border-box;
+          border: 1px solid rgba(0, 0, 0, 0.15);
+          cursor: pointer;
 
           svg {
             display: flex;
-            flex-shrink: 0;
-            justify-content: center;
-            align-items: center;
-
             width: 16px;
             height: 16px;
-
-            color: #1e1e2d;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+            color: #1E1E2D;
           }
         }
       }
@@ -551,7 +514,7 @@
       font-size: 10px;
       text-transform: uppercase;
 
-      color: vars.$color--gray--dark;
+      color: $color--gray--dark;
     }
   }
 
@@ -564,18 +527,16 @@
   }
 
   .tag {
-    overflow: hidden;
-
-    max-width: 100%;
     margin-top: 1px;
     margin-bottom: 1px;
+    max-width: 100%;
+    overflow: hidden;
 
     cursor: auto;
 
     &__label {
-      overflow: hidden;
-
       text-overflow: ellipsis;
+      overflow: hidden;
     }
   }
 
@@ -615,7 +576,7 @@
           width: 100dvw;
           height: 100dvh;
           max-height: 100dvh;
-          padding: vars.$spacing-s;
+          padding: $spacing-s;
 
           background: rgba(23, 29, 51, 0.5);
 
@@ -637,25 +598,25 @@
         width: 100dvw;
         height: 100dvh;
         max-height: 100dvh;
-        padding: vars.$spacing-s;
+        padding: $spacing-s;
 
         animation-name: slideup;
         animation-duration: 0.4s;
       }
 
       &__selector-wrapper {
+        display: block;
         position: absolute;
-        bottom: vars.$spacing-s;
+        bottom: $spacing-s;
 
-        display: block;
         overflow: hidden;
 
         box-sizing: border-box;
-        width: calc(100% - #{vars.$spacing-m});
+        width: calc(100% - $spacing-m);
         max-height: 500px;
 
-        border-radius: vars.$spacing-l !important;
-        background: vars.$color--light;
+        border-radius: $spacing-l !important;
+        background: $color--light;
 
         &--fixed-height {
           height: 500px !important;
@@ -680,7 +641,7 @@
             width: 100%;
             height: 15px;
 
-            content: '';
+            content: "";
 
             opacity: 1;
             background: linear-gradient(
@@ -705,9 +666,9 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        gap: vars.$spacing-m;
+        gap: $spacing-m;
 
-        padding: vars.$spacing-m;
+        padding: $spacing-m;
 
         font-size: 16px;
         font-weight: 600;
@@ -735,7 +696,7 @@
             align-items: center;
 
             width: 100%;
-            padding: 0 vars.$spacing-s;
+            padding: 0 $spacing-s;
 
             border: 1px solid var(--form-input-border, #e1e8f1);
             border-radius: 6px;
@@ -754,7 +715,7 @@
             width: 24px;
             min-width: 24px;
             height: 24px;
-            padding: vars.$spacing-xs;
+            padding: $spacing-xs;
 
             border-radius: 2px;
             background: var(--bg-gray-box, #f0f1f4);
@@ -807,7 +768,7 @@
         box-sizing: border-box;
         width: 50px;
         height: 50px;
-        padding: vars.$spacing-m;
+        padding: $spacing-m;
 
         svg {
           width: 16px;
@@ -822,30 +783,32 @@
 
         display: flex;
         flex-direction: column;
-        gap: vars.$spacing-xs;
+        gap: $spacing-xs;
 
         max-height: unset;
-        padding: vars.$spacing-m vars.$spacing-m !important;
+        padding: $spacing-m $spacing-m !important;
       }
 
       &-group {
         display: flex;
         flex-direction: column;
-        gap: vars.$spacing-xs;
+        gap: $spacing-xs;
 
         margin: 0;
 
         &:first-child {
-          margin-top: calc(#{vars.$spacing-s} * -1);
+          margin-top: calc($spacing-s * -1);
         }
 
         &__name {
-          margin: 0 0 vars.$spacing-s;
+          margin: 0;
+          margin-bottom: $spacing-s;
           padding: 10px 0px 6px;
 
           font-size: 11px;
 
-          border-bottom: 1px solid var(--black-gray-light-divider, rgba(58, 72, 122, 0.15));
+          border-bottom: 1px solid
+            var(--black-gray-light-divider, rgba(58, 72, 122, 0.15));
           box-shadow: none !important;
         }
       }
@@ -854,13 +817,14 @@
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
-        gap: 8px;
 
-        box-sizing: border-box;
         width: 100%;
+        gap: 8px;
+        box-sizing: border-box;
+
         height: auto !important;
         min-height: unset !important;
-        padding: 10px vars.$spacing-s !important;
+        padding: 10px $spacing-s !important;
 
         line-height: 24px;
 
@@ -871,9 +835,8 @@
 
         &-body {
           display: flex;
-
-          box-sizing: border-box;
           width: 100%;
+          box-sizing: border-box;
 
           pre {
             white-space: normal;
@@ -881,8 +844,8 @@
         }
 
         label {
-          box-sizing: border-box;
           width: 16px;
+          box-sizing: border-box;
           margin-top: 4px;
 
           .checkbox-input__input {
@@ -890,6 +853,7 @@
           }
         }
 
+
         .search-match {
           font-weight: 600;
         }
@@ -937,4 +901,4 @@
   to {
     opacity: 1;
   }
-}
+}