@taiga-ui/core 5.0.0-rc.2 → 5.0.0-rc.4

package/styles/mixins/date-picker.less

@@ -1,152 +0,0 @@
-@import 'mixins.less';
-
-.date-picker() {
-    .t-row {
-        display: flex;
-        justify-content: flex-start;
-        font: var(--tui-font-body-m);
-
-        &:first-child {
-            justify-content: flex-end;
-        }
-
-        &:last-child {
-            justify-content: flex-start;
-        }
-    }
-
-    .t-cell {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        line-height: 2rem;
-        isolation: isolate;
-        cursor: pointer;
-        overflow: hidden;
-        border: 0.125rem solid transparent;
-        box-sizing: border-box;
-        mask: linear-gradient(
-            transparent calc(50% - 1rem),
-            #000 calc(50% - 1rem),
-            #000 calc(50% + 1rem),
-            transparent calc(50% + 1rem)
-        );
-
-        &:first-child {
-            border-inline-start-color: transparent !important;
-        }
-
-        &:last-child {
-            border-inline-end-color: transparent !important;
-        }
-
-        &::before,
-        &::after {
-            .fullsize(absolute, inset);
-
-            content: '';
-            z-index: -1;
-            border-radius: var(--tui-radius-m);
-        }
-
-        &::after {
-            mask:
-                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 32"><path d="M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z"></path></svg>')
-                    right/0.75rem 100% no-repeat,
-                linear-gradient(#000, #000) left/calc(100% - 0.7rem) 100% no-repeat;
-        }
-
-        &[data-range]::before {
-            background: var(--tui-background-neutral-1);
-        }
-
-        :host._picking &[data-range]::before {
-            background: var(--tui-background-neutral-1-hover);
-        }
-
-        &[data-range='middle'] {
-            border-color: var(--tui-background-neutral-1);
-
-            :host._picking & {
-                border-color: var(--tui-background-neutral-1-hover);
-            }
-
-            &:not(:first-child)::before {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-
-            &:not(:last-child)::before {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-        }
-
-        &[data-range='start'] {
-            border-inline-end-color: var(--tui-background-neutral-1);
-            color: var(--tui-text-primary-on-accent-1);
-
-            :host._picking & {
-                border-inline-end-color: var(--tui-background-neutral-1-hover);
-            }
-
-            &:not(:last-child)::before {
-                right: -1rem;
-            }
-
-            &::after {
-                background: var(--tui-background-accent-1);
-            }
-        }
-
-        &[data-range='end'] {
-            border-inline-start-color: var(--tui-background-neutral-1);
-            color: var(--tui-text-primary-on-accent-1);
-
-            :host._picking & {
-                border-inline-start-color: var(--tui-background-neutral-1-hover);
-            }
-
-            &:not(:first-child)::before {
-                left: -1rem;
-            }
-
-            &::after {
-                background: var(--tui-background-accent-1);
-                transform: scale(-1, 1);
-            }
-        }
-
-        &[data-range='active'] {
-            color: var(--tui-text-primary-on-accent-1);
-
-            &::after {
-                background: var(--tui-background-accent-1);
-                mask: none;
-            }
-        }
-
-        &_disabled {
-            opacity: var(--tui-disabled-opacity);
-            pointer-events: none;
-        }
-
-        &_today {
-            text-decoration: underline;
-            text-underline-offset: 0.25rem;
-        }
-
-        @media @tui-mouse {
-            &:hover:not([data-range='start']):not([data-range='end'])::before {
-                background: var(--tui-background-neutral-1-hover);
-            }
-
-            &[data-range='start']:hover::after,
-            &[data-range='end']:hover::after,
-            &[data-range='active']:hover::after {
-                background: var(--tui-background-accent-1-hover);
-            }
-        }
-    }
-}

package/styles/mixins/mixins.less

@@ -1,168 +0,0 @@
-@import 'browsers.less';
-
-.interactive(@ruleset) {
-    &:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
-        @ruleset();
-    }
-}
-
-// centering with translate
-.center-left() {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 0);
-}
-
-.center-top() {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-}
-
-.center-all() {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-//.fullsize
-// @deprecated TODO remove in 5.0 in favor of inset: 0
-.fullsize(@position: absolute, @mode: height) {
-    position: @position;
-    top: 0;
-    left: 0;
-
-    & when (@mode = height) {
-        inline-size: 100%;
-        block-size: 100%;
-    }
-
-    & when (@mode = inset) {
-        bottom: 0;
-        right: 0;
-    }
-}
-
-.button-clear() {
-    appearance: none;
-    padding: 0;
-    border: 0;
-    background: none;
-    font: inherit;
-    line-height: inherit;
-    text-decoration: none;
-}
-
-.button-base() {
-    .button-clear();
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    white-space: nowrap;
-    overflow: hidden;
-    vertical-align: middle;
-    max-inline-size: 100%;
-    // StackBlitz changes "0rem" to "0" breaking calc
-    gap: calc(var(--t-gap, ~'0rem') - 2 * var(--t-margin, 0rem));
-
-    > img,
-    > tui-icon,
-    > [tuiAvatar],
-    > tui-badge,
-    > [tuiBadge],
-    > [tuiRadio],
-    > [tuiSwitch],
-    > [tuiCheckbox],
-    &[tuiIcons]::before,
-    &[tuiIcons]::after {
-        margin: var(--t-margin);
-    }
-}
-
-// TODO remove @speed in 5.0
-// transition
-.transition(@param: all, @speed: var(--tui-duration, 300ms)) {
-    transition-property: @param;
-    transition-duration: @speed;
-    transition-timing-function: ease-in-out;
-}
-
-// gradient
-.gradient(@start-color, @end-color, @angle: 45deg) {
-    background-image: linear-gradient(@angle, @start-color 0%, @end-color 100%);
-}
-
-// typical properties for text overflow with ellipsis
-.text-overflow(@type: nowrap) {
-    white-space: @type;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.scrollbar-hidden() {
-    /* stylelint-disable*/
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    /* stylelint-enable*/
-
-    &::-webkit-scrollbar,
-    &::-webkit-scrollbar-thumb {
-        display: none;
-    }
-}
-
-// hide an element visually without hiding it from screen readers
-.sr-only() {
-    position: absolute;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    block-size: 1px;
-    inline-size: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-}
-
-// prevent scrolling to focused element on IOS
-.tui-prevent-ios-scroll() {
-    .ios-only({
-        &:focus {
-            animation: tuiPreventIOSScroll 0.001s;
-        }
-    });
-
-    @keyframes tuiPreventIOSScroll {
-        0% {
-            opacity: 0;
-        }
-
-        100% {
-            opacity: 1;
-        }
-    }
-}
-
-.text-truncate() {
-    .text-overflow();
-
-    flex: 1;
-    min-inline-size: 0;
-    max-inline-size: max-content;
-}
-
-.tui-line-clamp(@count: 3) {
-    display: -webkit-box;
-    -webkit-box-orient: block-axis;
-    -webkit-line-clamp: @count;
-    line-clamp: @count;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.tui-mask(@x, @y, @r) {
-    mask: radial-gradient(circle at @x @y, transparent @r, black @r);
-}

package/styles/mixins/mixins.scss

@@ -1,161 +0,0 @@
-@import 'browsers.scss';
-
-@mixin interactive {
-    &:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
-        @content;
-    }
-}
-
-// centering with translate
-@mixin center-left() {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 0);
-}
-
-@mixin center-top() {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-}
-
-@mixin center-all() {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-//.fullsize
-@mixin fullsize($position: absolute, $mode: height) {
-    position: $position;
-    top: 0;
-    left: 0;
-
-    @if ($mode == height) {
-        width: 100%;
-        height: 100%;
-    }
-
-    @if ($mode == inset) {
-        bottom: 0;
-        right: 0;
-    }
-}
-
-@mixin button-clear() {
-    appearance: none;
-    padding: 0;
-    border: 0;
-    background: none;
-    font-size: inherit;
-    line-height: inherit;
-}
-
-@mixin button-base() {
-    @include button-clear();
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    white-space: nowrap;
-    overflow: hidden;
-    vertical-align: middle;
-    max-width: 100%;
-    gap: calc(var(--t-gap) - 2 * var(--t-margin));
-
-    > img,
-    > tui-icon,
-    > [tuiAvatar],
-    > tui-badge,
-    > [tuiBadge],
-    > [tuiRadio],
-    > [tuiSwitch],
-    > [tuiCheckbox],
-    &[tuiIcons]:before,
-    &[tuiIcons]:after {
-        margin: var(--t-margin);
-    }
-}
-
-// transition
-@mixin transition($param: all, $speed: var(--tui-duration, 300ms)) {
-    transition-property: $param;
-    transition-duration: $speed;
-    transition-timing-function: ease-in-out;
-}
-
-// gradient
-@mixin gradient($start-color, $end-color, $angle: 45deg) {
-    background-image: linear-gradient($angle, $start-color 0%, $end-color 100%);
-}
-
-// typical properties for text overflow with ellipsis
-@mixin text-overflow($type: nowrap) {
-    white-space: $type;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@mixin scrollbar-hidden() {
-    /* stylelint-disable*/
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    /* stylelint-enable*/
-
-    &::-webkit-scrollbar,
-    &::-webkit-scrollbar-thumb {
-        display: none;
-    }
-}
-
-// hide an element visually without hiding it from screen readers
-@mixin sr-only() {
-    position: absolute;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-}
-
-// prevent scrolling to focused element on IOS
-@mixin tui-prevent-ios-scroll() {
-    &:focus {
-        animation: tuiPreventIOSScroll 0.001s;
-    }
-
-    @keyframes tuiPreventIOSScroll {
-        0% {
-            opacity: 0;
-        }
-
-        100% {
-            opacity: 1;
-        }
-    }
-}
-
-@mixin text-truncate() {
-    @include text-overflow();
-    flex: 1;
-    min-inline-size: 0;
-    max-inline-size: max-content;
-}
-
-@mixin tui-line-clamp($count: 3) {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: $count;
-    line-clamp: $count;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@mixin tui-mask($x, $y, $r) {
-    mask: radial-gradient(circle at $x $y, transparent $r, black $r);
-}

package/styles/mixins/picker.less

@@ -1,200 +0,0 @@
-@import 'mixins.less';
-
-// @deprecated
-.picker(@itemSize) {
-    :host {
-        display: block;
-        font: var(--tui-font-body-m);
-    }
-
-    .t-row {
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        block-size: 2.25rem;
-        isolation: isolate;
-    }
-
-    .t-item {
-        position: relative;
-        flex: 1;
-        line-height: 2rem;
-        border-radius: var(--tui-radius-m);
-
-        &::before,
-        &::after {
-            .fullsize(absolute, inset);
-
-            content: '';
-            z-index: -1;
-            border-radius: var(--tui-radius-m);
-        }
-
-        &::after {
-            border-radius: 0.5rem;
-        }
-    }
-
-    .t-cell {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        inline-size: @itemSize;
-        text-align: center;
-        outline: none;
-        cursor: pointer;
-        background-clip: content-box;
-        box-sizing: border-box;
-        border: 0.125rem solid transparent;
-
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: -1;
-            border-radius: var(--tui-radius-m);
-        }
-
-        &_today::after {
-            .center-left();
-
-            content: '';
-            bottom: 0.3125rem;
-            block-size: 0.125rem;
-            inline-size: 0.75rem;
-            border-radius: 0.375rem;
-            background: var(--tui-text-primary);
-        }
-
-        &_interval {
-            &::before {
-                background: var(--tui-background-base-alt);
-
-                :host._single & {
-                    background: var(--tui-background-neutral-1-hover);
-                }
-            }
-
-            &:not(:last-child)::before {
-                right: -0.1875rem;
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-
-            &:not([data-range='start']):not(:first-child)::before {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-
-            &:last-child:first-child::before {
-                right: 0;
-            }
-
-            &:first-child > .t-item {
-                border-top-left-radius: var(--tui-radius-m);
-                border-bottom-left-radius: var(--tui-radius-m);
-            }
-
-            &:last-child > .t-item {
-                border-top-right-radius: var(--tui-radius-m);
-                border-bottom-right-radius: var(--tui-radius-m);
-            }
-
-            & > .t-item {
-                border-radius: 0;
-            }
-        }
-
-        &[data-range] {
-            &::after {
-                background: var(--tui-text-primary-on-accent-1);
-            }
-
-            & > .t-item {
-                color: var(--tui-text-primary-on-accent-1);
-
-                &::before,
-                &::after {
-                    background: var(--tui-background-accent-1);
-                }
-            }
-
-            &:hover > .t-item::before,
-            &:hover > .t-item::after {
-                background: var(--tui-background-accent-1-hover);
-            }
-
-            &:active > .t-item::before,
-            &:active > .t-item::after {
-                background: var(--tui-background-accent-1-pressed);
-            }
-        }
-
-        &[data-range='end'] {
-            &::before {
-                background: var(--tui-background-base-alt);
-
-                :host._single & {
-                    background: var(--tui-background-neutral-1-hover);
-                }
-            }
-
-            &:not(:first-child)::before {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-        }
-
-        &[data-range='end'] > .t-item {
-            &::before {
-                left: 0.625rem;
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-
-            &::after {
-                left: -2rem;
-                right: 100%;
-                transform: translateX(1.6rem) scaleY(0.83) scaleX(0.5) rotate(45deg);
-            }
-        }
-
-        &[data-range='start'] > .t-item {
-            &::before {
-                right: 0.625rem;
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-
-            &::after {
-                left: 100%;
-                right: -2rem;
-                transform: translateX(-1.6rem) scaleY(0.83) scaleX(0.5) rotate(45deg);
-            }
-        }
-
-        &[data-range='single'] > .t-item::after {
-            display: none;
-        }
-
-        &_disabled {
-            pointer-events: none;
-
-            & > .t-item {
-                opacity: 0.36;
-            }
-        }
-
-        &:hover:not([data-range]) > .t-item {
-            background: var(--tui-background-neutral-1-hover);
-        }
-
-        &:active:not([data-range]) > .t-item {
-            background: var(--tui-background-neutral-1-pressed);
-        }
-    }
-}