indicator-ui 0.1.123 → 0.1.124

package/dist/scss/styles/mixins/index.scss

@@ -6,4 +6,3 @@
 @forward "changeSvg";
 @forward "themes";
 @forward "utils";
-@forward "formFieldMixins";

package/dist/scss/styles/mixins/utils.scss

@@ -11,8 +11,6 @@
 
 @mixin hover {
   @media (hover: hover) {
-    &:hover {
-      @content;
-    }
+    @content;
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/baseButton.scss

@@ -2,12 +2,11 @@
 
 @mixin base-button() {
   cursor: pointer;
-  transition: background-color ease-out 0.2s;
+  transition: background-color ease-out 0.2s,  border-color ease-out 0.2s;
   border-radius: var(--ui-button-radius, 8px);
   position: relative;
   @include modify-flex($align-items: center, $justify-content: center);
 
-
   .loader {
     width: fit-content;
     height: fit-content;

package/dist/scss/ui/Buttons/styles/mixins/properties/link-black.scss

@@ -1,52 +1,34 @@
 @use '../../../../../styles' as *;
-
-@mixin linkBlackButton-hover-state {
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--gray-900));
-    }
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--gray-900));
-  }
-}
+@use 'utils/button-color' as *;
 
 @mixin linkBlackButton {
   padding: 0 !important;
   gap: 4px;
-
-  .loader {
-    @include modify-svg($stroke: var(--gray-700));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--gray-700));
-  }
-
   .content {
     padding: 0 !important;
-
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--gray-700));
-    }
   }
 
+  @include button-color(
+          $prefix: 'link-black',
+          $icon-color: var(--gray-700),
+          $text-color: var(--gray-700)
+  );
+
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        @include linkBlackButton-hover-state;
-      }
-    }
-
-    @include tablet {
-      &:active {
-        @include linkBlackButton-hover-state;
+        @include button-color(
+                $prefix: 'link-black-hover',
+                $icon-color: var(--gray-900),
+                $text-color: var(--gray-900)
+        );
       }
     }
   }
 
   &:disabled, &.disabled {
     opacity: 0.5;
+    pointer-events: none;
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/link-color.scss

@@ -1,52 +1,34 @@
 @use '../../../../../styles' as *;
-
-@mixin linkColorButton-hover-state {
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--primary-700));
-    }
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--primary-700));
-  }
-}
+@use 'utils/button-color' as *;
 
 @mixin linkColorButton {
   padding: 0 !important;
   gap: 4px;
-
-  .loader {
-    @include modify-svg($stroke: var(--primary-500));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--primary-500));
-  }
-
   .content {
     padding: 0 !important;
-
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--primary-500));
-    }
   }
 
+  @include button-color(
+          $prefix: 'link-color',
+          $icon-color: var(--primary-500),
+          $text-color: var(--primary-500)
+  );
+
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        @include linkColorButton-hover-state;
-      }
-    }
-
-    @include tablet {
-      &:active {
-        @include linkColorButton-hover-state;
+        @include button-color(
+                $prefix: 'link-color-hover',
+                $icon-color: var(--primary-700),
+                $text-color: var(--primary-700)
+        );
       }
     }
   }
 
   &:disabled, &.disabled {
     opacity: 0.5;
+    pointer-events: none;
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/link-gray.scss

@@ -1,63 +1,49 @@
 @use '../../../../../styles' as *;
-
-@mixin linkGrayButton-hover-state {
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--gray-500));
-    }
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--gray-500));
-  }
-  @include darkTheme {
-    .content {
-      .text, .textSecondary {
-        @include fnt-flex($color: var(--base-white));
-      }
-    }
-
-    .icon {
-      @include modify-svg($stroke: var(--base-white));
-    }
-  }
-}
+@use 'utils/button-color' as *;
 
 @mixin linkGrayButton {
   padding: 0 !important;
   gap: 4px;
-
-  .loader {
-    @include modify-svg($stroke: var(--gray-400));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--gray-400));
-  }
-
   .content {
     padding: 0 !important;
-
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--gray-400));
-    }
   }
 
+  @include button-color(
+          $prefix: 'link-gray',
+          $icon-color: var(--gray-400),
+          $text-color: var(--gray-400)
+  );
+
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        @include linkGrayButton-hover-state;
+        @include button-color(
+                $prefix: 'link-gray-hover',
+                $icon-color: var(--gray-500),
+                $text-color: var(--gray-500)
+        );
       }
     }
+  }
 
-    @include tablet {
-      &:active {
-        @include linkGrayButton-hover-state;
+  @include darkTheme {
+    &:not(.disabled):not(:disabled) {
+      @include hover {
+        &:active,
+        &:hover {
+          @include button-color(
+                  $prefix: 'link-gray-hover',
+                  $icon-color: var(--base-white),
+                  $text-color: var(--base-white)
+          );
+        }
       }
     }
   }
 
   &:disabled, &.disabled {
     opacity: 0.5;
+    pointer-events: none;
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/primary.scss

@@ -1,42 +1,30 @@
 @use '../../../../../styles' as *;
+@use 'utils/button-color' as *;
 
 @mixin primaryButton {
-  border-radius: 8px;
-  background-color: var(--ui-button-primary-background-color, var(--primary-500));
-  border: 1px solid var(--ui-button-primary-border-color, transparent);
-  box-shadow: var(--ui-button-primary-box-shadowr, 0 1px 2px 0 #1018280D);
+  border-radius: var(--ui-button-radius, 8px);
 
-  .loader,
-  .icon {
-    @include modify-svg($stroke: var(--ui-button-primary-icon-color, var(--base-white)));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--ui-button-primary-text-color, var(--base-white)));
-    }
-  }
+  @include button-color(
+          $prefix: 'primary',
+          $background-color: var(--primary-500),
+          $border-color: transparent,
+          $icon-color: var(--base-white),
+          $text-color: var(--base-white),
+          $box-shadow: 0 1px 2px 0 #1018280D
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        background-color: var(--ui-button-primary-background-color, var(--primary-600));
-        border: 1px solid var(--ui-button-primary-border-color, transparent);
-        .loader,
-        .icon {
-          @include modify-svg($stroke: var(--ui-button-primary-hover-icon-color, var(--base-white)));
-        }
-      }
-    }
-
-    @include tablet {
-      &:active {
-        background-color: var(--ui-button-primary-background-color, var(--primary-600));
-        border: 1px solid var(--ui-button-primary-border-color, transparent);
-        .loader,
-        .icon {
-          @include modify-svg($stroke: var(--ui-button-primary-hover-icon-color, var(--base-white)));
-        }
+        @include button-color(
+                $prefix: 'primary-hover',
+                $background-color: var(--primary-600),
+                $border-color: transparent,
+                $icon-color: var(--base-white),
+                $text-color: var(--base-white),
+                $box-shadow: 0 1px 2px 0 #1018280D
+        );
       }
     }
   }

package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-color.scss

@@ -1,42 +1,30 @@
 @use '../../../../../styles' as *;
+@use 'utils/button-color' as *;
 
 @mixin secondaryColorButton {
   border-radius: var(--ui-button-radius, 8px);
-  background-color: var(--ui-button-secondary-color-background-color, var(--base-white));
-  border: 1px solid var(--ui-button-secondary-color-border-color, var(--primary-200));
-  box-shadow: var(--ui-button-secondary-color-box-shadow, 0 1px 2px 0 #1018280D);
 
-  .loader,
-  .icon {
-    @include modify-svg($stroke: var(--ui-button-secondary-color-icon-color, var(--primary-500)));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--ui-button-secondary-color-icon-color, var(--primary-500)));
-    }
-  }
+  @include button-color(
+          $prefix: 'secondary-color',
+          $background-color: var(--base-white),
+          $border-color: var(--primary-200),
+          $icon-color: var(--primary-500),
+          $text-color: var(--primary-500),
+          $box-shadow: 0 1px 2px 0 #1018280D
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-50));
-        border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-300));
-        .loader,
-        .icon {
-          @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
-        }
-      }
-    }
-
-    @include tablet {
-      &:active {
-        background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-50));
-        border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-300));
-        .loader,
-        .icon {
-          @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
-        }
+        @include button-color(
+                $prefix: 'secondary-color-hover',
+                $background-color: var(--primary-50),
+                $border-color: var(--primary-300),
+                $icon-color: var(--primary-500),
+                $text-color: var(--primary-500),
+                $box-shadow: 0 1px 2px 0 #1018280D
+        );
       }
     }
   }
@@ -47,43 +35,31 @@
 
   &:disabled, &.disabled {
     opacity: 0.5;
+    pointer-events: none;
   }
 
   @include darkTheme {
-    background-color: var(--ui-button-secondary-color-background-color, transparent);
-    border: 1px solid var(--ui-button-secondary-color-border-color, var(--primary-900));
-
-    .loader,
-    .icon {
-      @include modify-svg($stroke: var(--ui-button-secondary-color-icon-color, var(--primary-500)));
-    }
-
-    .content {
-      .text, .textSecondary {
-        @include fnt-flex($color: var(--ui-button-secondary-color-text-color, var(--primary-500)));
-      }
-    }
+    @include button-color(
+            $prefix: 'secondary-color',
+            $background-color: transparent,
+            $border-color: var(--primary-900),
+            $icon-color: var(--primary-500),
+            $text-color: var(--primary-500),
+            $box-shadow: 0 1px 2px 0 #1018280D
+    );
 
     &:not(.disabled):not(:disabled) {
-      @include tablet-plus {
+      @include hover {
+        &:active,
         &:hover {
-          background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-950));
-          border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-700));
-          .loader,
-          .icon {
-            @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
-          }
-        }
-      }
-
-      @include tablet {
-        &:active {
-          background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-950));
-          border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-700));
-          .loader,
-          .icon {
-            @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
-          }
+          @include button-color(
+                  $prefix: 'secondary-color-hover',
+                  $background-color: var(--primary-950),
+                  $border-color: var(--primary-700),
+                  $icon-color: var(--primary-500),
+                  $text-color: var(--primary-500),
+                  $box-shadow: 0 1px 2px 0 #1018280D
+          );
         }
       }
     }

package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-gray.scss

@@ -1,42 +1,30 @@
 @use '../../../../../styles' as *;
+@use 'utils/button-color' as *;
 
 @mixin secondaryGrayButton {
   border-radius: var(--ui-button-radius, 8px);
-  background-color: var(--ui-button-secondary-gray-background-color, var(--base-white));
-  border: 1px solid var(--ui-button-secondary-gray-border-color, var(--gray-300));
-  box-shadow: var(--ui-button-secondary-gray-box-shadow, 0 1px 2px 0 #1018280D);
 
-  .loader,
-  .icon {
-    @include modify-svg($stroke: var(--ui-button-secondary-gray-icon-color, var(--gray-700)));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--ui-button-secondary-gray-icon-color, var(--gray-700)));
-    }
-  }
+  @include button-color(
+          $prefix: 'secondary-gray',
+          $background-color: var(--base-white),
+          $border-color: var(--gray-300),
+          $icon-color: var(--gray-700),
+          $text-color: var(--gray-700),
+          $box-shadow: 0 1px 2px 0 #1018280D
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-50));
-        border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-300));
-
-        .text {
-          color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-800));
-        }
-      }
-    }
-
-    @include tablet {
-      &:active {
-        background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-50));
-        border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-300));
-
-        .text {
-          color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-800));
-        }
+        @include button-color(
+                $prefix: 'secondary-gray-hover',
+                $background-color: var(--gray-50),
+                $border-color: var(--gray-300),
+                $icon-color: var(--gray-800),
+                $text-color: var(--gray-800),
+                $box-shadow: 0 1px 2px 0 #1018280D
+        );
       }
     }
   }
@@ -51,41 +39,27 @@
   }
 
   @include darkTheme {
-    background-color: var(--ui-button-secondary-gray-background-color, transparent);
-    border: 1px solid var(--ui-button-secondary-gray-border-color, var(--gray-iron-700));
-    box-shadow: var(--ui-button-secondary-gray-box-shadow, 0 1px 2px 0 #1018280D);
-
-    .loader,
-    .icon {
-      @include modify-svg($stroke: var(--ui-button-secondary-gray-icon-color, var(--gray-200)));
-    }
-
-    .content {
-      .text, .textSecondary {
-        @include fnt-flex($color: var(--ui-button-secondary-gray-text-color, var(--gray-200)));
-      }
-    }
+    @include button-color(
+            $prefix: 'secondary-gray',
+            $background-color: transparent,
+            $border-color: var(--gray-700),
+            $icon-color: var(--gray-200),
+            $text-color: var(--gray-200),
+            $box-shadow: 0 1px 2px 0 #1018280D
+    );
 
     &:not(.disabled):not(:disabled) {
-      @include tablet-plus {
+      @include hover {
+        &:active,
         &:hover {
-          background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-800));
-          border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-700));
-
-          .text {
-            color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-200));
-          }
-        }
-      }
-
-      @include tablet {
-        &:active {
-          background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-800));
-          border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-700));
-
-          .text {
-            color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-200));
-          }
+          @include button-color(
+                  $prefix: 'secondary-gray-hover',
+                  $background-color: var(--gray-800),
+                  $border-color: var(--gray-700),
+                  $icon-color: var(--gray-200),
+                  $text-color: var(--gray-200),
+                  $box-shadow: 0 1px 2px 0 #1018280D
+          );
         }
       }
     }

package/dist/scss/ui/Buttons/styles/mixins/properties/small.scss

@@ -32,4 +32,11 @@
       @include fnt-flex($size: 14, $line-height: 16, $weight: 400, $family: var(--golos));
     }
   }
+
+  .counter {
+    min-width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    @include fnt-flex($size: 12, $line-height: 12,);
+  }
 }