mirror of
https://github.com/datahub-project/datahub.git
synced 2025-08-01 13:58:01 +00:00
166 lines
3.0 KiB
SCSS
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));
|
|
}
|
|
}
|