@taiga-ui/core 3.1.0 → 3.3.0

package/styles/mixins/wrapper.scss

@@ -1,7 +1,9 @@
 @mixin wrapper-hover {
-    &:hover:not(._no-hover),
-    &[data-state='hover'] {
-        @content;
+    @media (hover: hover) {
+        &:hover:not(._no-hover),
+        &[data-state='hover'] {
+            @content;
+        }
     }
 }
 

package/styles/variables/media.scss

@@ -1,3 +1,24 @@
+$tui-media-retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
+$tui-media-retina-mobile: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 37.4625em), (min-resolution: 192dpi) and (max-width: 37.4625em)';
+$tui-media-retina-tablet: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 63.9625em), (min-resolution: 192dpi) and (max-width: 63.9625em)';
+$tui-media-retina-desktop: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 84.9625em), (min-resolution: 192dpi) and (max-width: 84.9625em)';
+
+$tui-mobile: 'screen and (max-width: 47.9625em)';
+$tui-mobile-min: 'screen and (min-width: 22.5em)';
+$tui-mobile-interval: '(min-width: 22.5em) and (max-width: 47.9625em)';
+
+$tui-tablet: 'screen and (max-width: 63.9625em)';
+$tui-tablet-min: 'screen and (min-width: 48em)';
+$tui-tablet-interval: '(min-width: 48em) and (max-width: 63.9625em)';
+
+$tui-desktop: 'screen and (max-width: 79.9625em)';
+$tui-desktop-min: 'screen and (min-width: 64em)';
+$tui-desktop-interval: '(min-width: 64em) and (max-width: 79.9625em)';
+
+$tui-desktop-lg-min: 'screen and (min-width: 80em)';
+
+// TODO: 4.0 delete all deprecations below
+// deprecated
 $media-retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
 $media-retina-mobile: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 599px), (min-resolution: 192dpi) and (max-width: 599px)';
 $media-retina-tablet: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 1023px), (min-resolution: 192dpi) and (max-width: 1023px)';