topbar styles

This commit is contained in:
Andrew Croce 2018-07-09 14:34:26 -04:00
parent 775e162a8c
commit dda740fc2f
2 changed files with 71 additions and 20 deletions

View File

@ -1,20 +0,0 @@
.usa-header {
background-color: $color-white;
}
.usa-navbar {
height: 5rem;
width: 5%;
}
.usa-nav {
padding-top: 1rem;
padding-left: 0;
}
.usa-nav-primary {
li:last-child {
padding-left: 3rem;
}
}

View File

@ -0,0 +1,71 @@
.topbar {
background-color: $color-white;
height: $topbar-height;
border-bottom: 1px solid $color-black;
.topbar__navigation {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-end;
> .topbar__link {
@include h5;
color: $color-primary;
display: inline-block;
height: $topbar-height;
line-height: $topbar-height;
padding: 0 ($gap * 2);
text-decoration: none;
> span {
display: inline-block;
height: $topbar-height;
line-height: $topbar-height;
}
&.topbar__link--primary {
margin-right: auto;
> span {
@include nav-border;
}
&:hover {
color: $color-white;
background-color: $color-primary-darkest;
}
}
&.topbar__link--secondary {
font-weight: normal;
> span {
@include nav-border;
border-bottom-width: 0;
}
&:hover {
> span {
@include nav-border;
}
}
}
}
}
}
// .usa-navbar {
// height: 5rem;
// width: 5%;
// }
// .usa-nav {
// padding-top: 1rem;
// padding-left: 0;
// }
// .usa-nav-primary {
// li:last-child {
// padding-left: 3rem;
// }
// }