picocss/scss/components/_nav.scss

95 lines
1.5 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
}
&[aria-label="Breadcrumb"] {
align-items: center;
justify-content: left;
& ul li {
padding-left:0;
&:not(:last-child) {
a::after {
padding-left: 0.5rem;
content: "/";
color: var(--muted-color) !important;
}
}
}
& a[aria-current="page"] {
color: inherit !important;
}
}
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
}
}
}