pico/scss/components/_nav.scss
Lucas 73237bdcd4 Improvements
- Add .contrast variant
- Separate _button-styles.scss
- Edit .secondary, mark, figcaption, hgroup, tooltips
- Docs: Add More about grids, External links icon, Second theme switcher
2019-11-30 12:43:20 +07:00

78 lines
1.1 KiB
SCSS

/**
* Nav
*/
// Inline
nav,
nav ul {
display: flex;
}
nav {
justify-content: space-between;
ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
&:first-of-type {
margin-left: -$spacing-gutter/2;
}
&:last-of-type {
margin-right: -$spacing-gutter/2;
}
}
li {
display: inline-block;
margin: 0;
padding: $spacing-gutter $spacing-gutter/2;
// HACK: Input & Button inside Nav
> *,
> input:not([type="checkbox"]):not([type="radio"]) {
margin-bottom: 0;
}
}
a {
display: block;
margin: -$spacing-gutter (-$spacing-gutter/2);
padding: $spacing-gutter $spacing-gutter/2;
border-radius: $round;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
@if $enable-classes {
&.contrast:not([role="button"]) {
box-shadow: none;
}
}
}
}
// Vertical Nav
aside {
nav,
ul,
li {
display: block;
}
li {
padding: $spacing-gutter/2;
a {
margin: -$spacing-gutter/2;
padding: $spacing-gutter/2;
}
}
}