63 lines
1.4 KiB
SCSS
63 lines
1.4 KiB
SCSS
.dropdown {
|
|
> label.item {
|
|
display: grid;
|
|
grid-template-columns: 1fr min-content;
|
|
align-items: center;
|
|
|
|
> ion-icon {
|
|
align-self: center;
|
|
transition-duration: 0.25s;
|
|
}
|
|
}
|
|
|
|
> ul {
|
|
display: none;
|
|
border-bottom-left-radius: var(--border-radius-small);
|
|
border-bottom-right-radius: var(--border-radius-small);
|
|
background-color: var(--background-1);
|
|
|
|
// Remove default padding and style applied to ul for bullets.
|
|
padding: 0 var(--spacing-small);
|
|
list-style: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.dropdown {
|
|
> label.item > ion-icon {
|
|
margin-right: var(--padding-mobile);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Use a toggle for menu entries on mobile and intermediary devices.
|
|
@media (max-width: 1023px) {
|
|
.dropdown {
|
|
> input:checked + label {
|
|
color: var(--highlight-hover);
|
|
|
|
+ ul {
|
|
display: grid;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Use a hover state for menu entries on large screens.
|
|
@media (min-width: 1024px) {
|
|
.dropdown:hover {
|
|
> label.item {
|
|
transform: var(--transform-scale-x);
|
|
|
|
> ion-icon {
|
|
rotate: 90deg;
|
|
transition-duration: 0.25s;
|
|
}
|
|
}
|
|
|
|
> ul {
|
|
display: grid;
|
|
}
|
|
}
|
|
}
|