2019-08-31 20:51:14 -07:00

166 lines
3.0 KiB
SCSS

$item-spacing: 10px;
$navbar-transition-speed: $banner-animation-speed;
/**
* Override Bootstrap navigation class, .navbar, ruleset
*/
.navbar {
height: $application-navbar-static-height;
transition: top $navbar-transition-speed ease;
margin: 0;
border: 0;
z-index: z('nav');
&-inverse {
/**
* Overrides the styling for navbar
*/
background-color: $brand-color;
border-color: $brand-color;
}
.navbar-nav {
> .active {
/**
* Overrides the navbar styles on anchor elements
*/
> a {
@include on-event(true) {
background-color: inherit;
}
}
}
}
/// Offset is meant to accomodate for the animation that slides everything in the app-view down for the
/// sake of the banner alerts
&.navbar-top-offset {
top: $banner-alerts-height;
}
.navbar-collapse {
display: flex !important; // in order to override bootstrap !important
.navbar-left {
float: none !important; // in order to override bootstrap !important
flex-grow: 1;
display: flex;
align-items: center;
> * {
flex-grow: 1;
}
}
.navbar-right {
float: none !important; // in order to override bootstrap !important
display: flex;
align-items: center;
}
}
}
.navbar-inverse {
.navbar {
&-brand {
display: flex;
align-items: center;
height: $application-navbar-static-height;
color: white;
&:hover {
color: get-color(gray3);
}
}
&-brand-text {
margin-left: item-spacing(2);
}
}
}
/**
* Beta insignia for navbar logo
*/
.beta-badge {
font-weight: fw(normal, 400);
letter-spacing: 5px;
}
/**
* Allow bootstrap dropdown items to be rendered when the mouse hovers over
* the .dropdown trigger
*/
.dropdown {
@include respond-to('large') {
&:hover {
> .dropdown-menu {
display: block;
}
}
}
}
/**
* Styles the non primary action bar for an entity
*/
.secondary-actions {
display: flex;
justify-content: flex-start;
align-items: center;
&__action + &__action {
margin-left: $item-spacing;
}
}
/**
* Styles the action bar on a tab component
*/
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-width: 1px 0 0;
background-color: #f8f8f8;
z-index: z(dropdown);
max-height: 50px;
&__content {
white-space: nowrap;
vertical-align: top;
padding: item-spacing(1);
&__error-messages {
display: inline-flex;
align-items: center;
color: get-color(red5);
margin-left: item-spacing(2);
padding-right: item-spacing(2);
}
}
&__item + &__item {
margin-left: $item-spacing;
}
}
/**
* Styles a container list of navigation items
*/
.tabbed-navigation-list {
white-space: nowrap;
&--tab {
border-radius: 0;
}
}
/**
* Adds styles for navigation bar avatar image
*/
.navbar-avatar-image {
&#{&} {
@include round-image(item-spacing(6));
}
}