intelicoreact 1.5.41 → 1.6.0

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

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