diff --git a/projects/core/styles/components/textfield.less b/projects/core/styles/components/textfield.less index 0d1928b6c7e9..891c701498e1 100644 --- a/projects/core/styles/components/textfield.less +++ b/projects/core/styles/components/textfield.less @@ -4,6 +4,7 @@ tui-textfield { .transition(color); --t-height: var(--tui-height-l); + --t-padding: var(--tui-padding-l); position: relative; display: flex; @@ -12,7 +13,7 @@ tui-textfield { cursor: pointer; block-size: var(--t-height); color: var(--tui-text-tertiary); - padding: 0 var(--tui-padding-l); + padding: 0 var(--t-padding); border-radius: var(--tui-radius-l); font: var(--tui-font-text-m); box-sizing: border-box; @@ -36,8 +37,8 @@ tui-textfield { &[data-size='s'] { --t-height: var(--tui-height-s); + --t-padding: var(--tui-padding-s); - padding: 0 var(--tui-padding-s); border-radius: var(--tui-radius-m); font: var(--tui-font-text-s); @@ -72,8 +73,8 @@ tui-textfield { &[data-size='m'] { --t-height: var(--tui-height-m); + --t-padding: var(--tui-padding-m); - padding: 0 var(--tui-padding-m); border-radius: var(--tui-radius-m); font: var(--tui-font-text-s); @@ -175,11 +176,11 @@ tui-textfield { appearance: none; box-sizing: border-box; - border: none; - border-inline-start: var(--t-left, 0) solid transparent !important; - border-inline-end: calc(var(--t-right, var(--t-0, 0rem)) + var(--t-side)) solid transparent !important; border-radius: inherit; padding: inherit; + border: none; + text-indent: var(--t-left, 0); + padding-inline-end: calc(var(--t-right, var(--t-0, 0rem)) + var(--t-side) + var(--t-padding)); } .t-template { diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less index 67d14e2f8c13..eced93d5a530 100644 --- a/projects/core/styles/theme/appearance/textfield.less +++ b/projects/core/styles/theme/appearance/textfield.less @@ -40,7 +40,6 @@ &:-webkit-autofill { -webkit-text-fill-color: var(--tui-text-primary) !important; caret-color: var(--tui-text-primary) !important; - border-color: var(--tui-service-autofill-background) !important; box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important; transition: background-color 600000s 0s; diff --git a/projects/kit/components/input-phone-international/input-phone-international.style.less b/projects/kit/components/input-phone-international/input-phone-international.style.less index e2c25cf56c1d..6e48ef1a7389 100644 --- a/projects/kit/components/input-phone-international/input-phone-international.style.less +++ b/projects/kit/components/input-phone-international/input-phone-international.style.less @@ -1,6 +1,6 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; -.t-country-select { +.t-select { inline-size: 5.625rem; flex: none; @@ -16,22 +16,14 @@ .t-flag { inline-size: 1.75rem; block-size: 1.75rem; - border-radius: 50%; - - &_select { - .fullsize(absolute, inset); - - left: 0.5rem; - margin: auto; - } + border-radius: 100%; } -.t-country-item-name { - margin-inline-start: 0.75rem; - margin-inline-end: auto; +.t-name { + margin: 0 auto 0 0.75rem; } -.t-country-item-code { +.t-code { color: var(--tui-text-secondary); margin-inline-end: 0.25rem; } diff --git a/projects/kit/components/input-phone-international/input-phone-international.template.html b/projects/kit/components/input-phone-international/input-phone-international.template.html index c8dba2d0487f..22b74b61440d 100644 --- a/projects/kit/components/input-phone-international/input-phone-international.template.html +++ b/projects/kit/components/input-phone-international/input-phone-international.template.html @@ -1,5 +1,5 @@ @@ -14,7 +14,7 @@ @@ -65,8 +65,8 @@ class="t-flag" [src]="item | tuiFlag" /> - {{ names()?.[item] }} - + {{ names()?.[item] }} + {{ item | tuiGetCountryCallingCode: metadata() }} diff --git a/projects/kit/components/input-phone-international/test/input-phone-international.component.spec.ts b/projects/kit/components/input-phone-international/test/input-phone-international.component.spec.ts index 422fe4e328ca..bf65dde33847 100644 --- a/projects/kit/components/input-phone-international/test/input-phone-international.component.spec.ts +++ b/projects/kit/components/input-phone-international/test/input-phone-international.component.spec.ts @@ -216,7 +216,7 @@ describe('InputPhoneInternational', () => { function getDropdownCountryNames(): string[] { const countryNameContainers = - fixture.debugElement.queryAll(By.css('.t-country-item-name')) || []; + fixture.debugElement.queryAll(By.css('.t-name')) || []; return countryNameContainers.map((container) => container.nativeElement.textContent?.trim(), @@ -224,6 +224,6 @@ describe('InputPhoneInternational', () => { } function getCountrySelector(): DebugElement { - return fixture.debugElement.query(By.css('.t-country-select select')); + return fixture.debugElement.query(By.css('.t-select select')); } });