src/client/components/dropdown-selector/dropdown-selector.css
@import '../../styles/vars';
.dropdown {
right: -8px;
}
.menu {
@extend %z-depth-1;
font-family: var(--font-family-light);
min-width: 70px;
width: 70px;
background: #fff;
top: 0;
}
.toggle {
display: inline-block;
font-family: var(--font-family-regular);
font-size: 14px;
color: var(--black54);
vertical-align: top;
line-height: 24px;
padding: 0 22px 0 0;
cursor: pointer;
border: none;
background: none;
outline: none;
width: 70px;
&:focus {
box-shadow: 0 0 2px 0 var(--ltblue500);
}
}
.toggle-icon {
position: absolute;
top: 4px;
right: 4px;
color: var(--black38);
}
.item-link {
border: none;
color: var(--black38);
cursor: pointer;
padding: 4px 10px;
text-align: left;
width: 100%;
&:hover {
background-color: var(--grey100);
}
&:focus {
box-shadow: inset 0 0 2px 0 var(--ltblue500);
outline: none;
}
@nest .item-selected & {
color: var(--green500);
}
}