@taiga-ui/core 3.2.0 → 3.4.0

package/styles/mixins/textfield.scss

@@ -1,8 +1,11 @@
+$line-height-l: 1.25rem;
+
 @mixin textfield-host() {
     @include text-basic();
     position: relative;
     display: block;
     border-radius: var(--tui-radius-m);
+    text-align: left;
 
     &[data-size='s'] {
         height: var(--tui-height-s);
@@ -20,7 +23,8 @@
         height: var(--tui-height-l);
         min-height: var(--tui-height-l);
         max-height: var(--tui-height-l);
-        font-size: 15px;
+        font: var(--tui-font-text-m);
+        line-height: $line-height-l;
     }
 }
 
@@ -28,17 +32,26 @@
     display: flex;
     height: 100%;
     width: 100%;
-    padding: 0 12px;
+    padding: 0 var(--tui-padding-m);
     box-sizing: border-box;
     align-items: center;
     overflow: hidden;
 
     :host[data-size='s'] & {
-        padding-right: 8px;
+        padding: 0 var(--tui-padding-s);
     }
 
     :host[data-size='l'] & {
-        padding-left: 16px;
+        padding: 0 var(--tui-padding-l);
+    }
+
+    &:after {
+        content: '';
+        margin-right: -0.25rem;
+    }
+
+    :host[data-size='m'] &:after {
+        display: none;
     }
 }
 
@@ -46,75 +59,101 @@
     @include text-basic();
     @include clearinput();
     @include fullsize();
-    padding: 0 12px;
+    padding: 0 var(--tui-padding-m);
+    border: solid transparent;
+    border-width: 0 var(--border-end, 0) 0 var(--border-start, 0);
+    border-inline-start-width: var(--border-start, 0);
+    border-inline-end-width: var(--border-end, 0);
+    text-indent: var(--text-indent);
+    text-align: inherit;
     box-sizing: border-box;
     white-space: nowrap;
     overflow: hidden;
     text-transform: inherit;
+    resize: none;
+    text-overflow: ellipsis;
 
-    :host[data-size='s'] & {
-        padding: 0 8px 0 12px;
+    :host[data-mode='onDark'] &,
+    :host-context(tui-primitive-textfield[data-mode='onDark']),
+    :host-context(tui-text-area[data-mode='onDark']) {
+        @include autofill(dark);
     }
 
-    :host[data-size='l'] & {
-        padding: 0 16px;
+    :host[data-size='s'] &,
+    :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),
+    :host-context(tui-text-area[data-size='s']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-s);
     }
 
-    :host._disabled & {
+    :host[data-size='l'] &,
+    :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),
+    :host-context(tui-text-area[data-size='l']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-l);
+    }
+
+    :host._disabled &,
+    :host-context(tui-primitive-textfield._disabled),
+    :host-context(tui-text-area._disabled) {
         // $bad TODO: research why you can reach disabled textfield with mask inside a label without that
         pointer-events: none;
     }
 
-    :host[data-size='l']:not(._label-outside) & {
-        padding-top: 20px;
+    :host[data-size='l']:not(._label-outside) &,
+    :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield) {
+        padding-top: $line-height-l;
 
         // Workaround for raising placeholder in temporary autofill
-        &:-webkit-autofill + .content .placeholder {
-            width: 114%; // compensation of scale(0.87)
-            transform: translateY(-10px) scale(0.87);
+        &:-webkit-autofill + .t-content .t-placeholder {
+            font-size: 0.8156rem;
+            transform: translateY(-0.625rem);
         }
     }
 
-    :host[data-size='m']:not(._label-outside) & {
-        padding-top: 18px;
+    :host[data-size='m']:not(._label-outside) &,
+    :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield) {
+        padding-top: 1.125rem;
 
         // Workaround for raising placeholder in temporary autofill
-        &:-webkit-autofill + .content .placeholder {
-            width: 118%; // compensation of scale(0.85)
-            transform: translateY(-8px) scale(0.85);
+        &:-webkit-autofill + .t-content .t-placeholder {
+            font-size: 0.69rem;
+            transform: translateY(-0.5rem);
         }
     }
+
+    :host._hidden input&,
+    :host-context(tui-primitive-textfield._hidden) {
+        opacity: 0;
+        text-indent: -10em; // Hide blinking caret even in IE
+        -webkit-user-select: none; // Hide blinking caret in mobile safari
+    }
 }
 
 @mixin textfield-wrapper() {
     flex: 1;
     min-width: 0;
-    padding-right: $space;
+    padding-right: 0.25rem;
+    padding-inline-end: 0.25rem;
+    padding-inline-start: 0;
 }
 
 @mixin textfield-placeholder() {
-    @include transition('transform, min-width, color, letter-spacing');
+    @include transition('transform, font-size, color, letter-spacing');
     @include text-basic();
     @include text-overflow();
     display: block;
     width: 100%;
-    height: 20px;
-    font-size: 13px;
-    box-sizing: border-box;
     user-select: none;
-    pointer-events: none;
     color: var(--tui-text-02);
-    transform-origin: left;
-    letter-spacing: normal;
-    text-transform: none;
+    pointer-events: none;
+    will-change: transform;
+    transform: translateY(0);
 
     &_raised {
-        width: 114%; // compensation of scale(0.87)
-        transform: translateY(-10px) scale(0.87);
+        transform: translateY(-0.625rem);
 
         :host[data-size='m'] & {
-            width: 118%;
-            transform: translateY(-8px) scale(0.85);
+            font: var(--tui-font-text-xs);
+            transform: translateY(-0.5rem);
             letter-spacing: 0.025rem;
         }
 
@@ -136,7 +175,11 @@
     }
 
     :host[data-size='l'] & {
-        font-size: 15px;
+        font-size: 0.9375rem;
+
+        &_raised {
+            font-size: 0.8156rem;
+        }
     }
 
     :host[data-size='m']._focused:not(._label-outside) &,
@@ -164,6 +207,7 @@
 
     @supports (-webkit-hyphens: none) {
         & {
+            will-change: unset;
             transition-property: transform, color, letter-spacing;
         }
     }
@@ -171,8 +215,8 @@
 
 @mixin input-icon() {
     display: flex;
-    width: 24px;
-    height: 24px;
+    width: 1.5rem;
+    height: 1.5rem;
     align-items: center;
     justify-content: center;
     color: var(--tui-text-03);
@@ -208,92 +252,43 @@
     }
 }
 
-@mixin example-text() {
-    display: flex;
-    align-items: center;
-    height: 20px;
-    margin: -20px 0;
-    padding: 10px 0;
-    box-sizing: content-box;
-    color: var(--tui-text-03);
-    letter-spacing: normal;
-    text-transform: none;
-
-    :host[data-size='m']._label-outside & {
-        margin-top: -19px;
-    }
-
-    :host[data-mode='onDark'] & {
-        color: var(--tui-text-03-night);
-    }
-}
-
 @mixin textfield() {
     :host {
         @include textfield-host();
     }
 
-    .input {
+    .t-input {
         @include textfield-input();
     }
 
-    .ghost {
-        visibility: hidden;
-        white-space: pre;
-        text-overflow: clip;
-    }
-
-    .filler {
-        vertical-align: middle;
-    }
-
-    .content {
+    .t-content {
         @include textfield-content();
     }
 
-    .wrapper {
+    .t-wrapper {
         @include textfield-wrapper();
     }
 
-    .value-decoration {
-        @include example-text();
-    }
-
-    .value-decoration-inner {
-        @include text-overflow();
-        min-width: 0;
-    }
-
-    .postfix {
-        @include transition('color');
-        color: var(--tui-text-01);
-
-        &_shifted {
-            margin-left: 0.5ch;
-        }
-
-        :host[data-mode='onDark'] & {
-            color: var(--tui-text-01-night);
-        }
-    }
-
-    .placeholder {
+    .t-placeholder {
         @include textfield-placeholder();
     }
 
-    .cleaner {
+    .t-cleaner {
         @include icon-button();
     }
 
     // $bad TODO: Refactor this and interactive icons together
-    .icon {
+    .t-icon {
         @include input-icon();
 
         &_left {
             margin: 0 2 * $space 0 -$space;
+            margin-inline-start: -$space;
+            margin-inline-end: 2 * $space;
 
             :host[data-size='s'] & {
                 margin-right: $space;
+                margin-inline-end: $space;
             }
         }
     }

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/theme/dialog.less

@@ -1,4 +1,4 @@
-@import '../mixins/mixins';
+@import '../mixins/mixins.less';
 
 tui-root:not(._mobile) tui-dialog-host > section {
     .customize-scroll();

package/styles/theme/wrapper/accent.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 [tuiWrapper][data-appearance='accent'] {

package/styles/theme/wrapper/base.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 [tuiWrapper] {

package/styles/theme/wrapper/icon.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 [tuiWrapper][data-appearance='icon'] {

package/styles/theme/wrapper/mono.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 tui-wrapper[data-appearance='mono'],

package/styles/theme/wrapper/outline.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 [tuiWrapper][data-appearance='outline'] {

package/styles/theme/wrapper/primary.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 [tuiWrapper][data-appearance='primary'] {

package/styles/theme/wrapper/secondary-destructive.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 tui-wrapper[data-appearance='secondary-destructive'],

package/styles/theme/wrapper/secondary.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 [tuiWrapper][data-appearance='secondary'],

package/styles/theme/wrapper/table.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 [tuiWrapper][data-appearance='table'] {

package/styles/theme/wrapper/textfield.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 [tuiWrapper][data-appearance='textfield'] {

package/styles/theme/wrapper/whiteblock.less

@@ -1,4 +1,4 @@
-@import '../../taiga-ui-local';
+@import '../../taiga-ui-local.less';
 
 /* stylelint-disable order/order */
 [tuiWrapper][data-appearance='whiteblock'],

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)';