react-toolbox/docs/app/components/appbar/style.scss

49 lines
972 B
SCSS

@import "../globals";
@import "./config";
.appbar {
z-index: $z-index-higher;
display: flex;
min-height: $appbar-height;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-shadow: $appbar-shadow;
}
.logo {
width: $appbar-logo-size;
height: $appbar-logo-size;
fill: $color-primary-contrast;
}
.navigation {
flex-grow: 1;
text-align: right;
> ul {
list-style: none;
> li {
display: inline-block;
> a {
@include typo-menu;
position: relative;
display: inline-block;
padding: 0 1.5 * $unit;
margin-right: $unit;
line-height: $appbar-height;
color: $color-primary-contrast;
&.active:after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: .3 * $unit;
content: '';
background-color: $color-accent;
}
}
}
}
}