@taiga-ui/legacy 4.66.0 → 5.0.0-rc.0

package/styles/mixins/mixins.scss

@@ -1,224 +0,0 @@
-// clearfix
-@mixin clearfix() {
-    &:after {
-        content: '';
-        display: table;
-        clear: both;
-    }
-}
-
-@mixin autofill($mode: default) {
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus {
-        caret-color: var(--tui-text-primary);
-        border-radius: inherit;
-        color: inherit !important;
-        background-color: transparent !important;
-        -webkit-text-fill-color: var(--tui-text-primary) !important;
-        border-color: var(--tui-service-autofill-background);
-        -webkit-box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important; // to overlay native background
-    }
-}
-
-@mixin clearinput($mode: default) {
-    @include autofill($mode);
-    padding: 0;
-    margin: 0;
-    border: 0;
-    border-radius: inherit;
-    background: none;
-    font-size: inherit;
-    line-height: inherit;
-    font-weight: inherit;
-    color: inherit;
-    caret-color: currentColor;
-    outline: none;
-    appearance: none;
-    word-break: keep-all;
-    -webkit-text-fill-color: currentColor; // for Safari
-}
-
-@mixin visually-hidden() {
-    position: absolute;
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    border: 0;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(0);
-}
-
-// customize native scroll
-@mixin customize-scroll() {
-    // exclude non-supporting browsers
-    @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
-        &::-webkit-scrollbar,
-        &::-webkit-scrollbar-thumb {
-            width: 1rem;
-            height: 1rem;
-            border-radius: 6.25rem;
-            background-clip: padding-box;
-            border: 2.667rem solid transparent;
-        }
-
-        &::-webkit-scrollbar {
-            background-color: transparent;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background-color: var(--tui-background-neutral-1-hover);
-        }
-
-        &::-webkit-scrollbar-thumb:hover {
-            background-color: var(--tui-background-neutral-1-pressed);
-        }
-
-        &::-webkit-scrollbar-thumb:active {
-            background-color: var(--tui-text-tertiary);
-        }
-    }
-}
-
-@mixin inset-border($direction: bottom, $mode: none) {
-    @if ($direction == bottom) {
-        box-shadow: inset 0 -1px var(--tui-border-normal);
-
-        @if ($mode == light) {
-            box-shadow: inset 0 -1px rgba(255, 255, 255, 0.24);
-        }
-
-        @if ($mode == dark) {
-            box-shadow: inset 0 -1px rgba(51, 51, 51, 0.24);
-        }
-    }
-
-    @if ($direction == top) {
-        box-shadow: inset 0 1px var(--tui-border-normal);
-
-        @if ($mode == light) {
-            box-shadow: inset 0 1px rgba(255, 255, 255, 0.24);
-        }
-
-        @if ($mode == dark) {
-            box-shadow: inset 0 1px rgba(51, 51, 51, 0.24);
-        }
-    }
-
-    @if ($direction == left) {
-        box-shadow: inset 1px 0 var(--tui-border-normal);
-
-        @if ($mode == light) {
-            box-shadow: inset 1px 0 rgba(255, 255, 255, 0.24);
-        }
-
-        @if ($mode == dark) {
-            box-shadow: inset 1px 0 rgba(51, 51, 51, 0.24);
-        }
-    }
-
-    @if ($direction == right) {
-        box-shadow: inset -1px 0 var(--tui-border-normal);
-
-        @if ($mode == light) {
-            box-shadow: inset -1px 0 rgba(255, 255, 255, 0.24);
-        }
-
-        @if ($mode == dark) {
-            box-shadow: inset -1px 0 rgba(51, 51, 51, 0.24);
-        }
-    }
-}
-
-// dashed border
-@mixin dashed-border($color: currentColor, $alignment: bottom, $spacing: 4) {
-    $size: $spacing * 1px;
-    $percentage: (100% / $spacing * 2);
-    background-image: linear-gradient(to right, $color 0%, $color $percentage, transparent $percentage);
-    background-position: 0 $alignment;
-    background-size: $size 1px;
-    background-repeat: repeat-x;
-}
-
-// typical opacity properties for icons
-@mixin opacity-icon() {
-    opacity: 0.8;
-
-    &:hover {
-        opacity: 1;
-    }
-}
-
-@mixin hoverable-with-shadow() {
-    @include transition(all);
-    cursor: pointer;
-    box-shadow: var(--tui-shadow-small);
-    transition-property: transform, box-shadow;
-    will-change: transform, box-shadow;
-
-    &:hover {
-        box-shadow: var(--tui-shadow-small-hover);
-        transform: translateY(-0.25rem);
-    }
-}
-
-@mixin text-overflow-with-fade($color: var(--tui-background-base), $transparentColor: transparent, $width: 1.875rem) {
-    position: relative;
-    overflow: hidden;
-
-    &:after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: $width;
-        height: 100%;
-        background-image: linear-gradient(to right, $transparentColor 0%, $color 80%, $color 100%);
-        pointer-events: none;
-    }
-}
-
-//spaces
-@mixin tui-space($direction, $size) {
-    @if ($direction == all) {
-        margin: 0.25rem * $size;
-    }
-
-    @if ($direction == top) {
-        margin-block-start: 0.25rem * $size;
-    }
-
-    @if ($direction == bottom) {
-        margin-block-end: 0.25rem * $size;
-    }
-
-    @if ($direction == vertical) {
-        margin-block-start: 0.25rem * $size;
-        margin-block-end: 0.25rem * $size;
-    }
-
-    @if ($direction == left) {
-        margin-inline-start: 0.25rem * $size;
-    }
-
-    @if ($direction == right) {
-        margin-inline-end: 0.25rem * $size;
-    }
-
-    @if ($direction == horizontal) {
-        margin-inline-end: 0.25rem * $size;
-        margin-inline-start: 0.25rem * $size;
-    }
-}
-
-@mixin contrast-background($background) {
-    background: $background;
-    color: contrast($background, #333, #fff);
-}
-
-@mixin blurred-background($color: #fff) {
-    background: rgba($color, 70%);
-    backdrop-filter: blur(0.4375rem);
-}

package/styles/mixins/textfield.less

@@ -1,322 +0,0 @@
-.textfield-host() {
-    position: relative;
-    display: block;
-    text-align: start;
-    border-radius: var(--tui-radius-m);
-    block-size: var(--tui-height);
-    min-block-size: var(--tui-height);
-    max-block-size: var(--tui-height);
-
-    &[data-size='s'] {
-        --tui-height: var(--tui-height-s);
-
-        font: var(--tui-font-text-s);
-    }
-
-    &[data-size='m'] {
-        --tui-height: var(--tui-height-m);
-
-        font: var(--tui-font-text-s);
-    }
-
-    &[data-size='l'] {
-        --tui-height: var(--tui-height-l);
-
-        font: var(--tui-font-text-m);
-        line-height: 1.25rem;
-    }
-
-    :host-context(*:disabled) {
-        pointer-events: none;
-    }
-}
-
-.textfield-content() {
-    display: flex;
-    block-size: 100%;
-    inline-size: 100%;
-    box-sizing: border-box;
-    align-items: center;
-    overflow: hidden;
-
-    :host[data-size='s'] & {
-        padding: 0 var(--tui-padding-s);
-    }
-
-    :host[data-size='m'] & {
-        padding: 0 var(--tui-padding-m);
-    }
-
-    :host[data-size='l'] & {
-        padding: 0 var(--tui-padding-l);
-    }
-}
-
-.textfield-input() {
-    .clearinput();
-    .fullsize();
-
-    border-style: solid;
-    border-color: transparent;
-    border-inline-start-width: var(--t-border-start, 0);
-    border-inline-end-width: var(--t-border-end, 0);
-    text-indent: var(--t-text-indent);
-    color: var(--tui-text-primary);
-    text-align: inherit;
-    box-sizing: border-box;
-    white-space: nowrap;
-    overflow: hidden;
-    text-transform: inherit;
-    resize: none;
-
-    &[inputMode='none'] {
-        caret-color: transparent;
-    }
-
-    /* stylelint-disable */
-    /* Safari autofill icons */
-    //noinspection CssInvalidPseudoSelector
-    &:-webkit-autofill,
-    &:-webkit-autofill::first-line {
-        font-size: inherit;
-        line-height: inherit;
-    }
-    /* stylelint-enable */
-
-    //noinspection ALL
-    &::-webkit-caps-lock-indicator,
-    &::-webkit-contacts-auto-fill-button,
-    &::-webkit-credit-card-auto-fill-button,
-    &::-webkit-credentials-auto-fill-button,
-    &::-webkit-strong-password-auto-fill-button {
-        .webkit-auto-fill-button-hidden();
-    }
-
-    &::placeholder {
-        color: var(--tui-text-tertiary);
-        opacity: 0;
-    }
-
-    :host._focused:not(._readonly) &::placeholder,
-    :host-context(tui-primitive-textfield._focused:not(._readonly)) &::placeholder,
-    :host-context(tui-textarea._focused:not(._readonly)) &::placeholder,
-    :host-context(tui-text-area._focused:not(._readonly)) &::placeholder {
-        opacity: 1;
-    }
-
-    :host[data-size='s'] &,
-    :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),
-    :host-context(tui-textarea[data-size='s']):not(tui-textarea),
-    :host-context(tui-text-area[data-size='s']):not(tui-text-area) {
-        padding: 0 var(--tui-padding-s);
-    }
-
-    :host[data-size='m'] &,
-    :host-context(tui-primitive-textfield[data-size='m']):not(tui-primitive-textfield),
-    :host-context(tui-textarea[data-size='m']):not(tui-textarea),
-    :host-context(tui-text-area[data-size='m']):not(tui-text-area) {
-        padding: 0 var(--tui-padding-m);
-    }
-
-    :host[data-size='l'] &,
-    :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),
-    :host-context(tui-textarea[data-size='l']):not(tui-textarea),
-    :host-context(tui-text-area[data-size='l']):not(tui-text-area) {
-        padding: 0 var(--tui-padding-l);
-    }
-
-    :host._disabled &,
-    :host-context(tui-primitive-textfield._disabled),
-    :host-context(tui-textarea._disabled),
-    :host-context(tui-text-area._disabled) {
-        // @bad TODO: research why you can reach disabled textfield with mask inside a label without that
-        pointer-events: none;
-    }
-
-    :host[data-size='l']:not(._label-outside) &,
-    :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield) {
-        padding-block-start: 1.25rem;
-    }
-
-    :host[data-size='m']:not(._label-outside) &,
-    :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield) {
-        padding-block-start: 1rem;
-    }
-
-    :host[data-size='l']:not(._label-outside) & {
-        padding-block-start: 1.25rem;
-
-        // Workaround for raising placeholder in temporary autofill
-        &:-webkit-autofill + .t-content .t-placeholder {
-            font-size: 0.8156rem;
-            transform: translateY(-0.625rem);
-        }
-    }
-
-    :host[data-size='m']:not(._label-outside) & {
-        // Workaround for raising placeholder in temporary autofill
-        &:-webkit-autofill + .t-content .t-placeholder {
-            font-size: 0.69rem;
-            transform: translateY(-0.5rem);
-        }
-    }
-
-    :host._hidden input&,
-    :host-context(tui-primitive-textfield._hidden) {
-        opacity: 0;
-        text-indent: -10em; // Hide blinking caret even in IE
-    }
-}
-
-.textfield-wrapper() {
-    flex: 1;
-    min-inline-size: 0;
-    padding-inline-end: 0.25rem;
-}
-
-.textfield-label() {
-    .transition(~'transform, font-size, color, letter-spacing');
-    .text-overflow();
-    .safari-only({
-        & {
-            will-change: unset;
-            transition-property: transform, color, letter-spacing;
-        }
-    });
-
-    display: block;
-    inline-size: 100%;
-    user-select: none;
-    font: var(--tui-font-text-s);
-    color: var(--tui-text-secondary);
-    pointer-events: none;
-    will-change: transform;
-    transform: translateY(0);
-
-    &_raised {
-        transform: translateY(-0.625rem);
-
-        :host[data-size='m'] & {
-            font: var(--tui-font-text-xs);
-            line-height: 1.25rem;
-            transform: translateY(-0.5rem);
-            letter-spacing: 0.025rem;
-        }
-
-        :host._invalid:not(._focused) &,
-        :host._invalid:not(._focused):hover & {
-            color: var(--tui-text-negative);
-        }
-    }
-
-    :host._focused &,
-    :host[data-size='m']._focused._label-outside &,
-    :host[data-size='l']._focused._label-outside & {
-        color: var(--tui-text-tertiary);
-    }
-
-    :host[data-size='l'] & {
-        font: var(--tui-font-text-m);
-        line-height: 1.25rem;
-
-        &_raised {
-            font-size: 0.8156rem;
-        }
-    }
-
-    :host[data-size='m']._focused:not(._label-outside) &,
-    :host[data-size='l']._focused:not(._label-outside) & {
-        color: var(--tui-text-primary);
-    }
-}
-
-.input-icon() {
-    position: relative;
-    display: flex;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    cursor: pointer;
-    pointer-events: none;
-}
-
-.input-icons() {
-    display: flex;
-    align-items: center;
-
-    :host[data-size='m'] & {
-        margin-inline-end: -0.125rem;
-    }
-
-    :host[data-size='s'] & {
-        margin-inline-end: -0.375rem;
-    }
-
-    :host:not([data-size='s']) & > :not(:first-child) {
-        margin-inline-start: 0.25rem;
-    }
-}
-
-.icon-button() {
-    .input-icon();
-
-    pointer-events: auto;
-
-    :host._readonly &,
-    :host._disabled & {
-        pointer-events: none;
-    }
-}
-
-.textfield() {
-    :host {
-        .textfield-host();
-    }
-
-    .t-input {
-        .textfield-input();
-    }
-
-    .t-content {
-        .textfield-content();
-    }
-
-    .t-wrapper {
-        .textfield-wrapper();
-    }
-
-    .t-placeholder {
-        .textfield-label();
-    }
-
-    .t-cleaner {
-        .icon-button();
-
-        border-width: 0.25rem;
-    }
-
-    .t-icon {
-        .input-icon();
-
-        &_left {
-            :host[data-size='s'] & {
-                margin: 0 0.125rem 0 -0.375rem;
-            }
-
-            :host[data-size='m'] & {
-                margin-inline-start: -0.125rem;
-                margin-inline-end: 0.375rem;
-            }
-
-            :host[data-size='l'] & {
-                margin-inline-end: 0.75rem;
-            }
-        }
-    }
-
-    .t-icons {
-        .input-icons();
-    }
-}