parent
b6c7a8ec83
commit
a8f6185f12
2 changed files with 38 additions and 1 deletions
|
@ -43,7 +43,7 @@ function ChannelSelector(props: Props) {
|
|||
<MenuButton className="">
|
||||
<ChannelListItem uri={selectedChannelUrl} isSelected />
|
||||
</MenuButton>
|
||||
<MenuList className="menu__list">
|
||||
<MenuList className="menu__list channel__list">
|
||||
{channels &&
|
||||
channels.map(channel => (
|
||||
<MenuItem
|
||||
|
|
|
@ -180,6 +180,43 @@ $metadata-z-index: 1;
|
|||
margin-left: var(--spacing-xsmall);
|
||||
}
|
||||
|
||||
.menu__list.channel__list {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-left: 0;
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
|
||||
[role='menuitem'] {
|
||||
&[data-selected] {
|
||||
background: transparent;
|
||||
.channel__list-item {
|
||||
background-color: var(--color-card-background-highlighted);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.channel__list-item {
|
||||
border-top: 1px solid var(--color-border);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.channel__list-item {
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.channel__list-item {
|
||||
padding-right: calc(var(--spacing-xlarge) + var(--spacing-small) * 2);
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel__list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
Loading…
Reference in a new issue