@taiga-ui/core 2.20.0 → 2.24.0

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

@@ -0,0 +1,141 @@
+@fields-space: @space * 5;
+@fields-space-mobile: @space * 4;
+@fields-space-large: @space * 8;
+@fields-space-large-mobile: @space * 6;
+
+.tui-form {
+    &__header {
+        margin-top: @fields-space-large;
+
+        &_margin-top_none {
+            margin-top: 0;
+        }
+
+        &_margin-bottom_none {
+            margin-bottom: 0;
+        }
+
+        &_margin-bottom_small {
+            @media @mobile {
+                margin-bottom: @fields-space-mobile - @space;
+            }
+
+            @media @tablet-min {
+                margin-bottom: @fields-space - @space;
+            }
+        }
+
+        @media @mobile {
+            font: var(--tui-font-text-l);
+            font-weight: bold;
+            margin-bottom: @fields-space-mobile;
+        }
+
+        @media @tablet-min {
+            font: var(--tui-font-heading-5);
+            margin-bottom: @fields-space;
+        }
+    }
+
+    &__row {
+        margin-top: @fields-space;
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &_multi-fields {
+            display: flex;
+
+            @media @mobile {
+                flex-wrap: wrap;
+            }
+        }
+
+        &_half-width {
+            width: ~'calc(50% - @{fields-space} / 2)';
+
+            @media @mobile {
+                width: 100%;
+            }
+        }
+
+        &_checkboxes {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        @media @mobile {
+            margin-top: @fields-space-mobile;
+        }
+    }
+
+    &__multi-field {
+        flex: 1 1 0;
+        min-width: 0;
+        margin-left: @fields-space;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        @media @mobile {
+            flex-basis: 100%;
+            margin-top: @fields-space-mobile;
+            margin-left: 0;
+
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+
+    &__field-note {
+        font: var(--tui-font-text-s);
+        margin-top: @space;
+        color: var(--tui-text-02);
+    }
+
+    &__field-checkbox {
+        margin-top: @space * 2;
+    }
+
+    &__checkbox {
+        flex: ~'1 1 calc(50% - 0.625rem)';
+
+        &:nth-child(even) {
+            margin-left: 1.25rem;
+        }
+
+        &:nth-child(n + 3) {
+            margin-top: 1rem;
+        }
+    }
+
+    &__buttons {
+        display: flex;
+        margin-top: @fields-space-large;
+
+        &_align_end {
+            justify-content: flex-end;
+        }
+
+        @media @mobile {
+            flex-direction: column;
+            margin-top: @fields-space-large-mobile;
+        }
+    }
+
+    &__button {
+        margin-left: @space * 3;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        @media @mobile {
+            margin-top: @space * 2;
+            margin-left: 0;
+        }
+    }
+}

package/styles/markup/tui-form.less

@@ -7,17 +7,6 @@
     &__header {
         margin-top: @fields-space-large;
 
-        @media @mobile-m {
-            font: var(--tui-font-text-l);
-            font-weight: bold;
-            margin-bottom: @fields-space-mobile;
-        }
-
-        @media @desktop-s-min {
-            font: var(--tui-font-heading-5);
-            margin-bottom: @fields-space;
-        }
-
         &_margin-top_none {
             margin-top: 0;
         }
@@ -35,6 +24,17 @@
                 margin-bottom: @fields-space - @space;
             }
         }
+
+        @media @mobile-m {
+            font: var(--tui-font-text-l);
+            font-weight: bold;
+            margin-bottom: @fields-space-mobile;
+        }
+
+        @media @desktop-s-min {
+            font: var(--tui-font-heading-5);
+            margin-bottom: @fields-space;
+        }
     }
 
     &__row {
@@ -53,7 +53,7 @@
         }
 
         &_half-width {
-            width: ~'calc(50% - @{fields-space} / 2)';
+            width: ~'calc(50% - (@{fields-space} / 2))';
 
             @media @mobile-m {
                 width: 100%;

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-mobile-only.less

@@ -1,4 +1,4 @@
-@media @desktop-s-min {
+@media not @mobile-m {
     .tui-mobile-only {
         display: none !important;
     }

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;