@taiga-ui/styles 4.71.1 → 5.0.0-canary.2da416d

package/mixins/browsers.less

@@ -0,0 +1,23 @@
+.firefox-only(@ruleset) {
+    @supports (-moz-appearance: none) {
+        @ruleset();
+    }
+}
+
+.safari-only(@ruleset) {
+    @supports (-webkit-hyphens: none) {
+        @ruleset();
+    }
+}
+
+.ios-only(@ruleset) {
+    @supports (-webkit-touch-callout: none) {
+        @ruleset();
+    }
+}
+
+.chrome-only(@ruleset) {
+    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
+        @ruleset();
+    }
+}

package/mixins/browsers.scss

@@ -0,0 +1,23 @@
+@mixin firefox-only {
+    @supports (-moz-appearance: none) {
+        @content;
+    }
+}
+
+@mixin safari-only {
+    @supports (-webkit-hyphens: none) {
+        @content;
+    }
+}
+
+@mixin ios-only {
+    @supports (-webkit-touch-callout: none) {
+        @content;
+    }
+}
+
+@mixin chrome-only {
+    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
+        @content;
+    }
+}

package/mixins/date-picker.less

@@ -0,0 +1,152 @@
+@import 'miscellaneous.less';
+
+.date-picker() {
+    .t-row {
+        display: flex;
+        justify-content: flex-start;
+        font: var(--tui-typography-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/mixins/date-picker.scss

@@ -0,0 +1,152 @@
+@import 'miscellaneous';
+
+@mixin date-picker {
+    .t-row {
+        display: flex;
+        justify-content: flex-start;
+        font: var(--tui-typography-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 {
+            @include 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/mixins/miscellaneous.less

@@ -0,0 +1,168 @@
+@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/mixins/miscellaneous.scss

@@ -0,0 +1,162 @@
+@import 'browsers';
+
+@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: inherit;
+    line-height: inherit;
+    text-decoration: none;
+}
+
+@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);
+}