react-toolbox/components/navigation/style.scss

43 lines
952 B
SCSS

@import "../base";
@import "./config";
.horizontal {
padding-top: $navigation-space;
padding-bottom: $navigation-space;
> .link, > .button {
display: inline-block;
margin-right: $navigation-space;
font-size: $font-size-normal;
font-weight: $font-weight-normal;
color: $navigation-color;
> small {
padding: 0 $navigation-space;
margin-left: $navigation-space;
font-weight: $font-weight-bold;
color: $navigation-color;
background-color: $navigation-background;
border-radius: $navigation-space;
}
}
}
.vertical {
padding-top: $navigation-space;
padding-bottom: $navigation-space;
> .link, > .button {
display: block;
padding: 0 $navigation-space;
line-height: $unit;
transition-property: box-shadow, opacity;
&.active {
box-shadow: inset 10 * $unit 0 $navigation-background;
}
> small {
float: right;
opacity: .5;
}
}
}