intelicoreact 1.5.41 → 1.6.0

package/dist/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -1,21 +1,19 @@
-@import "../../../scss/vars";
+@use "../../../scss/vars";
 
 .dropdown {
   position: relative;
 
-  width: 100%;
-
-  border-radius: $radii-s; 
-  
   display: flex;
+  overflow: hidden;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: center;
 
-  border: 1px solid $color--gray--light;
-  border-radius: $radii-xs;
-  background: $color--light;
-  overflow: hidden;
+  width: 100%;
+
+  border: 1px solid vars.$color--gray--light;
+  border-radius: vars.$radii-xs;
+  background: vars.$color--light;
 
   &--focused {
     border-color: #6b81dd;
@@ -23,9 +21,9 @@
   }
 
   &--with-custom-trigger {
-    border: none!important;
-    background: none!important;
-    filter: none!important;
+    border: none !important;
+    background: none !important;
+    filter: none !important;
   }
 
   &--with-actions {
@@ -35,34 +33,39 @@
 
   &__actions {
     display: flex;
-    align-self: stretch;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0px 2px 2px 0px;
     overflow: hidden;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+
     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;
     }
   }
 
@@ -88,21 +91,22 @@
     font-weight: 400;
     cursor: pointer;
     text-align: left;
-    border: none!important;
+
+    border: none !important;
     filter: none;
 
     .text {
       overflow: hidden;
 
       max-width: calc(100% - 5px);
-      padding: 0 $spacing-m 0 $spacing-s;
+      padding: 0 vars.$spacing-m 0 vars.$spacing-s;
 
       white-space: nowrap;
       text-overflow: ellipsis;
     }
 
     &.error {
-      border-color: $color--secondary;
+      border-color: vars.$color--secondary;
     }
 
     &.placeholder .text {
@@ -117,7 +121,7 @@
   &__input {
     width: 100%;
     height: 16px;
-    padding: 0 $spacing-m 0 $spacing-s;
+    padding: 0 vars.$spacing-m 0 vars.$spacing-s;
 
     font-weight: 400;
     text-overflow: ellipsis;
@@ -136,7 +140,7 @@
     box-sizing: border-box;
     min-width: 100%;
     max-height: 320px;
-    padding: $spacing-xs 0;
+    padding: vars.$spacing-xs 0;
 
     &-wrapper {
       position: relative;
@@ -144,10 +148,10 @@
       top: 100%;
 
       box-sizing: border-box;
-      margin-top: $spacing-xs;
+      margin-top: vars.$spacing-xs;
 
-      border: 1px solid $color--gray--light;
-      background: $color--light;
+      border: 1px solid vars.$color--gray--light;
+      background: vars.$color--light;
       box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
     }
 
@@ -165,7 +169,7 @@
 
     &::-webkit-scrollbar-thumb {
       border-radius: 4px;
-      background: $color--gray--dark;
+      background: vars.$color--gray--dark;
     }
 
     &-top {
@@ -192,7 +196,7 @@
       cursor: pointer;
       white-space: nowrap;
 
-      color: $color--dark;
+      color: vars.$color--dark;
       border: none;
       background: transparent;
 
@@ -202,7 +206,7 @@
       }
 
       &-description {
-        margin-left: $spacing-xs;
+        margin-left: vars.$spacing-xs;
 
         color: #757f8c;
       }
@@ -240,7 +244,7 @@
 
       &:hover,
       &_active {
-        background: $color--gray--gentle;
+        background: vars.$color--gray--gentle;
       }
 
       &_disabled {
@@ -250,7 +254,7 @@
       }
 
       &-postfix {
-        margin-left: $spacing-xs;
+        margin-left: vars.$spacing-xs;
       }
     }
 
@@ -262,7 +266,7 @@
   &__arrow {
     position: absolute;
     top: 50%;
-    right: $spacing-xs;
+    right: vars.$spacing-xs;
 
     display: flex;
     align-items: center;
@@ -309,12 +313,12 @@
       font-size: 10px;
       text-transform: uppercase;
 
-      color: $color--gray--dark;
+      color: vars.$color--gray--dark;
     }
   }
 
   &-label {
-    margin-bottom: $spacing-xs;
+    margin-bottom: vars.$spacing-xs;
   }
 
   &__error {
@@ -326,7 +330,7 @@
 
     font-size: 10px;
 
-    color: $color--secondary;
+    color: vars.$color--secondary;
   }
 
   &.disabled {
@@ -361,7 +365,7 @@
     .dropdown {
       &__arrow {
         top: 50% !important;
-        right: $spacing-m !important;
+        right: vars.$spacing-m !important;
 
         width: 16px;
         height: 16px;
@@ -412,7 +416,7 @@
         width: 100dvw;
         height: 100dvh;
         max-height: 100dvh;
-        padding: $spacing-s;
+        padding: vars.$spacing-s;
 
         animation-name: slideup;
         animation-duration: 0.4s;
@@ -421,7 +425,7 @@
       &__list {
         top: 0;
 
-        padding: $spacing-m !important;
+        padding: vars.$spacing-m !important;
 
         &-wrapper {
           position: sticky;
@@ -432,7 +436,7 @@
           box-sizing: border-box;
           max-height: 500px;
 
-          border-radius: $spacing-l !important;
+          border-radius: vars.$spacing-l !important;
 
           &--with-bottom-shadow::after {
             position: absolute;
@@ -471,9 +475,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;
@@ -499,7 +503,7 @@
               align-items: center;
 
               width: 100%;
-              padding-right: $spacing-s;
+              padding-right: vars.$spacing-s;
 
               border: 1px solid var(--form-input-border, #e1e8f1);
               border-radius: 6px;
@@ -518,7 +522,7 @@
               width: 24px;
               min-width: 24px;
               height: 24px;
-              padding: $spacing-xs;
+              padding: vars.$spacing-xs;
 
               border-radius: 2px;
               background: var(--bg-gray-box, #f0f1f4);
@@ -579,7 +583,7 @@
           box-sizing: border-box;
           width: 50px;
           height: 50px;
-          padding: $spacing-m;
+          padding: vars.$spacing-m;
 
           svg {
             width: 16px;
@@ -591,16 +595,14 @@
       }
 
       &-group {
-        margin: 0;
-        margin-bottom: $spacing-xs;
+        margin: 0 0 vars.$spacing-xs;
 
         &:last-child {
-          margin-bottom: $spacing-m;
+          margin-bottom: vars.$spacing-m;
         }
 
         &__name {
-          margin: 0;
-          margin-bottom: $spacing-s;
+          margin: 0 0 vars.$spacing-s;
           padding: 10px 0px 6px;
 
           font-size: 11px;
@@ -614,7 +616,7 @@
         justify-content: space-between;
 
         height: auto !important;
-        padding: 10px $spacing-s !important;
+        padding: 10px vars.$spacing-s !important;
 
         line-height: 24px;