app/assets/stylesheets/navigation.scss
ul.nav-links {
@extend .callout-transparent;
padding: 0 15px 0 15px;
list-style-type: none;
li {
display: inline-block;
}
li:not(:first-child) {
margin-left: 60px;
}
a {
@extend .btn;
border-radius: 6px;
font-weight: bold;
background-color: $turquoise;
&:hover {
background-color: darken($turquoise, 20%);
}
box-shadow: 2px 2px 8px $black;
// Custom colors.
&.alert {
background-color: $red;
}
}
}
a.button {
border-radius: 10px;
}
.nav-buttons {
@extend .d-flex, .justify-content-between;
}
ul.nav-button-links {
padding-inline-start: 0px !important;
&, ul {
list-style-type: none;
}
&, ul, a {
margin: 0;
}
ul {
padding-inline-start: 0px !important;
@include media-breakpoint-up(md) {
float: right;
}
}
li {
@include media-breakpoint-up(md) {
display: inline-block;
}
margin-bottom: 20px;
}
& > li {
margin-right: 20px;
}
& > ul > li {
@include media-breakpoint-up(md) {
margin-left: 20px;
}
}
}