chore: Styles fixes for suffix in textarea chat (#36911)
This commit is contained in:
parent
b50ae99e61
commit
85371bed71
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
|
||||
[data-component="p"] {
|
||||
margin-bottom: var(--inner-spacing-4);
|
||||
margin-bottom: var(--inner-spacing-3);
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user