diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.style.less b/projects/addon-commerce/components/input-card-group/input-card-group.style.less index 121e6b686976..877e080df787 100644 --- a/projects/addon-commerce/components/input-card-group/input-card-group.style.less +++ b/projects/addon-commerce/components/input-card-group/input-card-group.style.less @@ -177,7 +177,7 @@ .t-icon { cursor: pointer; - border: 0.25rem solid transparent; + border-width: 0.25rem; } .t-label { diff --git a/projects/addon-doc/components/navigation/navigation.style.less b/projects/addon-doc/components/navigation/navigation.style.less index 4e6821f1ea2f..74cc50af15af 100644 --- a/projects/addon-doc/components/navigation/navigation.style.less +++ b/projects/addon-doc/components/navigation/navigation.style.less @@ -13,7 +13,7 @@ margin: 1.25rem; ::ng-deep tui-icon { - border: 0.25rem solid transparent; + border-width: 0.25rem; } } diff --git a/projects/addon-table/components/reorder/reorder.style.less b/projects/addon-table/components/reorder/reorder.style.less index c09e74158ea9..958bae4aaf39 100644 --- a/projects/addon-table/components/reorder/reorder.style.less +++ b/projects/addon-table/components/reorder/reorder.style.less @@ -46,7 +46,7 @@ .t-icon { margin-right: 0.5rem; color: var(--tui-text-tertiary); - border: 0.25rem solid transparent; + border-width: 0.25rem; } .t-button { diff --git a/projects/addon-table/components/table/th/th.style.less b/projects/addon-table/components/table/th/th.style.less index b1bc238ff22b..8b8651f79ad1 100644 --- a/projects/addon-table/components/table/th/th.style.less +++ b/projects/addon-table/components/table/th/th.style.less @@ -156,5 +156,5 @@ } .t-icon { - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/cdk/constants/used-icons.ts b/projects/cdk/constants/used-icons.ts index 5decb3c8eaac..bf844a986999 100644 --- a/projects/cdk/constants/used-icons.ts +++ b/projects/cdk/constants/used-icons.ts @@ -42,6 +42,7 @@ export const TUI_USED_ICONS = [ '@tui.circle-help', '@tui.x', '@tui.chevron-right', + '@tui.ellipsis', '@tui.chevron-left', '@tui.minus', '@tui.file', diff --git a/projects/core/tokens/common-icons.ts b/projects/core/tokens/common-icons.ts index 3ef3f6a34959..ad70bfdbff75 100644 --- a/projects/core/tokens/common-icons.ts +++ b/projects/core/tokens/common-icons.ts @@ -1,12 +1,14 @@ import type {Provider} from '@angular/core'; import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous'; +// TODO: Rename `ellipsis` to `more` in the next major version const COMMON_ICONS: TuiCommonIcons = { check: '@tui.check', close: '@tui.x', error: '@tui.circle-alert', more: '@tui.chevron-right', search: '@tui.search', + ellipsis: '@tui.ellipsis', }; export interface TuiCommonIcons { @@ -15,6 +17,7 @@ export interface TuiCommonIcons { readonly error: string; readonly more: string; readonly search: string; + readonly ellipsis: string; } export const TUI_COMMON_ICONS = tuiCreateToken(COMMON_ICONS); diff --git a/projects/demo/src/modules/components/animations/examples/4/index.less b/projects/demo/src/modules/components/animations/examples/4/index.less index ee8c313720ce..d9a27827c1b9 100644 --- a/projects/demo/src/modules/components/animations/examples/4/index.less +++ b/projects/demo/src/modules/components/animations/examples/4/index.less @@ -4,7 +4,5 @@ li { } tui-icon { - inline-size: 1.5rem; - block-size: 1.5rem; - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/2/index.html b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.html index 3403a87e8edc..cf9a0cc6ba13 100644 --- a/projects/demo/src/modules/components/breadcrumbs/examples/2/index.html +++ b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.html @@ -1,45 +1,103 @@ - - - - +

+ Truncate + + Using + .text-truncate() + mixin + +

+ + + + + +
+

+ Fade + + Combining + .text-truncate() + mixin with + + + Fade + + + directive + +

+ + + + + +
+

+ Scroll + + Putting + - {{ items[index]?.caption }} + Fade - - - - + directive on entire component + +

+ + + + + +
+

+ Collapse + + Using + itemsLimit: number + +

+ + + -

- - Max tabs - -

diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/3/index.less b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.less similarity index 55% rename from projects/demo/src/modules/components/breadcrumbs/examples/3/index.less rename to projects/demo/src/modules/components/breadcrumbs/examples/2/index.less index 059e3364d27c..32b40ec2f4d7 100644 --- a/projects/demo/src/modules/components/breadcrumbs/examples/3/index.less +++ b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.less @@ -5,11 +5,16 @@ max-inline-size: 30rem; } -[tuiLink]:last-child { - font-weight: bold; - color: var(--tui-text-primary); +hr, +h3 { + margin: 1rem 0; } .link { .text-truncate(); + + &_last { + font-weight: bold; + color: var(--tui-text-primary); + } } diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts index 2cc728ab6824..58f57baaa33a 100644 --- a/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts +++ b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts @@ -1,58 +1,37 @@ +import {NgForOf} from '@angular/common'; import {Component} from '@angular/core'; -import {FormsModule} from '@angular/forms'; +import {RouterLink} from '@angular/router'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiItem, TuiRepeatTimes} from '@taiga-ui/cdk'; -import {TuiButton, TuiDataList, TuiDropdown, TuiLink} from '@taiga-ui/core'; -import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit'; -import {TuiInputNumberModule} from '@taiga-ui/legacy'; +import {DemoRoute} from '@demo/routes'; +import {TuiItem} from '@taiga-ui/cdk'; +import {TuiHint, TuiLink, TuiTitle} from '@taiga-ui/core'; +import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider, TuiFade} from '@taiga-ui/kit'; @Component({ standalone: true, imports: [ - FormsModule, + NgForOf, + RouterLink, TuiBreadcrumbs, - TuiButton, - TuiDataList, - TuiDropdown, - TuiInputNumberModule, + TuiFade, + TuiHint, TuiItem, TuiLink, - TuiRepeatTimes, + TuiTitle, ], templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, - providers: [ - tuiBreadcrumbsOptionsProvider({ - icon: '@tui.arrow-right', - size: 'l', - }), - ], + providers: [tuiBreadcrumbsOptionsProvider({icon: '/'})], }) export default class Example { + protected readonly fade = DemoRoute.Fade; protected readonly items = [ - { - caption: 'Open Source', - link: 'https://github.com', - }, - { - caption: 'Angular', - link: 'https://github.com/topics/angular', - }, - { - caption: 'Taiga UI', - link: 'https://github.com/taiga-family/taiga-ui', - }, - { - caption: 'Components', - link: 'https://taiga-ui.dev', - }, - { - caption: 'Breadcrumbs', - link: 'https://taiga-ui.dev/navigation/breadcrumbs', - }, + 'First item', + 'Very very long second item that must overflow', + 'Third item', + 'One last super long item that is never gonna fit', ]; - - protected max = 4; } diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/3/index.html b/projects/demo/src/modules/components/breadcrumbs/examples/3/index.html deleted file mode 100644 index 876ce293abca..000000000000 --- a/projects/demo/src/modules/components/breadcrumbs/examples/3/index.html +++ /dev/null @@ -1,41 +0,0 @@ -

Truncate

- - - - - -

Fade

- - - - - -

Scroll

- - - - - diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/3/index.ts b/projects/demo/src/modules/components/breadcrumbs/examples/3/index.ts deleted file mode 100644 index 0286252a5912..000000000000 --- a/projects/demo/src/modules/components/breadcrumbs/examples/3/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {NgForOf} from '@angular/common'; -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiItem} from '@taiga-ui/cdk'; -import {TuiHint, TuiLink} from '@taiga-ui/core'; -import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider, TuiFade} from '@taiga-ui/kit'; - -@Component({ - standalone: true, - imports: [NgForOf, TuiBreadcrumbs, TuiFade, TuiHint, TuiItem, TuiLink], - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, - providers: [tuiBreadcrumbsOptionsProvider({icon: '/'})], -}) -export default class Example { - protected readonly items = [ - 'Short item', - 'Very very long item that must overflow', - 'Another item', - 'One more super long item that is never gonna fit', - ]; -} diff --git a/projects/demo/src/modules/components/breadcrumbs/index.html b/projects/demo/src/modules/components/breadcrumbs/index.html index 46327be35030..7ad89ffdc1a5 100644 --- a/projects/demo/src/modules/components/breadcrumbs/index.html +++ b/projects/demo/src/modules/components/breadcrumbs/index.html @@ -10,37 +10,47 @@ *ngFor="let example of examples; let index = index" [component]="index + 1 | tuiComponent" [content]="index + 1 | tuiExample" - [description]="example.description" - [heading]="example.name" - [id]="example.name | tuiKebab" + [heading]="example" + [id]="example | tuiKebab" /> - + - - {{ item.caption }} - + {{ item }} + - - + + Limit on visible items + + Text size - - + + diff --git a/projects/demo/src/modules/components/breadcrumbs/index.ts b/projects/demo/src/modules/components/breadcrumbs/index.ts index 518746a24b64..a8954b093ad6 100644 --- a/projects/demo/src/modules/components/breadcrumbs/index.ts +++ b/projects/demo/src/modules/components/breadcrumbs/index.ts @@ -1,10 +1,10 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {TuiItem} from '@taiga-ui/cdk'; import type {TuiSizeL} from '@taiga-ui/core'; import {TuiLink} from '@taiga-ui/core'; -import {TuiBreadcrumbs} from '@taiga-ui/kit'; +import {TUI_BREADCRUMBS_OPTIONS, TuiBreadcrumbs} from '@taiga-ui/kit'; @Component({ standalone: true, @@ -13,36 +13,21 @@ import {TuiBreadcrumbs} from '@taiga-ui/kit'; changeDetection, }) export default class Example { - protected readonly itemsVariants = [ - [ - { - caption: 'Select', - routerLink: '/tui-select', - }, - { - caption: 'MultiSelect', - routerLink: '/tui-multi-select', - }, - { - caption: 'InputTag', - routerLink: '/tui-input-tag', - }, - { - caption: 'Current', - routerLink: '/tui-breadcrumbs', - }, - ], - ]; + private readonly options = inject(TUI_BREADCRUMBS_OPTIONS); - protected items = this.itemsVariants[0]!; + protected readonly examples = ['Basic', 'Overflow']; + protected readonly items = [ + 'Item 1', + 'Item 2', + 'Item 3', + 'Item 4', + 'Item 5', + 'Item 6', + 'Item 7', + 'Item 8', + ]; protected readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l']; - - protected size: TuiSizeL = this.sizeVariants[0]!; - - protected readonly examples = [ - {name: 'Basic'}, - {name: 'More button', description: 'Plus using DI options'}, - {name: 'Overflow', description: 'Different overflow strategies'}, - ]; + protected size: TuiSizeL = this.options.size; + protected itemsLimit = this.options.itemsLimit; } diff --git a/projects/demo/src/modules/components/combo-box/index.less b/projects/demo/src/modules/components/combo-box/index.less index f9fa8b40d0bd..11546191a0eb 100644 --- a/projects/demo/src/modules/components/combo-box/index.less +++ b/projects/demo/src/modules/components/combo-box/index.less @@ -5,7 +5,5 @@ .item-template-icon { margin-right: 0.375rem; - inline-size: 1.5rem; - block-size: 1.5rem; - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/demo/src/modules/components/data-list/examples/1/index.less b/projects/demo/src/modules/components/data-list/examples/1/index.less index 09eda5badee9..5a73540302c5 100644 --- a/projects/demo/src/modules/components/data-list/examples/1/index.less +++ b/projects/demo/src/modules/components/data-list/examples/1/index.less @@ -1,5 +1,5 @@ tui-icon { block-size: 1.5rem; inline-size: 1.5rem; - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/demo/src/modules/components/input-range/examples/4/index.less b/projects/demo/src/modules/components/input-range/examples/4/index.less index d3d87e384420..98bdb063d59c 100644 --- a/projects/demo/src/modules/components/input-range/examples/4/index.less +++ b/projects/demo/src/modules/components/input-range/examples/4/index.less @@ -13,7 +13,5 @@ } tui-icon { - inline-size: 1.5rem; - block-size: 1.5rem; - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/demo/src/modules/components/legend-item/examples/2/index.less b/projects/demo/src/modules/components/legend-item/examples/2/index.less index 9b117bb0dea7..56d2b39d5d11 100644 --- a/projects/demo/src/modules/components/legend-item/examples/2/index.less +++ b/projects/demo/src/modules/components/legend-item/examples/2/index.less @@ -29,9 +29,9 @@ will-change: transform; color: var(--tui-text-secondary); pointer-events: auto; - border: 0.25rem solid transparent; inline-size: 1.5rem; block-size: 1.5rem; + border-width: 0.25rem; &:hover { color: var(--tui-text-primary); diff --git a/projects/demo/src/modules/components/range/examples/3/index.less b/projects/demo/src/modules/components/range/examples/3/index.less index 1f976b0aecbf..9172111a4d16 100644 --- a/projects/demo/src/modules/components/range/examples/3/index.less +++ b/projects/demo/src/modules/components/range/examples/3/index.less @@ -18,7 +18,5 @@ } tui-icon { - inline-size: 1.5rem; - block-size: 1.5rem; - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/demo/src/modules/components/tree/examples/3/index.less b/projects/demo/src/modules/components/tree/examples/3/index.less index e3638ba4d003..48ab3cf1bcfb 100644 --- a/projects/demo/src/modules/components/tree/examples/3/index.less +++ b/projects/demo/src/modules/components/tree/examples/3/index.less @@ -4,7 +4,5 @@ } .t-icon { - block-size: 1.5rem; - inline-size: 1.5rem; - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less index 459aff9bf84d..fac266c52119 100644 --- a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less +++ b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less @@ -3,7 +3,5 @@ } .icon { - inline-size: 1.5rem; - block-size: 1.5rem; - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index d6b3fd11ed1c..e650a2d87050 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -27,7 +27,6 @@ export const TUI_USED_ICONS = [ '@tui.box', '@tui.lock', '@tui.gift', - '@tui.arrow-right', '@tui.users', '@tui.clock', '@tui.circle-plus', diff --git a/projects/kit/components/accordion/accordion-item.style.less b/projects/kit/components/accordion/accordion-item.style.less index 6eaf31724561..ec20f88b1c25 100644 --- a/projects/kit/components/accordion/accordion-item.style.less +++ b/projects/kit/components/accordion/accordion-item.style.less @@ -127,7 +127,7 @@ .transition(color); margin-left: auto; - border: 0.25rem solid transparent; + border-width: 0.25rem; color: var(--tui-text-tertiary); :host:hover & { diff --git a/projects/kit/components/breadcrumbs/breadcrumbs.component.ts b/projects/kit/components/breadcrumbs/breadcrumbs.component.ts index d195b07675ca..b12db9ca7f5d 100644 --- a/projects/kit/components/breadcrumbs/breadcrumbs.component.ts +++ b/projects/kit/components/breadcrumbs/breadcrumbs.component.ts @@ -8,11 +8,18 @@ import { Input, TemplateRef, } from '@angular/core'; +import {toSignal} from '@angular/core/rxjs-interop'; import {EMPTY_QUERY} from '@taiga-ui/cdk/constants'; import {TuiItem} from '@taiga-ui/cdk/directives/item'; +import {TuiButton} from '@taiga-ui/core/components/button'; +import {TuiDataList} from '@taiga-ui/core/components/data-list'; import {TuiIcon} from '@taiga-ui/core/components/icon'; import {tuiLinkOptionsProvider} from '@taiga-ui/core/components/link'; +import {TuiDropdown} from '@taiga-ui/core/directives/dropdown'; import {tuiHintOptionsProvider} from '@taiga-ui/core/directives/hint'; +import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens'; +import {TuiItemsWithMore} from '@taiga-ui/kit/components/items-with-more'; +import {TUI_MORE_WORD} from '@taiga-ui/kit/tokens'; import type {TuiBreadcrumbsOptions} from './breadcrumbs.options'; import {TUI_BREADCRUMBS_OPTIONS} from './breadcrumbs.options'; @@ -20,7 +27,17 @@ import {TUI_BREADCRUMBS_OPTIONS} from './breadcrumbs.options'; @Component({ standalone: true, selector: 'tui-breadcrumbs', - imports: [AsyncPipe, NgForOf, NgIf, NgTemplateOutlet, TuiIcon], + imports: [ + AsyncPipe, + NgForOf, + NgIf, + NgTemplateOutlet, + TuiButton, + TuiDataList, + TuiDropdown, + TuiIcon, + TuiItemsWithMore, + ], templateUrl: './breadcrumbs.template.html', styleUrls: ['./breadcrumbs.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, @@ -38,7 +55,20 @@ export class TuiBreadcrumbs { EMPTY_QUERY; protected readonly options = inject(TUI_BREADCRUMBS_OPTIONS); + protected readonly icons = inject(TUI_COMMON_ICONS); + protected readonly more = toSignal(inject(TUI_MORE_WORD), {initialValue: ''}); @Input() public size: TuiBreadcrumbsOptions['size'] = this.options.size; + + @Input() + public itemsLimit = this.options.itemsLimit; + + protected get limit(): number { + return this.itemsLimit ? this.itemsLimit - 2 : Infinity; + } + + protected get offset(): number { + return this.itemsLimit === 2 ? 1 : 0; + } } diff --git a/projects/kit/components/breadcrumbs/breadcrumbs.options.ts b/projects/kit/components/breadcrumbs/breadcrumbs.options.ts index d026636735fa..5282ce365ef8 100644 --- a/projects/kit/components/breadcrumbs/breadcrumbs.options.ts +++ b/projects/kit/components/breadcrumbs/breadcrumbs.options.ts @@ -5,11 +5,13 @@ import type {TuiSizeL} from '@taiga-ui/core/types'; export interface TuiBreadcrumbsOptions { readonly icon: string; readonly size: TuiSizeL; + readonly itemsLimit: number; } export const TUI_BREADCRUMBS_DEFAULT_OPTIONS: TuiBreadcrumbsOptions = { icon: '@tui.chevron-right', size: 'm', + itemsLimit: 0, }; export const TUI_BREADCRUMBS_OPTIONS = tuiCreateToken(TUI_BREADCRUMBS_DEFAULT_OPTIONS); diff --git a/projects/kit/components/breadcrumbs/breadcrumbs.style.less b/projects/kit/components/breadcrumbs/breadcrumbs.style.less index 82ceb6dfcdee..84392eb2585d 100644 --- a/projects/kit/components/breadcrumbs/breadcrumbs.style.less +++ b/projects/kit/components/breadcrumbs/breadcrumbs.style.less @@ -1,17 +1,37 @@ :host { display: flex; align-items: center; - block-size: 2.5rem; white-space: nowrap; - font: var(--tui-font-text-s); color: var(--tui-text-secondary); + &[data-size='m'] { + font: var(--tui-font-text-s); + line-height: 1.5rem; + block-size: 1.5rem; + } + &[data-size='l'] { font: var(--tui-font-text-m); + line-height: 2.5rem; + block-size: 2.5rem; } } +.t-more { + display: flex; + align-items: center; +} + +.t-option ::ng-deep > * { + color: var(--tui-text-primary) !important; + background: transparent !important; +} + .t-icon { - margin: 0 0.25rem; - border: 0.25rem solid transparent; + margin: 0 0.5rem; + font-size: 1rem; +} + +.t-char { + margin: 0 0.375rem; } diff --git a/projects/kit/components/breadcrumbs/breadcrumbs.template.html b/projects/kit/components/breadcrumbs/breadcrumbs.template.html index b569b164efa5..e7ce8d6a177c 100644 --- a/projects/kit/components/breadcrumbs/breadcrumbs.template.html +++ b/projects/kit/components/breadcrumbs/breadcrumbs.template.html @@ -1,12 +1,75 @@ - - - - -  {{ options.icon }}  + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ options.icon }} + + + + + + + + diff --git a/projects/kit/components/files/input-files/input-files.style.less b/projects/kit/components/files/input-files/input-files.style.less index 4b9286e63480..c8e55cff6f35 100644 --- a/projects/kit/components/files/input-files/input-files.style.less +++ b/projects/kit/components/files/input-files/input-files.style.less @@ -37,6 +37,10 @@ label[tuiInputFiles] { } } +*:disabled label[tuiInputFiles] { + pointer-events: none; +} + [tuiAppearance][data-appearance='file'] { .transition(background); diff --git a/projects/kit/directives/tooltip/tooltip.style.less b/projects/kit/directives/tooltip/tooltip.style.less index d2ac9f10c260..6140826f41aa 100644 --- a/projects/kit/directives/tooltip/tooltip.style.less +++ b/projects/kit/directives/tooltip/tooltip.style.less @@ -1,5 +1,5 @@ [tuiTooltip] { - border: 0.25rem solid transparent; + border-width: 0.25rem; border-radius: 100%; cursor: pointer; pointer-events: auto; diff --git a/projects/legacy/components/arrow/arrow.style.less b/projects/legacy/components/arrow/arrow.style.less index e8ec122b41bb..8b68a1edcd18 100644 --- a/projects/legacy/components/arrow/arrow.style.less +++ b/projects/legacy/components/arrow/arrow.style.less @@ -13,5 +13,5 @@ } tui-icon { - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/legacy/components/input-copy/input-copy.style.less b/projects/legacy/components/input-copy/input-copy.style.less index 7163317e6f22..2203dc29c7fc 100644 --- a/projects/legacy/components/input-copy/input-copy.style.less +++ b/projects/legacy/components/input-copy/input-copy.style.less @@ -12,7 +12,7 @@ pointer-events: auto; &_small { - border: 0.25rem solid transparent; + border-width: 0.25rem; } } diff --git a/projects/legacy/components/input-date-range/input-date-range.style.less b/projects/legacy/components/input-date-range/input-date-range.style.less index bee1b20d2572..8352c4758fbb 100644 --- a/projects/legacy/components/input-date-range/input-date-range.style.less +++ b/projects/legacy/components/input-date-range/input-date-range.style.less @@ -24,7 +24,7 @@ pointer-events: auto; &_small { - border: 0.25rem solid transparent; + border-width: 0.25rem; } } diff --git a/projects/legacy/components/input-date-time/input-date-time.style.less b/projects/legacy/components/input-date-time/input-date-time.style.less index c8bfb7283d07..f9a0c18e9449 100644 --- a/projects/legacy/components/input-date-time/input-date-time.style.less +++ b/projects/legacy/components/input-date-time/input-date-time.style.less @@ -20,7 +20,7 @@ pointer-events: auto; &_small { - border: 0.25rem solid transparent; + border-width: 0.25rem; } } diff --git a/projects/legacy/components/input-date/input-date.style.less b/projects/legacy/components/input-date/input-date.style.less index 98892e7a3528..e1d05a1c712c 100644 --- a/projects/legacy/components/input-date/input-date.style.less +++ b/projects/legacy/components/input-date/input-date.style.less @@ -20,7 +20,7 @@ pointer-events: auto; &_small { - border: 0.25rem solid transparent; + border-width: 0.25rem; } } diff --git a/projects/legacy/components/input-password/input-password.style.less b/projects/legacy/components/input-password/input-password.style.less index dcbe73569392..fb07129dfe89 100644 --- a/projects/legacy/components/input-password/input-password.style.less +++ b/projects/legacy/components/input-password/input-password.style.less @@ -9,7 +9,7 @@ pointer-events: auto; &_small { - border: 0.25rem solid transparent; + border-width: 0.25rem; } } diff --git a/projects/legacy/components/input-time/input-time.style.less b/projects/legacy/components/input-time/input-time.style.less index b51cb6152031..a90ff9027d80 100644 --- a/projects/legacy/components/input-time/input-time.style.less +++ b/projects/legacy/components/input-time/input-time.style.less @@ -21,5 +21,5 @@ } .t-icon_small { - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/legacy/components/primitive-textfield/primitive-textfield.style.less b/projects/legacy/components/primitive-textfield/primitive-textfield.style.less index 5ce0b0a039e0..d621a7c73825 100644 --- a/projects/legacy/components/primitive-textfield/primitive-textfield.style.less +++ b/projects/legacy/components/primitive-textfield/primitive-textfield.style.less @@ -19,7 +19,7 @@ } &[data-size='s'] tui-icon { - border: 0.25rem solid transparent; + border-width: 0.25rem; } } diff --git a/projects/legacy/components/select-option/select-option.style.less b/projects/legacy/components/select-option/select-option.style.less index d81d9da8a922..8ba781e15fc5 100644 --- a/projects/legacy/components/select-option/select-option.style.less +++ b/projects/legacy/components/select-option/select-option.style.less @@ -20,7 +20,7 @@ .t-checkmark { margin-inline-start: auto; inline-size: 1.75rem; - border: 0.25rem solid transparent; + border-width: 0.25rem; border-inline-start-width: 0.5rem; :host-context(tui-data-list[data-size='s']) & { diff --git a/projects/legacy/components/textarea/textarea.style.less b/projects/legacy/components/textarea/textarea.style.less index 27699cbf2ff5..eb0dde85ec54 100644 --- a/projects/legacy/components/textarea/textarea.style.less +++ b/projects/legacy/components/textarea/textarea.style.less @@ -287,7 +287,7 @@ .icon-button(); pointer-events: auto; - border: 0.25rem solid transparent; + border-width: 0.25rem; } .t-caret { diff --git a/projects/legacy/components/tooltip/tooltip.style.less b/projects/legacy/components/tooltip/tooltip.style.less index b37b83ea3834..16464736b15d 100644 --- a/projects/legacy/components/tooltip/tooltip.style.less +++ b/projects/legacy/components/tooltip/tooltip.style.less @@ -26,5 +26,5 @@ } .t-icon { - border: 0.25rem solid transparent; + border-width: 0.25rem; } diff --git a/projects/legacy/styles/mixins/textfield.less b/projects/legacy/styles/mixins/textfield.less index 1d387afdb872..6885c6e2e65a 100644 --- a/projects/legacy/styles/mixins/textfield.less +++ b/projects/legacy/styles/mixins/textfield.less @@ -290,7 +290,7 @@ .t-cleaner { .icon-button(); - border: 0.25rem solid transparent; + border-width: 0.25rem; } .t-icon {