feat(core): add browser specific style mixins

taiga-family · Oct 10, 2023 · 30e7b08 · 30e7b08
1 parent 090b8c7
commit 30e7b08
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 18 deletions.
diff --git a/projects/core/components/loader/loader.style.less b/projects/core/components/loader/loader.style.less
@@ -136,6 +136,11 @@
 }
 
 .t-icon {
+    .safari-only({
+        & {
+            overflow: visible;
+        }
+    });
     display: block;
     min-width: 1em;
     max-width: 1em;
@@ -146,13 +151,6 @@
     overflow: hidden;
     transform: scale(1, -1);
     animation: tuiLoaderRotate 3s linear infinite;
-
-    /* Safari Only */
-    @supports (-webkit-hyphens: none) {
-        & {
-            overflow: visible;
-        }
-    }
 }
 
 .t-circle {

diff --git a/projects/core/styles/mixins/browsers.less b/projects/core/styles/mixins/browsers.less
@@ -0,0 +1,23 @@
+.firefox-only(@ruleset) {
+    @supports (-moz-appearance: none) {
+        @ruleset();
+    }
+}
+
+.safari-only(@ruleset) {
+    @supports (-webkit-hyphens: none) {
+        @ruleset();
+    }
+}
+
+.ios-only(@ruleset) {
+    @supports (-webkit-touch-callout: none) {
+        @ruleset();
+    }
+}
+
+.chrome-only(@ruleset) {
+    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
+        @ruleset();
+    }
+}
diff --git a/projects/core/styles/mixins/browsers.scss b/projects/core/styles/mixins/browsers.scss
@@ -0,0 +1,23 @@
+@mixin firefox-only {
+    @supports (-moz-appearance: none) {
+        @content;
+    }
+}
+
+@mixin safari-only {
+    @supports (-webkit-hyphens: none) {
+        @content;
+    }
+}
+
+@mixin ios-only {
+    @supports (-webkit-touch-callout: none) {
+        @content;
+    }
+}
+
+@mixin chrome-only {
+    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
+        @content;
+    }
+}
diff --git a/projects/core/styles/mixins/textfield.less b/projects/core/styles/mixins/textfield.less
@@ -167,6 +167,13 @@
 
 // TODO: Rename to label in 4.0
 .textfield-placeholder() {
+    .safari-only({
+        & {
+            will-change: unset;
+            transition-property: transform, color, letter-spacing;
+        }
+    });
+
     .transition(~'transform, font-size, color, letter-spacing');
     .text-overflow();
     display: block;
@@ -234,13 +241,6 @@
     :host[data-size='l']._focused._label-outside [tuiWrapper][data-mode='onDark'] & {
         color: var(--tui-text-02-night);
     }
-
-    @supports (-webkit-hyphens: none) {
-        & {
-            will-change: unset;
-            transition-property: transform, color, letter-spacing;
-        }
-    }
 }
 
 .input-icon() {

diff --git a/projects/core/styles/mixins/textfield.scss b/projects/core/styles/mixins/textfield.scss
@@ -236,7 +236,7 @@ $line-height-l: 1.25rem;
         color: var(--tui-text-02-night);
     }
 
-    @supports (-webkit-hyphens: none) {
+    @include safari-only {
         & {
             will-change: unset;
             transition-property: transform, color, letter-spacing;

diff --git a/projects/core/styles/taiga-ui-local.less b/projects/core/styles/taiga-ui-local.less
@@ -1,5 +1,9 @@
+/**
+ * @deprecated remove in 4.0
+ */
 @space: 0.25rem;
 
+@import 'mixins/browsers.less';
 @import 'mixins/mixins.less';
 @import 'mixins/picker.less';
 @import 'mixins/slider.less';

diff --git a/projects/core/styles/taiga-ui-local.scss b/projects/core/styles/taiga-ui-local.scss
@@ -1,5 +1,9 @@
-$space: 4px;
+/**
+ * @deprecated remove in 4.0
+ */
+$space: 0.25rem;
 
+@import 'mixins/browsers.scss';
 @import 'mixins/mixins.scss';
 @import 'mixins/picker.scss';
 @import 'mixins/slider.scss';

diff --git a/projects/core/styles/theme/wrapper/base.less b/projects/core/styles/theme/wrapper/base.less
@@ -33,10 +33,10 @@
     });
 
     // Temporary hide focus in Safari until we figure out a better approach
-    @supports (-webkit-hyphens: none) {
+    .safari-only({
         :focus-visible &,
         &:focus-visible {
             --tui-focus: transparent !important;
         }
-    }
+    });
 }