open-vault/ui/app/styles/core/navbar.scss
Jordan Reimer 5163bf2853
HCP Link Status (#16959)
* adds LinkStatus component to NavHeader to display banner with HCP link status

* adds changelog entry

* adds period to connected status message

* updates hcp link status to current cluster polling to automatically update state
2022-09-07 10:21:23 -06:00

290 lines
5.1 KiB
SCSS

.navbar {
left: 0;
position: fixed;
right: 0;
top: 0;
@include from($mobile) {
display: block;
}
}
.navbar-status {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: $size-7;
font-weight: $font-weight-semibold;
&.connected {
background-color: $ui-gray-800;
color: #c2c5cb;
a {
color: #c2c5cb;
}
}
&.warning {
background-color: #fcf6ea;
color: #975b06;
a {
color: #975b06;
}
}
}
.navbar-actions {
background-color: $black;
display: flex;
height: $header-height;
justify-content: flex-start;
padding: $spacing-xs $spacing-s $spacing-xs 0;
}
.navbar-brand {
background: $vault-gray;
border-radius: 0 $radius-large $radius-large 0;
margin-right: $spacing-s;
min-height: auto;
position: relative;
z-index: 203;
.navbar-item {
background-color: transparent;
padding: $spacing-xs $spacing-l;
&:hover,
.is-active {
background-color: transparent;
}
}
}
.navbar-drawer-toggle {
font-size: $size-6;
color: $vault-gray;
cursor: pointer;
font-weight: $font-weight-semibold;
margin-left: -$spacing-s;
padding: $spacing-xs $spacing-xxs;
background: none;
border: none;
.navbar-drawer & {
position: absolute;
top: $spacing-xs;
right: $spacing-xxs;
}
}
.navbar-drawer-overlay {
height: 100vh;
left: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
transition: background-color $speed, opacity $speed;
will-change: background-color, opacity;
z-index: -1;
&.is-active {
background-color: rgba($black, 0.25);
pointer-events: all;
@include from($mobile) {
background-color: transparent;
pointer-events: none;
}
}
}
.navbar-sections,
.navbar-sections li,
.navbar-drawer-scroll,
.navbar-drawer-scroll > * {
@include from($mobile) {
align-items: center;
display: flex;
}
}
.navbar-sections {
a {
color: $grey-light;
display: block;
font-weight: $font-weight-semibold;
line-height: 1.3;
padding: $spacing-xs $spacing-m;
text-decoration: none;
transition: background-color $speed, color $speed;
will-change: background-color, color;
@include from($mobile) {
border-radius: $radius;
display: inline-block;
padding: $spacing-xxs $spacing-s;
}
&.is-active {
background-color: $vault-gray-700;
color: $white;
}
&:hover {
color: $white;
}
}
}
.navbar-end {
margin-left: auto;
}
.navbar-item {
padding: $spacing-xs;
}
.navbar-separator {
background-color: $ui-gray-700;
height: 1px;
margin: $spacing-xs 0;
width: 100%;
@include from($mobile) {
height: $spacing-l;
margin: 0 $spacing-s;
width: 1px;
}
}
.navbar-drawer {
flex: 1 1 auto;
@include until($mobile) {
background-color: $ui-gray-900;
display: flex;
flex-direction: column;
height: 100vh;
left: 0;
padding: 4rem 0 $spacing-m;
position: fixed;
top: 0;
transform: translateX(-100%);
transition: box-shadow $speed, transform $speed-slow;
width: $drawer-width;
will-change: transform, box-shadow;
z-index: 201;
}
&.is-active {
@include until($mobile) {
box-shadow: 5px 0 10px rgba($black, 0.36);
transform: translateX(0);
}
}
.navbar-item .button {
color: $grey-light;
display: flex;
font-size: 1rem;
height: auto;
justify-content: flex-start;
text-align: left;
width: 100%;
@include from($mobile) {
display: inline-flex;
height: $spacing-l;
width: auto;
}
&.popup-open,
&.ember-basic-dropdown-trigger--below {
color: $white;
.is-status-chevron {
transform: rotate(0deg);
@include from($mobile) {
transform: rotate(180deg);
}
}
}
.is-status-chevron {
transform: rotate(270deg);
@include from($mobile) {
transform: rotate(0deg);
}
}
}
.button .icon,
.button .icon:first-child:not(:last-child) {
flex: 0;
margin: 0 $spacing-xs 0 0;
@include from($mobile) {
margin: -$spacing-xxs;
margin-right: 0;
}
}
.status-menu-label {
flex: 1 1 auto;
line-height: 1;
}
.nav-console-button .status-menu-label,
.nav-user-button .status-menu-label {
flex: 1 1 auto;
@include from($mobile) {
display: none;
}
}
}
.nav-user-button .icon {
position: relative;
}
.nav-user-button.may-expire .icon:first-of-type::after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 6px;
width: 6px;
border-radius: 50%;
background: $yellow;
}
.navbar-drawer-scroll {
overflow: auto;
height: 100%;
-webkit-overflow-scrolling: touch;
&::before {
background-image: linear-gradient(to bottom, $ui-gray-900, rgba($ui-gray-900, 0));
content: '';
height: $spacing-xs;
left: 0;
position: absolute;
right: 0;
top: $header-height;
z-index: 1;
@include from($mobile) {
display: none;
}
}
}
.navbar-drawer .ember-basic-dropdown-content {
@include until($mobile) {
position: relative;
}
}