pico/scss/components/_nav.scss

92 lines
1.4 KiB
SCSS
Raw Normal View History

2019-11-27 15:31:49 +07:00
/**
* Nav
*/
2021-07-02 16:54:41 +07:00
// Horizontal Nav
2019-11-27 15:31:49 +07:00
nav,
nav ul {
display: flex;
}
nav {
justify-content: space-between;
ol,
2019-11-27 15:31:49 +07:00
ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
&:first-of-type {
2021-08-18 12:52:59 +02:00
margin-left: calc(var(--spacing) * -0.5);
2019-11-27 15:31:49 +07:00
}
&:last-of-type {
2021-08-18 12:52:59 +02:00
margin-right: calc(var(--spacing) * -0.5);
2019-11-27 15:31:49 +07:00
}
}
li {
display: inline-block;
margin: 0;
padding: var(--spacing) calc(var(--spacing) * 0.5);
2019-11-27 15:31:49 +07:00
// HACK: Input & Button inside Nav
> *,
> input:not([type="checkbox"]):not([type="radio"]) {
margin-bottom: 0;
}
}
a {
display: block;
2021-08-18 12:52:59 +02:00
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing) calc(var(--spacing) * 0.5);
2021-07-02 16:54:41 +07:00
border-radius: var(--border-radius);
text-decoration: none;
2020-09-29 08:38:35 +07:00
&:hover,
&:active,
&:focus {
2021-07-02 16:54:41 +07:00
text-decoration: none;
}
2019-11-27 15:31:49 +07:00
}
&[role="breadcrumb"] {
align-items: center;
justify-content: left;
2022-01-25 21:23:41 +01:00
font-size: calc(var(--font-size) * 1.1);
& a {
padding-right: 1rem;
text-decoration: none;
&::after {
content: " / ";
color: var(--color);
2022-01-25 21:23:41 +01:00
font-size: calc(var(--font-size) * 1.4);
}
}
}
2019-11-27 15:31:49 +07:00
}
// Vertical Nav
aside {
nav,
ol,
2019-11-27 15:31:49 +07:00
ul,
li {
display: block;
}
li {
padding: calc(var(--spacing) * 0.5);
2019-11-27 15:31:49 +07:00
a {
2021-07-02 16:54:41 +07:00
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) * 0.5);
2019-11-27 15:31:49 +07:00
}
}
}