app/assets/stylesheets/layout/subnavigation.scss
.subnavigation {
display: flex;
flex-direction: column;
@include breakpoint(medium) {
@include background-with-text-contrast($subnavigation, subnavigation);
flex-direction: row;
padding-bottom: 0;
> :first-child {
flex-grow: 1;
}
}
ul {
list-style-type: none;
margin: 0;
li {
@include breakpoint(medium) {
display: inline-block;
margin-right: rem-calc(20);
}
}
}
a {
color: inherit;
display: inline-block;
padding-bottom: calc(#{$line-height} / 2);
padding-top: calc(#{$line-height} / 2);
position: relative;
text-align: left;
@include breakpoint(medium) {
display: block;
font-weight: bold;
&:hover {
@include anchor-color;
}
&.is-active {
@include brand-color;
border-bottom: 2px solid;
margin-bottom: 1px;
}
}
&:focus {
z-index: 1;
}
}
.input-group {
padding-top: calc(#{$line-height} / 4);
@include breakpoint(medium) {
margin-bottom: 0;
}
}
.input-group-field {
margin-bottom: 0 !important;
}
.input-group-button {
line-height: $line-height * 1.5;
padding-bottom: 0;
button {
@include background-with-text-contrast($border);
border: 1px solid #ccc;
border-left: 0;
height: $line-height * 1.5;
line-height: $line-height * 1.5;
padding-top: 0;
}
}
input {
height: $line-height * 1.5 !important;
margin-bottom: 0;
margin-right: 0;
width: 100%;
}
}