@taiga-ui/styles 4.70.0 → 5.0.0-rc.3

package/markup/tui-container.less

@@ -1,64 +0,0 @@
-// width - conscious choice
-/* stylelint-disable order/order */
-.tui-container {
-    margin-inline-end: auto;
-    margin-inline-start: auto;
-
-    &.tui-container_adaptive {
-        @media @tui-desktop-lg-min {
-            inline-size: 69rem;
-        }
-
-        @media @tui-desktop {
-            inline-size: 51.5rem;
-        }
-
-        @media @tui-mobile {
-            inline-size: 100%;
-            padding: 0 1rem;
-            box-sizing: border-box;
-        }
-    }
-
-    @media @tui-desktop-lg-min {
-        inline-size: 69rem;
-    }
-
-    @media @tui-desktop {
-        inline-size: 51.5rem;
-        padding: 0 3rem;
-    }
-
-    &_menu {
-        @media @tui-desktop-lg-min {
-            inline-size: 69rem;
-        }
-
-        @media @tui-desktop-interval {
-            inline-size: 51.5rem;
-        }
-
-        @media @tui-mobile {
-            inline-size: auto;
-            padding: 0 1rem;
-            box-sizing: border-box;
-        }
-    }
-
-    &_fullwidth {
-        inline-size: auto;
-        padding: 0 1.5rem;
-
-        @media @tui-mobile {
-            padding: 0 1rem;
-            box-sizing: border-box;
-        }
-    }
-
-    &_fixed {
-        @media @tui-desktop {
-            inline-size: 69rem;
-        }
-    }
-}
-/* stylelint-enable order/order */

package/markup/tui-form.less

@@ -1,145 +0,0 @@
-@fields-space: 1.25rem;
-@fields-space-mobile: 1rem;
-@fields-space-large: 2rem;
-@fields-space-large-mobile: 1.5rem;
-
-.tui-form {
-    /* stylelint-disable */
-    &__header {
-        font: var(--tui-font-heading-5);
-        margin-block-start: @fields-space-large;
-        margin-block-end: @fields-space;
-
-        @media @tui-mobile {
-            font: var(--tui-font-text-l);
-            font-weight: bold;
-            margin-block-end: @fields-space-mobile;
-        }
-
-        &_margin-top_none, // TODO: drop in v5
-        &_margin-block-start_none {
-            margin-block-start: 0;
-        }
-
-        &_margin-bottom_none, // TODO: drop in v5
-        &_margin-block-end_none {
-            margin-block-end: 0;
-        }
-
-        &_margin-bottom_small, // TODO: drop in v5
-        &_margin-block-end_small {
-            margin-block-end: @fields-space - 0.25rem;
-
-            @media @tui-mobile {
-                margin-block-end: @fields-space-mobile - 0.25rem;
-            }
-        }
-    }
-    /* stylelint-enable */
-
-    &__row {
-        margin-block-start: @fields-space;
-
-        &:first-child {
-            margin-block-start: 0;
-        }
-
-        &_multi-fields {
-            display: flex;
-
-            @media @tui-mobile {
-                flex-wrap: wrap;
-            }
-        }
-
-        &_half-width {
-            inline-size: ~'calc(50% - (@{fields-space} / 2))';
-
-            @media @tui-mobile {
-                inline-size: 100%;
-            }
-        }
-
-        &_checkboxes {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        @media @tui-mobile {
-            margin-block-start: @fields-space-mobile;
-        }
-    }
-
-    &__multi-field {
-        flex: 1 1 0;
-        min-inline-size: 0;
-        margin-inline-start: @fields-space;
-
-        &:first-child {
-            margin-inline-start: 0;
-        }
-
-        @media @tui-mobile {
-            flex-basis: 100%;
-            margin-block-start: @fields-space-mobile;
-            margin-inline-start: 0;
-
-            &:first-child {
-                margin-block-start: 0;
-            }
-        }
-    }
-
-    &__field-note {
-        font: var(--tui-font-text-s);
-        margin-block-start: 0.25rem;
-        color: var(--tui-text-secondary);
-    }
-
-    &__field-checkbox {
-        margin-block-start: 0.5rem;
-    }
-
-    &__checkbox {
-        flex: ~'1 1 calc(50% - 0.625rem)';
-
-        &:nth-child(even) {
-            margin-inline-start: 1.25rem;
-        }
-
-        &:nth-child(n + 3) {
-            margin-block-start: 1rem;
-        }
-    }
-
-    &__buttons {
-        display: flex;
-        margin-block-start: @fields-space-large;
-
-        &_align_end {
-            justify-content: flex-end;
-        }
-
-        &_align_center {
-            justify-content: center;
-        }
-
-        @media @tui-mobile {
-            flex-direction: column;
-            margin-block-start: @fields-space-large-mobile;
-        }
-    }
-
-    &__button {
-        margin-inline-start: 0.75rem;
-
-        &:first-child {
-            margin-inline-start: 0;
-        }
-
-        @media @tui-mobile {
-            margin-block-start: 0.5rem;
-            margin-inline-start: 0;
-        }
-    }
-}

package/markup/tui-island.less

@@ -1,200 +0,0 @@
-@padding: 1rem;
-@padding-large: 1.25rem;
-
-.tui-island {
-    position: relative;
-    display: block;
-    border-radius: var(--tui-radius-xl);
-    background-color: var(--tui-background-base);
-    overflow-wrap: break-word;
-    text-decoration: none;
-    color: var(--tui-text-primary);
-    outline: none;
-    box-sizing: content-box;
-
-    &:not(&_hoverable)::before {
-        .fullsize();
-
-        content: '';
-        box-sizing: border-box;
-        border: 1px solid var(--tui-border-normal);
-        border-radius: inherit;
-        pointer-events: none;
-    }
-
-    &:focus,
-    &:hover:focus {
-        &::before {
-            border-color: var(--tui-border-focus);
-        }
-    }
-
-    &_hoverable {
-        .transition();
-
-        background: var(--tui-background-elevation-2);
-        box-shadow: var(--tui-shadow-small);
-        cursor: pointer;
-        transition-property: transform, box-shadow;
-        will-change: transform, box-shadow;
-
-        &:hover {
-            box-shadow: var(--tui-shadow-small-hover);
-            transform: translateY(-0.25rem);
-        }
-    }
-
-    &_transparent {
-        background-color: transparent;
-    }
-
-    &_size_s {
-        --tui-radius-xl: calc(4 * var(--tui-radius-l) / 3);
-
-        font: var(--tui-font-text-s);
-        padding: @padding;
-    }
-
-    &_size_m {
-        --tui-radius-xl: calc(5 * var(--tui-radius-l) / 3);
-
-        font: var(--tui-font-text-m);
-        padding: @padding;
-    }
-
-    &_size_l {
-        font: var(--tui-font-text-m);
-        padding: @padding-large;
-    }
-
-    &_text-align_left {
-        text-align: start;
-    }
-
-    &_text-align_center {
-        text-align: center;
-    }
-
-    &_text-align_right {
-        text-align: end;
-    }
-
-    &__content {
-        display: flex;
-        justify-content: space-between;
-
-        .tui-island_text-align_center & {
-            display: block;
-        }
-
-        & > * {
-            min-inline-size: 0;
-        }
-    }
-
-    &__category {
-        font-size: 0.6875rem;
-        line-height: 1rem;
-        text-transform: uppercase;
-        letter-spacing: 0.075em;
-        margin: 0 0 0.5rem;
-        color: var(--tui-text-secondary);
-
-        .tui-island_size_l & {
-            margin: 0 0 0.75rem;
-        }
-    }
-
-    &__title {
-        font: var(--tui-font-text-m);
-        margin: 0 0 0.5rem;
-
-        .tui-island_size_m & {
-            font: var(--tui-font-heading-6);
-            margin: 0 0 0.75rem;
-        }
-
-        .tui-island_size_l & {
-            font: var(--tui-font-heading-6);
-        }
-    }
-
-    &__paragraph {
-        margin: 0;
-        color: var(--tui-text-secondary);
-
-        &_link.tui-island__paragraph {
-            margin-block-start: 1rem;
-
-            .tui-island_size_l & {
-                margin: 1rem 0 0;
-            }
-        }
-
-        &_button.tui-island__paragraph {
-            margin-block-start: 1.25rem;
-
-            .tui-island_size_l & {
-                margin: 1.25rem 0 0;
-            }
-        }
-    }
-
-    &__figure {
-        display: flex;
-        justify-content: center;
-        order: 1;
-        flex-shrink: 0;
-        margin: 0 0 0 1rem;
-
-        .tui-island_size_l & {
-            margin-inline-start: 2.25rem;
-        }
-
-        .tui-island_text-align_center & {
-            margin: 0 0 0.75rem;
-        }
-    }
-
-    &__carousel-controls {
-        display: flex;
-        padding-block-end: 1rem;
-        margin-block-end: 1rem;
-        border-block-end: 1px solid var(--tui-border-normal);
-        white-space: nowrap;
-    }
-
-    &__carousel-pages {
-        margin-inline-start: auto;
-        color: var(--tui-text-secondary);
-    }
-
-    &__carousel-button {
-        margin-inline-end: 0.5rem;
-    }
-
-    .tui-island &__footer-button {
-        display: block;
-        max-inline-size: unset;
-        inline-size: ~'calc(100% + 1.875rem);'; // margin compensation
-        margin: @padding calc(-1rem + 1px) calc(-1rem + 1px); // 1px is compensations of border
-        border-block-start: 1px solid var(--tui-border-normal);
-        border-radius: 0 0 var(--tui-radius-xl) var(--tui-radius-xl);
-    }
-
-    .tui-island_size_l &__footer-button {
-        inline-size: ~'calc(100% + 2.375rem);'; // margin compensation
-        margin: @padding-large calc(-1.25rem + 1px) calc(-1.25rem + 1px); // 1px is compensations of border
-    }
-
-    &__marker {
-        &:first-child:not(:only-child) {
-            margin-inline-end: 1.25rem;
-        }
-
-        &:not(:first-child),
-        &:only-child {
-            margin-inline-start: 1.25rem;
-        }
-    }
-}

package/markup/tui-list.less

@@ -1,136 +0,0 @@
-.tui-list {
-    font: var(--tui-font-text-m);
-    line-height: 1.5rem;
-    list-style-type: none;
-    color: var(--tui-text-primary);
-
-    &_large {
-        font: var(--tui-font-text-l);
-        line-height: 1.75rem;
-    }
-
-    &_small,
-    &_extra-small {
-        font: var(--tui-font-text-s);
-        line-height: 1.25rem;
-    }
-
-    &_nested {
-        margin: 0.75rem 0 0.75rem 1.25rem;
-        color: var(--tui-text-secondary);
-
-        .tui-list_large & {
-            margin-inline-start: 0.75rem;
-        }
-
-        .tui-list_small & {
-            margin-block-start: 0.5rem;
-            margin-block-end: 0.5rem;
-        }
-    }
-
-    &_ordered {
-        counter-reset: counter;
-    }
-
-    &__item {
-        position: relative;
-        padding-inline-start: 1.5rem;
-        overflow-wrap: break-word;
-        margin-block-start: 0.75rem;
-
-        &:first-child {
-            margin-block-start: 0;
-        }
-
-        &::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0.5rem;
-            inline-size: 0.5rem;
-            block-size: 0.5rem;
-            border-radius: 100%;
-            background-color: var(--tui-background-accent-1);
-
-            .tui-list_large > & {
-                top: 0.625rem;
-            }
-
-            .tui-list_small > & {
-                top: 0.375rem;
-            }
-        }
-
-        .tui-list_extra-small > & {
-            margin-block-start: 0.5rem;
-        }
-
-        .tui-list_linear & {
-            padding-inline-start: 1.75rem;
-
-            &::before {
-                content: '\2014';
-                left: 0;
-                top: auto;
-                inline-size: auto;
-                block-size: auto;
-                background-color: transparent;
-            }
-        }
-
-        .tui-list_ordered & {
-            padding-inline-start: 1.25rem;
-
-            &::before {
-                content: counter(counter) '.';
-                left: 0;
-                top: auto;
-                counter-increment: counter;
-                inline-size: auto;
-                block-size: auto;
-                color: var(--tui-text-tertiary);
-                background-color: transparent;
-            }
-        }
-
-        .tui-list_triangle > & {
-            padding-inline-start: 1.75rem;
-
-            &::before {
-                content: '\25E4'; // represent symbol '◤'
-                left: 0;
-                top: 1px;
-                inline-size: auto;
-                block-size: auto;
-                background-color: transparent;
-                color: var(--tui-text-tertiary);
-                font-size: 0.75rem;
-            }
-        }
-    }
-
-    &__item-title {
-        font: var(--tui-font-heading-5);
-        margin: 0;
-
-        .tui-list_small & {
-            line-height: 1.25rem;
-            font-weight: bold;
-        }
-    }
-
-    &__description {
-        margin: 0.5rem 0 0;
-        color: var(--tui-text-secondary);
-
-        .tui-list_small & {
-            margin-block-start: 0.25rem;
-        }
-
-        .tui-list_large & {
-            line-height: 1.75rem;
-            margin-block-start: 0.75rem;
-        }
-    }
-}

package/markup/tui-mobile-only.less

@@ -1,5 +0,0 @@
-@media not @tui-mobile {
-    .tui-mobile-only {
-        display: none !important;
-    }
-}

package/markup/tui-required.less

@@ -1,13 +0,0 @@
-.tui-required {
-    &::after {
-        content: '*';
-    }
-
-    &_float::after {
-        position: absolute;
-    }
-
-    &_spacing::after {
-        content: '\0000a0*';
-    }
-}

package/markup/tui-row.less

@@ -1,139 +0,0 @@
-@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} {
-        inline-size: (@i * 100% / @n);
-        padding-inline-start: @padding;
-        padding-inline-end: @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-inline-start: (@i * 100% / @n);
-    }
-
-    .generate-offset-columns(@infix, @n, (@i + 1));
-}
-
-.generate-sme-columns(@n, @padding, @i: 1) when (@i =< @n) {
-    &_@{i} {
-        inline-size: (@i * 100% / @n);
-        padding-inline-start: @padding;
-        padding-inline-end: @padding;
-        box-sizing: border-box;
-    }
-
-    .generate-sme-columns(@n, @padding, (@i + 1));
-}
-
-.generate-sme-offset-columns(@n, @i: 1) when (@i =< @n) {
-    &_@{i} {
-        margin-inline-start: (@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 @tui-desktop-lg-min {
-            margin-inline-start: -@space-large;
-            margin-inline-end: -@space-large;
-        }
-
-        @media @tui-desktop {
-            margin-inline-start: -@space-normal;
-            margin-inline-end: -@space-normal;
-        }
-
-        @media @tui-mobile {
-            margin-inline-start: -@space-small;
-            margin-inline-end: -@space-small;
-        }
-    }
-
-    &_temporary.tui-row {
-        margin-inline-start: -@space-normal;
-        margin-inline-end: -@space-normal;
-    }
-
-    @media @tui-desktop-lg-min {
-        margin-inline-start: -@space-large;
-        margin-inline-end: -@space-large;
-    }
-
-    @media @tui-desktop {
-        margin-inline-start: -@space-normal;
-        margin-inline-end: -@space-normal;
-    }
-}
-
-.tui-col {
-    .generate-sme-columns(12, @space-normal);
-    .generate-columns(md, 12, @space-normal);
-
-    &_stretch {
-        display: flex;
-    }
-
-    .tui-row_adaptive & {
-        @media @tui-desktop-lg-min {
-            .generate-columns(lg, 12, @space-large);
-        }
-
-        @media @tui-desktop {
-            .generate-columns(md, 12, @space-normal);
-        }
-
-        @media @tui-mobile {
-            .generate-columns(xs, 12, @space-small);
-        }
-    }
-
-    .tui-row_temporary & {
-        .generate-sme-columns(12, @space-normal);
-    }
-
-    @media @tui-desktop-lg-min {
-        .generate-sme-columns(12, @space-large);
-    }
-}
-
-.tui-col-offset {
-    .generate-sme-offset-columns(12);
-
-    @media @tui-mobile-interval {
-        .generate-offset-columns(xs, 12);
-    }
-
-    @media @tui-desktop {
-        .generate-offset-columns(md, 12);
-    }
-
-    @media @tui-desktop-lg-min {
-        .generate-offset-columns(lg, 12);
-    }
-}