travelynx/sass/components/_dropdown.scss

85 lines
No EOL
1.4 KiB
SCSS

.dropdown-content {
&:focus {
outline: 0;
}
@extend .z-depth-1;
background-color: $dropdown-bg-color;
margin: 0;
display: none;
min-width: 100px;
overflow-y: auto;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: 9999; // TODO: Check if this doesn't break other things
transform-origin: 0 0;
li {
&:hover, &.active {
background-color: $dropdown-hover-bg-color;
}
&:focus {
outline: none;
}
&.divider {
min-height: 0;
height: 1px;
}
& > a, & > span {
font-size: 16px;
color: $dropdown-color;
display: block;
line-height: 22px;
padding: (($dropdown-item-height - 22) / 2) 16px;
}
& > span > label {
top: 1px;
left: 0;
height: 18px;
}
// Icon alignment override
& > a > i {
height: inherit;
line-height: inherit;
float: left;
margin: 0 24px 0 0;
width: 24px;
}
clear: both;
color: $off-black;
cursor: pointer;
min-height: $dropdown-item-height;
line-height: 1.5rem;
width: 100%;
text-align: left;
}
}
body.keyboard-focused {
.dropdown-content li:focus {
background-color: darken($dropdown-hover-bg-color, 8%);
}
}
// Input field specificity bugfix
.input-field.col .dropdown-content [type="checkbox"] + label {
top: 1px;
left: 0;
height: 18px;
transform: none;
}
.dropdown-trigger {
cursor: pointer;
}