indicator-ui 0.0.229 → 0.0.231

package/dist/scss/styles/adaptive/_breakpoints.scss

@@ -0,0 +1,37 @@
+@use 'variables' as *;
+
+@mixin mobile {
+  @media only screen and (max-width: #{$mobile-width}px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media only screen and (max-width: #{$tablet-width}px) {
+    @content;
+  }
+}
+
+@mixin laptop {
+  @media only screen and (max-width: #{$laptop-width}px) {
+    @content;
+  }
+}
+
+@mixin hd {
+  @media only screen and (max-width: #{$hd-width}px) {
+    @content;
+  }
+}
+
+@mixin hd-plus {
+  @media only screen and (min-width: #{$hd-width}px) {
+    @content;
+  }
+}
+
+@mixin tablet-plus {
+  @media only screen and (min-width: #{$tablet-width}px) {
+    @content;
+  }
+}

package/dist/scss/styles/adaptive/_variables.scss

@@ -0,0 +1,5 @@
+$mobile-width: 700;
+$tablet-width: 1024;
+$laptop-width: 1440;
+$hd-width: 1920;
+

package/dist/scss/styles/adaptive/index.scss

@@ -0,0 +1,2 @@
+@forward "breakpoints";
+@forward "variables";

package/dist/scss/styles/index.scss

@@ -1,3 +1,4 @@
 @forward "mixins";
 @forward "colors";
-@forward "fonts";
+@forward "fonts";
+@forward "adaptive";

package/dist/scss/test/global.scss

@@ -9,6 +9,12 @@
   border: transparent;
   text-decoration: none;
 
+  // Управляет подсветкой при нажатии (актуально для iOS)
+  // В случае конфликтов — отключите это свойство
+  button, a {
+    -webkit-tap-highlight-color: transparent;
+  }
+
   button {
     cursor: pointer;
     background: none;

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

@@ -13,27 +13,31 @@
     @include fnt-flex($weight: 400, $color: var(--gray-700));
   }
 
-  &:hover {
-    .text {
-      color: var(--gray-900);
-    }
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled) {
+      .text {
+        color: var(--gray-900);
+      }
 
-    .icon {
-      @include modify-svg($stroke: var(--gray-900));
+      .icon {
+        @include modify-svg($stroke: var(--gray-900));
+      }
     }
   }
 
-  &:disabled, &.disabled {
-    opacity: 0.5;
-
-    &:hover {
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
       .text {
-        color: var(--gray-700);
+        color: var(--gray-900);
       }
 
       .icon {
-        @include modify-svg($stroke: var(--gray-700));
+        @include modify-svg($stroke: var(--gray-900));
       }
     }
   }
+
+  &:disabled, &.disabled {
+    opacity: 0.5;
+  }
 }

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

@@ -13,13 +13,27 @@
     @include fnt-flex($weight: 400, $color: var(--blue-dark-500));
   }
 
-  &:hover:not(.disabled):not(:disabled) {
-    .text {
-      color: var(--blue-dark-700);
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled) {
+      .text {
+        color: var(--blue-dark-700);
+      }
+
+      .icon {
+        @include modify-svg($stroke: var(--blue-dark-700));
+      }
     }
+  }
+
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
+      .text {
+        color: var(--blue-dark-700);
+      }
 
-    .icon {
-      @include modify-svg($stroke: var(--blue-dark-700));
+      .icon {
+        @include modify-svg($stroke: var(--blue-dark-700));
+      }
     }
   }
 

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

@@ -13,27 +13,31 @@
     @include fnt-flex($weight: 400, $color: var(--gray-400));
   }
 
-  &:hover {
-    .text {
-      color: var(--gray-500);
-    }
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled) {
+      .text {
+        color: var(--gray-500);
+      }
 
-    .icon {
-      @include modify-svg($stroke: var(--gray-500));
+      .icon {
+        @include modify-svg($stroke: var(--gray-500));
+      }
     }
   }
 
-  &:disabled, &.disabled {
-    opacity: 0.5;
-
-    &:hover {
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
       .text {
-        color: var(--gray-400);
+        color: var(--gray-500);
       }
 
       .icon {
-        @include modify-svg($stroke: var(--gray-400));
+        @include modify-svg($stroke: var(--gray-500));
       }
     }
   }
+
+  &:disabled, &.disabled {
+    opacity: 0.5;
+  }
 }

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

@@ -14,8 +14,17 @@
     @include fnt-flex($weight: 500, $color: var(--base-white));
   }
 
-  &:hover {
-    background-color: var(--blue-dark-600);
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled):not(:active) {
+      background-color: var(--blue-dark-600);
+    }
+  }
+
+
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
+      background-color: var(--blue-dark-600);
+    }
   }
 
   //&:focus {
@@ -25,9 +34,5 @@
 
   &:disabled, &.disabled {
     opacity: 0.3;
-
-    &:hover {
-      background-color: var(--blue-dark-500);
-    }
   }
 }

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

@@ -14,9 +14,18 @@
     @include fnt-flex($weight: 500, $color: var(--blue-dark-500));
   }
 
-  &:hover {
-    background-color: var(--blue-dark-50);
-    border: 1px solid var(--blue-dark-300);
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled):not(:active) {
+      background-color: var(--blue-dark-50);
+      border: 1px solid var(--blue-dark-300);
+    }
+  }
+
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
+      background-color: var(--blue-dark-50);
+      border: 1px solid var(--blue-dark-300);
+    }
   }
 
   //&:focus {
@@ -25,11 +34,5 @@
 
   &:disabled, &.disabled {
     opacity: 0.5;
-
-
-    &:hover {
-      background-color: var(--base-white);
-      border: 1px solid var(--blue-dark-200);
-    }
   }
 }

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

@@ -14,29 +14,35 @@
     @include fnt-flex($weight: 500, $color: var(--gray-700));
   }
 
-  &:hover {
-    background-color: var(--gray-50);
-    border: 1px solid var(--gray-300);
 
-    .text {
-      color: var(--gray-800);
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled):not(:active) {
+      background-color: var(--gray-50);
+      border: 1px solid var(--gray-300);
+
+      .text {
+        color: var(--gray-800);
+      }
+    }
+  }
+
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
+      background-color: var(--gray-50);
+      border: 1px solid var(--gray-300);
+
+      .text {
+        color: var(--gray-800);
+      }
     }
   }
 
+
   //&:focus {
   //  box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 #1018280D, 0 0 0 1px var(--gray-300);
   //}
 
   &:disabled, &.disabled {
     opacity: 0.5;
-
-    &:hover {
-      background-color: var(--base-white);
-      border: 1px solid var(--gray-300);
-
-      .text {
-        color: var(--gray-700);
-      }
-    }
   }
-}
+}

package/dist/scss/ui/Buttons/styles/mixins/properties/tab-active.scss

@@ -14,27 +14,35 @@
     @include fnt-flex($weight: 500, $color: var(--gray-700));
   }
 
-  &:hover {
-    .icon {
-      @include modify-svg($stroke: var(--gray-900));
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled):not(:active) {
+      &:hover {
+        .icon {
+          @include modify-svg($stroke: var(--gray-900));
+        }
+
+        .text {
+          color: var(--gray-900);
+        }
+      }
     }
+  }
+
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
+      &:hover {
+        .icon {
+          @include modify-svg($stroke: var(--gray-900));
+        }
 
-    .text {
-      color: var(--gray-900);
+        .text {
+          color: var(--gray-900);
+        }
+      }
     }
   }
 
   &:disabled, &.disabled {
     opacity: 0.5;
-
-    &:hover {
-      .icon {
-        @include modify-svg($stroke: var(--gray-700));
-      }
-
-      .text {
-        color: var(--gray-700);
-      }
-    }
   }
 }

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

@@ -14,31 +14,35 @@
     @include fnt-flex($weight: 500, $color: var(--gray-500));
   }
 
-  &:hover {
-    background-color: var(--gray-200);
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled):not(:active) {
+      background-color: var(--gray-200);
 
-    .icon {
-      @include modify-svg($stroke: var(--gray-800));
-    }
+      .icon {
+        @include modify-svg($stroke: var(--gray-800));
+      }
 
-    .text {
-      color: var(--gray-800);
+      .text {
+        color: var(--gray-800);
+      }
     }
   }
 
-  &:disabled, &.disabled {
-    opacity: 0.5;
-
-    &:hover {
-      background-color: var(--gray-100);
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
+      background-color: var(--gray-200);
 
       .icon {
-        @include modify-svg($stroke: var(--gray-500));
+        @include modify-svg($stroke: var(--gray-800));
       }
 
       .text {
-        color: var(--gray-500);
+        color: var(--gray-800);
       }
     }
   }
+
+  &:disabled, &.disabled {
+    opacity: 0.5;
+  }
 }

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

@@ -10,28 +10,31 @@
     color: var(--blue-dark-500);
   }
 
-  &:hover {
-    .text {
-      @include fnt-flex($weight: 400, $color: var(--blue-dark-700));
-    }
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled) {
+      .text {
+        @include fnt-flex($weight: 400, $color: var(--blue-dark-700));
+      }
 
-    .icon {
-      @include modify-svg($stroke: var(--blue-dark-700));
+      .icon {
+        @include modify-svg($stroke: var(--blue-dark-700));
+      }
     }
   }
 
-  &:disabled, &.disabled {
-    opacity: 0.5;
-
-    &:hover {
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
       .text {
-        @include fnt-flex($weight: 400, $color: var(--blue-dark-500));
+        @include fnt-flex($weight: 400, $color: var(--blue-dark-700));
       }
 
       .icon {
-        @include modify-svg($stroke: var(--blue-dark-500));
+        @include modify-svg($stroke: var(--blue-dark-700));
       }
     }
+  }
 
+  &:disabled, &.disabled {
+    opacity: 0.5;
   }
 }

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

@@ -11,27 +11,32 @@
     @include fnt-flex($weight: 400, $color: var(--gray-400));
   }
 
-  &:hover {
-    .text {
-      color: var(--gray-900);
-    }
 
-    .icon {
-      @include modify-svg($stroke: var(--gray-900));
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled) {
+      .text {
+        color: var(--gray-900);
+      }
+
+      .icon {
+        @include modify-svg($stroke: var(--gray-900));
+      }
     }
   }
 
-  &:disabled, &.disabled {
-    opacity: 0.5;
-
-    &:hover {
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
       .text {
-        color: var(--gray-700);
+        color: var(--gray-900);
       }
 
       .icon {
-        @include modify-svg($stroke: var(--gray-700));
+        @include modify-svg($stroke: var(--gray-900));
       }
     }
   }
+
+  &:disabled, &.disabled {
+    opacity: 0.5;
+  }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-white.scss

@@ -10,28 +10,31 @@
     @include fnt-flex($weight: 400, $color: var(--blue-dark-100));
   }
 
-  &:hover {
-    .text {
-      color: var(--base-white);
-    }
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled) {
+      .text {
+        color: var(--base-white);
+      }
 
-    .icon {
-      @include modify-svg($stroke: var(--base-white));
+      .icon {
+        @include modify-svg($stroke: var(--base-white));
+      }
     }
   }
 
-  &:disabled, &.disabled {
-    opacity: 0.5;
-
-    &:hover {
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
       .text {
-        color: var(--blue-dark-100);
+        color: var(--base-white);
       }
 
       .icon {
-        @include modify-svg($stroke: var(--blue-dark-100));
+        @include modify-svg($stroke: var(--base-white));
       }
     }
+  }
 
+  &:disabled, &.disabled {
+    opacity: 0.5;
   }
 }

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

@@ -10,13 +10,27 @@
     @include fnt-flex($weight: 400, $color: var(--error-500));
   }
 
-  &:hover:not(.disabled):not(:disabled) {
-    .text {
-      color: var(--error-700);
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled):not(:active) {
+      .text {
+        color: var(--error-700);
+      }
+
+      .icon {
+        @include modify-svg($stroke: var(--error-700));
+      }
     }
+  }
+
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
+      .text {
+        color: var(--error-700);
+      }
 
-    .icon {
-      @include modify-svg($stroke: var(--error-700));
+      .icon {
+        @include modify-svg($stroke: var(--error-700));
+      }
     }
   }
 

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

@@ -6,9 +6,23 @@
   border: 1px solid transparent;
   box-shadow: 0 1px 2px 0 #1018280D;
 
-  &:hover {
-    border: 1px solid var(--error-600);
-    background-color: var(--error-600);
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled) {
+      border: 1px solid var(--error-600);
+      background-color: var(--error-600);
+    }
+
+    &:active:not(.disabled):not(:disabled) {
+      border: 1px solid var(--error-500);
+      background-color: var(--error-500);
+    }
+  }
+
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
+      border: 1px solid var(--error-600);
+      background-color: var(--error-600);
+    }
   }
 
   //&:focus {
@@ -17,9 +31,5 @@
 
   &:disabled, &.disabled {
     opacity: 0.3;
-
-    &:hover {
-      border: 1px solid var(--error-500);
-    }
   }
 }

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

@@ -13,9 +13,18 @@
     color: var(--error-500);
   }
 
-  &:hover {
-    background-color: var(--error-50);
-    border: 1px solid var(--error-400);
+  @include tablet-plus {
+    &:hover:not(.disabled):not(:disabled):not(:active) {
+        background-color: var(--error-50);
+        border: 1px solid var(--error-400);
+    }
+  }
+
+  @include tablet {
+    &:active:not(.disabled):not(:disabled) {
+        background-color: var(--error-50);
+        border: 1px solid var(--error-400);
+    }
   }
 
   //&:focus {
@@ -24,10 +33,5 @@
 
   &:disabled, &.disabled {
     opacity: 0.5;
-
-    &:hover {
-      background-color: var(--base-white);
-      border: 1px solid var(--error-200f);
-    }
   }
 }

package/dist/scss/ui/CheckboxMark/styles/mixins/base.scss

@@ -21,7 +21,10 @@
     height: 14px;
     flex: none;
   }
-  &:hover {
-    @include checkbox-mark-base-hover();
+
+  @include tablet-plus {
+    &:hover {
+      @include checkbox-mark-base-hover();
+    }
   }
 }