@taiga-ui/legacy 5.0.0 → 5.1.0-canary.71f34cd

package/styles/markup/tui-island.less

@@ -0,0 +1,200 @@
+@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-typography-body-s);
+        padding: @padding;
+    }
+
+    &_size_m {
+        --tui-radius-xl: calc(5 * var(--tui-radius-l) / 3);
+
+        font: var(--tui-typography-body-m);
+        padding: @padding;
+    }
+
+    &_size_l {
+        font: var(--tui-typography-body-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-typography-body-m);
+        margin: 0 0 0.5rem;
+
+        .tui-island_size_m & {
+            font: var(--tui-typography-heading-h6);
+            margin: 0 0 0.75rem;
+        }
+
+        .tui-island_size_l & {
+            font: var(--tui-typography-heading-h6);
+        }
+    }
+
+    &__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/styles/markup/tui-list.less

@@ -0,0 +1,136 @@
+.tui-list {
+    font: var(--tui-typography-body-m);
+    line-height: 1.5rem;
+    list-style-type: none;
+    color: var(--tui-text-primary);
+
+    &_large {
+        font: var(--tui-typography-body-l);
+        line-height: 1.75rem;
+    }
+
+    &_small,
+    &_extra-small {
+        font: var(--tui-typography-body-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;
+            inset-inline-start: 0;
+            inset-block-start: 0.5rem;
+            inline-size: 0.5rem;
+            block-size: 0.5rem;
+            border-radius: 100%;
+            background-color: var(--tui-background-accent-1);
+
+            .tui-list_large > & {
+                inset-block-start: 0.625rem;
+            }
+
+            .tui-list_small > & {
+                inset-block-start: 0.375rem;
+            }
+        }
+
+        .tui-list_extra-small > & {
+            margin-block-start: 0.5rem;
+        }
+
+        .tui-list_linear & {
+            padding-inline-start: 1.75rem;
+
+            &::before {
+                content: '\2014';
+                inset-inline-start: 0;
+                inset-block-start: auto;
+                inline-size: auto;
+                block-size: auto;
+                background-color: transparent;
+            }
+        }
+
+        .tui-list_ordered & {
+            padding-inline-start: 1.25rem;
+
+            &::before {
+                content: counter(counter) '.';
+                inset-inline-start: 0;
+                inset-block-start: 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 '◤'
+                inset-inline-start: 0;
+                inset-block-start: 1px;
+                inline-size: auto;
+                block-size: auto;
+                background-color: transparent;
+                color: var(--tui-text-tertiary);
+                font-size: 0.75rem;
+            }
+        }
+    }
+
+    &__item-title {
+        font: var(--tui-typography-heading-h5);
+        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/styles/markup/tui-mobile-only.less

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

package/styles/markup/tui-required.less

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

package/styles/markup/tui-row.less

@@ -0,0 +1,137 @@
+@space-small: 0.5rem;
+@space-normal: 1.25rem;
+@space-large: 1.5rem;
+
+.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));
+}
+
+.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);
+    }
+}

package/styles/markup/tui-skeleton.less

@@ -0,0 +1,43 @@
+.tui-skeleton {
+    position: relative;
+    color: transparent !important;
+    background: transparent !important;
+    pointer-events: none;
+    user-select: none;
+
+    &::after {
+        .fullsize();
+
+        content: '';
+        background-color: var(--tui-background-neutral-2);
+        animation: tuiSkeletonVibe ease-in-out 1s infinite alternate;
+        border-radius: var(--tui-skeleton-radius, 0);
+    }
+
+    &_light::after {
+        background-color: fade(#fff, 24%);
+    }
+
+    &_rounded::after {
+        border-radius: inherit;
+    }
+
+    &_short::after {
+        inline-size: 40%;
+    }
+
+    &_center::after {
+        .center-left();
+
+        inline-size: 40%;
+    }
+
+    &_text::before {
+        content: '\a0';
+    }
+
+    & * {
+        opacity: 0;
+        visibility: hidden;
+    }
+}

package/styles/markup/tui-space.less

@@ -0,0 +1,52 @@
+@sizes: 16;
+
+.generate-space(@direction, @i: 0) when (@i =< @sizes) {
+    .generate-space(@direction, @i + 1);
+
+    &_@{direction}-@{i}&_@{direction}-@{i} {
+        & when (@direction = all) {
+            margin: 0.25rem * @i;
+        }
+
+        & when (@direction = top) {
+            margin-block-start: 0.25rem * @i;
+        }
+
+        & when (@direction = bottom) {
+            margin-block-end: 0.25rem * @i;
+        }
+
+        & when (@direction = vertical) {
+            margin-block-start: 0.25rem * @i;
+            margin-block-end: 0.25rem * @i;
+        }
+
+        & when (@direction = left) {
+            margin-inline-start: 0.25rem * @i;
+        }
+
+        & when (@direction = right) {
+            margin-inline-end: 0.25rem * @i;
+        }
+
+        & when (@direction = horizontal) {
+            margin-inline-end: 0.25rem * @i;
+            margin-inline-start: 0.25rem * @i;
+        }
+    }
+}
+
+.tui-space {
+    .generate-space(all);
+    .generate-space(top);
+    .generate-space(bottom);
+    .generate-space(vertical);
+    .generate-space(left);
+    .generate-space(right);
+    .generate-space(horizontal);
+
+    &_auto {
+        margin-inline-start: auto;
+        margin-inline-end: auto;
+    }
+}