chore: Styles fixes for suffix in textarea chat (#36911)

This commit is contained in:
Pawan Kumar 2024-10-16 17:35:10 +05:30 committed by GitHub
parent b50ae99e61
commit 85371bed71
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 3 deletions

View File

@ -53,7 +53,7 @@
* SUFFIX and PREFIX
* ----------------------------------------------------------------------------
*/
.inputGroup [data-input-suffix] button {
.inputGroup :is([data-input-suffix], [data-input-prefix]) button {
border-radius: calc(
var(--border-radius-elevation-3) - var(--inner-spacing-1)
);
@ -63,6 +63,10 @@
padding-left: var(--sizing-8);
}
.inputGroup:has(> [data-input-prefix]) .input[data-size="large"] {
padding-left: var(--sizing-12);
}
.inputGroup:has(> [data-input-prefix]) .input[data-size="small"] {
padding-left: var(--sizing-6);
}
@ -76,6 +80,10 @@
padding-right: var(--sizing-8);
}
.inputGroup:has(> [data-input-suffix]) .input[data-size="large"] {
padding-right: var(--sizing-12);
}
.inputGroup:has(> [data-input-suffix]) .input[data-size="small"] {
padding-right: var(--sizing-6);
}
@ -85,7 +93,7 @@
position: absolute;
}
/* Note: the following calculations are done so that icon button isn chat input is centered vertically */
/* Note: the following calculations are done so that icon button in chat input is centered vertically */
.inputGroup:has(.input[rows="1"]) [data-input-suffix] {
--icon-size: calc(
var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end) +
@ -97,6 +105,17 @@
right: var(--icon-offset);
}
.inputGroup:has(.input[rows="1"]) [data-input-prefix] {
--icon-size: calc(
var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end) +
var(--inner-spacing-3) * 2
);
--icon-offset: calc((var(--input-height) - var(--icon-size)) / 2);
bottom: var(--icon-offset);
left: var(--icon-offset);
}
.inputGroup :is([data-input-suffix], [data-input-prefix]) {
display: flex;
justify-content: center;

View File

@ -75,7 +75,7 @@
}
[data-component="p"] {
margin-bottom: var(--inner-spacing-4);
margin-bottom: var(--inner-spacing-3);
}
/* Lists */