compose: Isolate flex-align to recipient widget.

This commit is contained in:
Karl Stolley 2025-03-12 16:07:32 -05:00 committed by Tim Abbott
parent 6f196c7ec9
commit 57ebcc67bc

View File

@ -2168,6 +2168,56 @@ body:not(.spectator-view) {
line-height: 20px;
white-space: normal;
}
&.compose_select_recipient-dropdown-list-container {
.dropdown-list .dropdown-list-item-common-styles {
/* We align items to center for the sake of the
compose_select_recipient dropdown, which has
icons not present in other dropdowns. */
align-items: center;
}
}
.dropdown-list .dropdown-list-item-common-styles {
position: relative;
display: flex;
color: var(--color-dropdown-item);
padding: 3px 10px 3px 8px;
font-weight: 400;
line-height: var(--base-line-height-unitless);
white-space: normal;
.stream-privacy-type-icon {
font-size: 0.93em;
/* We set only the width so that flexbox
can do its work to properly center,
regardless of the height. */
width: 0.93em;
padding-right: 5px;
/* Override the [data-tippy-root]
style in `tooltips.css`. */
top: 0;
}
.dropdown-list-delete {
position: absolute;
top: 0;
right: 5px;
visibility: hidden;
}
&:focus,
&:hover {
color: var(--color-dropdown-item);
text-decoration: none;
background-color: var(--background-color-active-dropdown-item);
outline: none;
.dropdown-list-delete {
visibility: visible;
}
}
}
}
.dropdown-list-container .list-item {
@ -2196,48 +2246,6 @@ body:not(.spectator-view) {
}
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles {
position: relative;
display: flex;
align-items: center;
color: var(--color-dropdown-item);
padding: 3px 10px 3px 8px;
font-weight: 400;
line-height: var(--base-line-height-unitless);
white-space: normal;
.stream-privacy-type-icon {
font-size: 0.93em;
/* We set only the width so that flexbox
can do its work to properly center,
regardless of the height. */
width: 0.93em;
padding-right: 5px;
/* Override the [data-tippy-root]
style in `tooltips.css`. */
top: 0;
}
.dropdown-list-delete {
position: absolute;
top: 0;
right: 5px;
visibility: hidden;
}
&:focus,
&:hover {
color: var(--color-dropdown-item);
text-decoration: none;
background-color: var(--background-color-active-dropdown-item);
outline: none;
.dropdown-list-delete {
visibility: visible;
}
}
}
.dropdown-list-item-common-styles .dropdown-list-bold-selected {
font-weight: 700;
}