55 lines
1.3 KiB
SCSS
55 lines
1.3 KiB
SCSS
nav.pane .quick_links {
|
|
grid-area: quick_links;
|
|
|
|
--item-padding: 0.25rem;
|
|
|
|
justify-content: space-between;
|
|
|
|
a {
|
|
background-color: var(--background-2);
|
|
|
|
transition: var(--transition-fade);
|
|
|
|
ion-icon {
|
|
width: var(--item-size);
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
transition: var(--transition-cut);
|
|
transform: var(--transform-scale-x) var(--transform-scale-y);
|
|
}
|
|
|
|
.phantom {
|
|
width: calc(var(--item-size) + calc(var(--item-padding) * 2));
|
|
|
|
// Fake hiding the element.
|
|
//
|
|
// Due to how flexboxes function, settings `display: none`
|
|
// will result in the box just scaling as if the element
|
|
// never existed.
|
|
//
|
|
// phantom needs to sit beside a element in hierarchy,
|
|
// otherwise phantom will inherit from <a> like this:
|
|
//
|
|
// .pane_nav > .quick_links > a > .phantom
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
nav.pane .quick_links {
|
|
margin-bottom: var(--spacing-small);
|
|
|
|
--item-padding: var(--padding-mobile);
|
|
|
|
> a {
|
|
background-color: var(--background-1);
|
|
}
|
|
|
|
> .phantom {
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
}
|