Files
the-example-app-nodejs/assets/stylesheets/global/main-navigation.css
2017-11-07 17:33:32 +01:00

41 lines
728 B
CSS

@block main-navigation {
& ul {
display: flex;
list-style: none;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
@media (--breakpoint-desktop) {
justify-content: flex-end;
}
& li {
margin: 0;
& + li {
margin-left: calc(var(--spacing) / 4);
}
& a {
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 0.7em 1em;
color: var(--color-text-grey);
border-radius: var(--border-radius);
&.active,
&:hover {
background: var(--color-bg-grey);
}
&.active {
color: var(--color-text-default);
}
}
}
}
}