@taiga-ui/core 2.21.0 → 2.25.0

package/styles/markup/tui-group-old.less

@@ -0,0 +1,322 @@
+.tui-group {
+    .createStackingContext();
+    display: flex;
+
+    & > * {
+        flex: 1 1 0;
+        min-width: 0;
+
+        &:nth-child(n) {
+            border-radius: 0;
+        }
+
+        &:not(:last-child) {
+            margin-right: (@space / 2);
+        }
+    }
+
+    /* stylelint-disable */
+    &_collapsed {
+        & > * {
+            z-index: 1;
+
+            &:not(:last-child) {
+                margin-right: -0.0625rem;
+            }
+
+            &._readonly,
+            &._disabled,
+            &._readonly:hover,
+            &._disabled:hover {
+                z-index: 0;
+            }
+
+            &:hover,
+            &._hovered,
+            &._pressed {
+                z-index: 3;
+            }
+
+            &._invalid {
+                z-index: 2;
+
+                &:hover,
+                &._hovered,
+                &._pressed {
+                    z-index: 4;
+                }
+            }
+
+            // @bad TODO: remove "touched" and "focus-visible"
+            &._hosted_dropdown_focused,
+            &._focus-visible,
+            &._focused.ng-touched,
+            &._focused.ng-untouched {
+                z-index: 5;
+            }
+
+            &._active,
+            &[data-appearance='whiteblock-active'] {
+                z-index: 6;
+            }
+
+            &._focus-visible {
+                &._focused,
+                &._active,
+                &[data-appearance='whiteblock-active'] {
+                    z-index: 7;
+                }
+            }
+        }
+    }
+
+    &_orientation_vertical {
+        display: inline-flex;
+        flex-direction: column;
+
+        & > * {
+            min-height: auto;
+            flex: 0 0 auto;
+
+            &:not(:last-child) {
+                margin-right: 0;
+                margin-bottom: (@space / 2);
+            }
+        }
+
+        &.tui-group_collapsed {
+            & > * {
+                &:not(:last-child) {
+                    margin-right: 0;
+                    margin-bottom: -0.0625rem;
+                }
+            }
+        }
+    }
+
+    &_rounded.tui-group_orientation_horizontal {
+        & > * {
+            &:first-child {
+                border-top-left-radius: var(--tui-radius-m);
+                border-bottom-left-radius: var(--tui-radius-m);
+            }
+
+            &:last-child {
+                border-top-right-radius: var(--tui-radius-m);
+                border-bottom-right-radius: var(--tui-radius-m);
+            }
+        }
+    }
+
+    &_rounded.tui-group_orientation_horizontal.tui-group_radius_large {
+        & > * {
+            &:first-child {
+                border-top-left-radius: var(--tui-radius-l);
+                border-bottom-left-radius: var(--tui-radius-l);
+            }
+
+            &:last-child {
+                border-top-right-radius: var(--tui-radius-l);
+                border-bottom-right-radius: var(--tui-radius-l);
+            }
+        }
+    }
+
+    &_rounded.tui-group_orientation_vertical {
+        & > * {
+            &:first-child {
+                border-top-left-radius: var(--tui-radius-m);
+                border-top-right-radius: var(--tui-radius-m);
+            }
+
+            &:last-child {
+                border-bottom-left-radius: var(--tui-radius-m);
+                border-bottom-right-radius: var(--tui-radius-m);
+            }
+        }
+    }
+
+    &_rounded.tui-group_orientation_vertical.tui-group_radius_large {
+        & > * {
+            &:first-child {
+                border-top-left-radius: var(--tui-radius-l);
+                border-top-right-radius: var(--tui-radius-l);
+            }
+
+            &:last-child {
+                border-bottom-left-radius: var(--tui-radius-l);
+                border-bottom-right-radius: var(--tui-radius-l);
+            }
+        }
+    }
+
+    &_rounded.tui-group_adaptive {
+        &.tui-group_orientation_vertical:not(.tui-group_collapsed),
+        &.tui-group_orientation_horizontal {
+            & > * {
+                @media @mobile {
+                    &:first-child:not(:last-child),
+                    &:last-child:not(:first-child) {
+                        border-radius: var(--tui-radius-m);
+                    }
+                }
+            }
+        }
+    }
+
+    &_rounded.tui-group_adaptive.tui-group_radius_large {
+        &.tui-group_orientation_vertical:not(.tui-group_collapsed),
+        &.tui-group_orientation_horizontal {
+            & > * {
+                @media @mobile {
+                    &:first-child:not(:last-child),
+                    &:last-child:not(:first-child) {
+                        border-radius: var(--tui-radius-l);
+                    }
+                }
+            }
+        }
+    }
+
+    &_adaptive {
+        &.tui-group_orientation_vertical {
+            @media @mobile {
+                width: 100%;
+
+                & > * {
+                    &:nth-child(n):not(:only-child) {
+                        border-radius: var(--tui-radius-m);
+                    }
+
+                    &:not(:last-child) {
+                        margin-bottom: @space * 4;
+                    }
+                }
+
+                &.tui-group_collapsed {
+                    & > * {
+                        &:nth-child(n):not(:only-child) {
+                            border-radius: 0;
+                        }
+
+                        &:first-child:not(:last-child) {
+                            border-radius: var(--tui-radius-m) var(--tui-radius-m) 0 0;
+                        }
+
+                        &:last-child:not(:first-child) {
+                            border-radius: 0 0 var(--tui-radius-m) var(--tui-radius-m);
+                        }
+
+                        &:not(:last-child) {
+                            margin-bottom: -0.0625rem;
+                        }
+                    }
+                }
+            }
+        }
+
+        &.tui-group_orientation_horizontal {
+            @media @mobile {
+                flex-direction: column;
+                width: 100%;
+
+                & > * {
+                    &:nth-child(n):not(:only-child) {
+                        border-radius: var(--tui-radius-m);
+                    }
+
+                    &:not(:last-child) {
+                        margin-right: 0;
+                        margin-bottom: @space * 4;
+                    }
+                }
+
+                &.tui-group_collapsed {
+                    & > * {
+                        &:nth-child(n):not(:only-child) {
+                            border-radius: 0;
+                        }
+
+                        &:first-child:not(:last-child) {
+                            border-radius: var(--tui-radius-m) var(--tui-radius-m) 0 0;
+                        }
+
+                        &:last-child:not(:first-child) {
+                            border-radius: 0 0 var(--tui-radius-m) var(--tui-radius-m);
+                        }
+
+                        &:not(:last-child) {
+                            margin-right: 0;
+                            margin-bottom: -0.0625rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &_adaptive.tui-group_radius_large {
+        &.tui-group_orientation_vertical {
+            @media @mobile {
+                & > * {
+                    &:nth-child(n):not(:only-child) {
+                        border-radius: var(--tui-radius-l);
+                    }
+                }
+
+                &.tui-group_collapsed {
+                    & > * {
+                        &:nth-child(n):not(:only-child) {
+                            border-radius: 0;
+                        }
+
+                        &:first-child:not(:last-child) {
+                            border-radius: var(--tui-radius-l) var(--tui-radius-l) 0 0;
+                        }
+
+                        &:last-child:not(:first-child) {
+                            border-radius: 0 0 var(--tui-radius-l) var(--tui-radius-l);
+                        }
+                    }
+                }
+            }
+        }
+
+        &.tui-group_orientation_horizontal {
+            @media @mobile {
+                & > * {
+                    &:nth-child(n):not(:only-child) {
+                        border-radius: var(--tui-radius-l);
+                    }
+                }
+
+                &.tui-group_collapsed {
+                    & > * {
+                        &:nth-child(n):not(:only-child) {
+                            border-radius: 0;
+                        }
+
+                        &:first-child:not(:last-child) {
+                            border-radius: var(--tui-radius-l) var(--tui-radius-l) 0 0;
+                        }
+
+                        &:last-child:not(:first-child) {
+                            border-radius: 0 0 var(--tui-radius-l) var(--tui-radius-l);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /* stylelint-enable */
+
+    &__auto-width-item {
+        min-width: auto;
+        flex: 0 0 auto;
+    }
+
+    // specificity is the reason of this selector
+    & .tui-group__inherit-item {
+        border-radius: inherit;
+    }
+}

package/styles/markup/tui-group.less

@@ -11,7 +11,7 @@
         }
 
         &:not(:last-child) {
-            margin-right: @space / 2;
+            margin-right: (@space / 2);
         }
     }
 
@@ -80,7 +80,7 @@
 
             &:not(:last-child) {
                 margin-right: 0;
-                margin-bottom: @space / 2;
+                margin-bottom: (@space / 2);
             }
         }
 

package/styles/markup/tui-row-old.less

@@ -0,0 +1,157 @@
+@space-small: 0.5rem;
+@space-normal: 1.25rem;
+@space-large: 1.5rem;
+
+/* stylelint-disable order/order */
+.generate-columns(@infix, @n, @padding, @i: 1) when (@i =< @n) {
+    &_@{infix}-@{i} {
+        width: (@i * 100% / @n);
+        padding-left: @padding;
+        padding-right: @padding;
+        box-sizing: border-box;
+    }
+
+    .generate-columns(@infix, @n, @padding, (@i + 1));
+}
+
+.generate-offset-columns(@infix, @n, @i: 1) when (@i =< @n) {
+    &_@{infix}-@{i} {
+        margin-left: (@i * 100% / @n);
+    }
+
+    .generate-offset-columns(@infix, @n, (@i + 1));
+}
+
+.generate-sme-columns(@n, @padding, @i: 1) when (@i =< @n) {
+    &_@{i} {
+        width: (@i * 100% / @n);
+        padding-left: @padding;
+        padding-right: @padding;
+        box-sizing: border-box;
+    }
+
+    .generate-sme-columns(@n, @padding, (@i + 1));
+}
+
+.generate-sme-offset-columns(@n, @i: 1) when (@i =< @n) {
+    &_@{i} {
+        margin-left: (@i * 100% / @n);
+    }
+
+    .generate-sme-offset-columns(@n, (@i + 1));
+}
+/* stylelint-enable order/order */
+
+.tui-row {
+    display: flex;
+    flex-wrap: wrap;
+
+    &_align_center {
+        align-items: center;
+    }
+
+    &_align_start {
+        align-items: flex-start;
+    }
+
+    &_align_end {
+        align-items: flex-end;
+    }
+
+    &_adaptive.tui-row {
+        @media @desktop-lg-min {
+            margin-left: -@space-large;
+            margin-right: -@space-large;
+        }
+
+        @media @desktop {
+            margin-left: -@space-normal;
+            margin-right: -@space-normal;
+        }
+
+        @media @tablet {
+            margin-left: -@space-small;
+            margin-right: -@space-small;
+        }
+
+        @media @mobile {
+            margin-left: -@space-small;
+            margin-right: -@space-small;
+        }
+    }
+
+    &_temporary.tui-row {
+        margin-left: -@space-normal;
+        margin-right: -@space-normal;
+    }
+
+    @media @desktop-lg-min {
+        margin-left: -@space-large;
+        margin-right: -@space-large;
+    }
+
+    @media @desktop {
+        margin-left: -@space-normal;
+        margin-right: -@space-normal;
+    }
+}
+
+.tui-col {
+    .generate-sme-columns(12, @space-normal);
+    .generate-columns(md, 12, @space-normal);
+
+    &_stretch {
+        display: flex;
+    }
+
+    .tui-row_adaptive & {
+        @media @desktop-lg-min {
+            .generate-columns(lg, 12, @space-large);
+        }
+
+        @media @desktop {
+            .generate-columns(md, 12, @space-normal);
+        }
+
+        @media @tablet {
+            .generate-columns(sm, 12, @space-small);
+        }
+
+        @media @tablet-s {
+            .generate-columns(s, 12, @space-small);
+        }
+
+        @media @mobile {
+            .generate-columns(xs, 12, @space-small);
+        }
+    }
+
+    .tui-row_temporary & {
+        .generate-sme-columns(12, @space-normal);
+    }
+
+    @media @desktop-lg-min {
+        .generate-sme-columns(12, @space-large);
+    }
+}
+
+.tui-col-offset {
+    .generate-sme-offset-columns(12);
+
+    @media @mobile-interval {
+        .generate-offset-columns(xs, 12);
+    }
+
+    @media @tablet-interval {
+        .generate-offset-columns(sm, 12);
+        .generate-offset-columns(s, 12);
+    }
+
+    @media @desktop-interval {
+        .generate-offset-columns(md, 12);
+    }
+
+    @media @desktop-lg-min {
+        .generate-offset-columns(lg, 12);
+    }
+}

package/styles/markup/tui-table.less

@@ -29,8 +29,8 @@
     }
 
     &__th {
-        font: var(--tui-font-text-s);
         .text-overflow();
+        font: var(--tui-font-text-s);
         padding: 0.5rem 1rem;
         vertical-align: middle;
         height: 2.5rem;
@@ -127,7 +127,7 @@
     &__sort-icon {
         .center-top();
         left: 100%;
-        margin-left: @space / 2;
+        margin-left: (@space / 2);
         width: 1rem;
         height: 1rem;
         flex-shrink: 0;

package/styles/mixins/mixins.less

@@ -64,12 +64,16 @@
         & when (@mode = default) {
             -webkit-text-fill-color: var(--tui-text-01) !important;
             border-color: var(--tui-autofill);
+            // TODO: research if it can be used in rem units
+            /* stylelint-disable-next-line */
             -webkit-box-shadow: 0 0 0 1000px var(--tui-autofill) inset !important; // to overlay native background
         }
 
         & when (@mode = dark) {
             -webkit-text-fill-color: var(--tui-text-01-night) !important;
             border-color: var(--tui-autofill-night);
+            // TODO: research if it can be used in rem units
+            /* stylelint-disable-next-line */
             -webkit-box-shadow: 0 0 0 1000px var(--tui-autofill-night) inset !important;
         }
     }
@@ -77,7 +81,6 @@
 
 .clearinput(@mode: default) {
     .autofill(@mode);
-
     padding: 0;
     border: 0;
     border-radius: inherit;
@@ -115,6 +118,8 @@
             height: 1rem;
             border-radius: 6.25rem;
             background-clip: padding-box;
+            // TODO: research if it can be used in rem units
+            /* stylelint-disable-next-line */
             border: 6px solid transparent;
         }
 
@@ -276,7 +281,7 @@
 }
 
 /* stylelint-disable selector-max-specificity */
-.text-overflow-with-fade(@color: rgba(255,255,255,1), @transparentColor: rgba(255,255,255,0), @width: 1.875rem) {
+.text-overflow-with-fade(@color: var(--tui-base-01), @transparentColor: transparent, @width: 1.875rem) {
     position: relative;
     overflow: hidden;
 
@@ -357,6 +362,7 @@
 
 // hide an element visually without hiding it from screen readers
 .sr-only() {
+    position: absolute;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
     height: 1px;
@@ -364,5 +370,4 @@
     margin: -1px;
     overflow: hidden;
     padding: 0;
-    position: absolute;
 }

package/styles/mixins/picker.less

@@ -1,7 +1,7 @@
 .picker(@itemSize) {
     :host {
-        font: var(--tui-font-text-m);
         display: block;
+        font: var(--tui-font-text-m);
     }
 
     .t-row {