atst/styles/components/_topbar.scss

68 lines
1.2 KiB
SCSS

.topbar {
background-color: $color-blue-darkest;
border-bottom: 1px solid $color-black;
height: $topbar-height;
position: fixed;
top: $usa-banner-height;
z-index: 10;
width: 100%;
&__navigation {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
max-width: 1180px;
a {
color: $color-white;
}
}
&__link {
display: inline-flex;
align-items: center;
height: $topbar-height;
padding: 0 ($gap * 2);
text-decoration: none;
&-label {
font-size: $h5-font-size;
font-weight: $font-semibold;
text-decoration: none;
}
&-icon {
margin: 0 $gap 0 0;
@include icon-color($color-white);
}
.icon--logout {
margin: 0 0 0 $gap;
}
&--home {
padding: 0 ($gap * 2);
.topbar__link-label {
font-size: $base-font-size;
font-weight: $font-bold;
text-transform: uppercase;
}
}
&:hover {
background-color: $color-primary-darker;
color: $color-white;
}
}
&__context {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: stretch;
justify-content: flex-end;
}
}