diff --git a/ui/app/components/console/ui-panel.js b/ui/app/components/console/ui-panel.js index 11487462bd..ee011ac1c4 100644 --- a/ui/app/components/console/ui-panel.js +++ b/ui/app/components/console/ui-panel.js @@ -20,7 +20,7 @@ export default Component.extend({ controlGroup: service(), store: service(), - classNames: 'console-ui-panel-scroller', + classNames: 'console-ui-panel', classNameBindings: ['isFullscreen:fullscreen'], isFullscreen: false, inputValue: null, @@ -114,6 +114,9 @@ export default Component.extend({ }, actions: { + closeConsole() { + this.set('console.isOpen', false); + }, toggleFullscreen() { this.toggleProperty('isFullscreen'); }, diff --git a/ui/app/components/i-con.js b/ui/app/components/i-con.js index 78d182f10b..639094d80e 100644 --- a/ui/app/components/i-con.js +++ b/ui/app/components/i-con.js @@ -25,6 +25,12 @@ const GLYPHS_WITH_SVG_TAG = [ 'check-plain', 'check-circle-fill', 'cancel-square-outline', + 'status-indicator', + 'person', + 'console', + 'checkmark-circled-outline', + 'close-circled-outline', + 'neutral-circled-outline', ]; export default Component.extend({ diff --git a/ui/app/components/nav-header.js b/ui/app/components/nav-header.js index 15a4ae2f5e..79378b3f34 100644 --- a/ui/app/components/nav-header.js +++ b/ui/app/components/nav-header.js @@ -3,4 +3,13 @@ import Component from '@ember/component'; export default Component.extend({ 'data-test-navheader': true, tagName: 'header', + navDrawerOpen: false, + actions: { + toggleNavDrawer(isOpen) { + if (isOpen !== undefined) { + return this.set('navDrawerOpen', isOpen); + } + this.toggleProperty('navDrawerOpen'); + }, + }, }); diff --git a/ui/app/components/status-menu.js b/ui/app/components/status-menu.js index 492a302d8d..9b1e23548b 100644 --- a/ui/app/components/status-menu.js +++ b/ui/app/components/status-menu.js @@ -7,19 +7,24 @@ export default Component.extend({ currentCluster: service('current-cluster'), cluster: alias('currentCluster.cluster'), auth: service(), + store: service(), + media: service(), type: 'cluster', itemTag: null, partialName: computed('type', function() { - let type = this.get('type'); - let partial = type === 'replication-status' ? 'replication' : type; - return `partials/status/${partial}`; + return `partials/status/${this.type}`; }), glyphName: computed('type', function() { const glyphs = { - cluster: 'unlocked', - user: 'android-person', - 'replication-status': 'replication', + cluster: 'status-indicator', + user: 'person', }; - return glyphs[this.get('type')]; + return glyphs[this.type]; + }), + activeCluster: computed('auth.activeCluster', function() { + return this.get('store').peekRecord('cluster', this.get('auth.activeCluster')); + }), + currentToken: computed('auth.currentToken', function() { + return this.get('auth.currentToken'); }), }); diff --git a/ui/app/controllers/vault/cluster/settings/control-groups.js b/ui/app/controllers/vault/cluster/access/control-groups-configure.js similarity index 100% rename from ui/app/controllers/vault/cluster/settings/control-groups.js rename to ui/app/controllers/vault/cluster/access/control-groups-configure.js diff --git a/ui/app/router.js b/ui/app/router.js index 1301330180..5952710f40 100644 --- a/ui/app/router.js +++ b/ui/app/router.js @@ -29,7 +29,6 @@ Router.map(function() { this.route('index', { path: '/' }); this.route('section', { path: '/:section_name' }); }); - this.route('control-groups'); }); this.route('unseal'); this.route('tools', function() { @@ -66,6 +65,7 @@ Router.map(function() { }); }); this.route('control-groups'); + this.route('control-groups-configure', { path: '/control-groups/configure' }); this.route('control-group-accessor', { path: '/control-groups/:accessor' }); this.route('namespaces', function() { this.route('index', { path: '/' }); diff --git a/ui/app/routes/vault/cluster/settings/control-groups.js b/ui/app/routes/vault/cluster/access/control-groups-configure.js similarity index 100% rename from ui/app/routes/vault/cluster/settings/control-groups.js rename to ui/app/routes/vault/cluster/access/control-groups-configure.js diff --git a/ui/app/routes/vault/cluster/settings/index.js b/ui/app/routes/vault/cluster/settings/index.js index 286bcbf2a9..cd1f30425e 100644 --- a/ui/app/routes/vault/cluster/settings/index.js +++ b/ui/app/routes/vault/cluster/settings/index.js @@ -4,7 +4,7 @@ export default Route.extend({ beforeModel: function(transition) { if (transition.targetName === this.routeName) { transition.abort(); - this.replaceWith('vault.cluster.settings.mount-secret-backend'); + return this.replaceWith('vault.cluster.settings.mount-secret-backend'); } }, }); diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss index 19b0085c59..de3a10fcea 100644 --- a/ui/app/styles/components/console-ui-panel.scss +++ b/ui/app/styles/components/console-ui-panel.scss @@ -1,27 +1,43 @@ -.console-ui-panel-scroller { +.console-ui-panel { background: linear-gradient(to right, #191a1c, #1b212d); height: 0; left: 0; - overflow: auto; - position: absolute; + position: fixed; min-height: 0; + overflow: scroll; right: 0; - transform: translate3d(0, -400px, 0); + top: $header-height; + transform: translate3d(0, -100%, -1); transition: min-height $speed ease-out, transform $speed ease-in; will-change: transform, min-height; -webkit-overflow-scrolling: touch; + width: 100vw; z-index: 199; + + .button { + background: transparent; + border: none; + color: $grey; + min-width: 0; + padding: 0 $size-8; + + &.active, + &:hover { + background: $blue; + color: $white; + } + } } -.console-ui-panel { +.console-ui-panel-content { + color: $white; display: flex; flex-direction: column; - justify-content: flex-end; - padding: $size-8 $size-8 $size-4; - min-height: 100%; - color: $white; font-size: $body-size; font-weight: $font-weight-semibold; + justify-content: flex-end; + min-height: 100%; + padding: $size-8 $size-8 $size-4; transition: justify-content $speed ease-in; pre, @@ -43,24 +59,10 @@ margin-left: $console-spacing; padding: $size-8 $size-4; } - - .button { - background: transparent; - border: none; - color: $grey-dark; - min-width: 0; - padding: 0 $size-8; - - &.active, - &:hover { - background: $blue; - color: $white; - } - } } -.console-ui-panel .hover-copy-button, -.console-ui-panel .hover-copy-button-static { +.console-ui-panel-content.hover-copy-button, +.console-ui-panel-content.hover-copy-button-static { top: auto; bottom: 0; right: 0; @@ -75,7 +77,7 @@ border: 0; caret-color: $white; color: $white; - flex: 1; + flex: 1 1 auto; font-family: $family-monospace; font-size: 16px; font-weight: $font-weight-bold; @@ -112,19 +114,29 @@ } } -.panel-open .console-ui-panel-scroller { +.panel-open .console-ui-panel { box-shadow: $box-shadow-highest; - transform: translate3d(0, 0, 0); + transform: translate3d($drawer-width, 0, 0); min-height: 400px; + + @include from($mobile) { + transform: translate3d(0, 0, 0); + } } -.panel-open .console-ui-panel-scroller.fullscreen { +.panel-open .console-ui-panel.fullscreen { bottom: 0; - top: 0; - position: fixed; min-height: 100%; } +.navbar-drawer .console-ui-panel { + transform: translate3d($drawer-width, 0, 0); + + @include from($mobile) { + transform: translate3d(0, 0, 0); + } +} + .panel-open { .navbar, .navbar-sections { @@ -135,14 +147,12 @@ .panel-open.panel-fullscreen { .navbar, .navbar-sections { - transform: translate3d(0, -100px, 0); + @include from($mobile) { + transform: translate3d(0, -100px, 0); + } } } -.page-container > header:not(.page-header) { - background: linear-gradient(to right, #191a1c, #1b212d); -} - header .navbar, header .navbar-sections { z-index: 200; @@ -164,3 +174,14 @@ header .navbar-sections { bottom: 0.25rem; } } + +.console-close-button { + position: absolute; + top: -3.25rem; + right: $spacing-xs; + z-index: 210; + + @include from($mobile) { + display: none; + } +} diff --git a/ui/app/styles/components/list-item-row.scss b/ui/app/styles/components/list-item-row.scss index 3a170c345a..c03a44e2ed 100644 --- a/ui/app/styles/components/list-item-row.scss +++ b/ui/app/styles/components/list-item-row.scss @@ -4,6 +4,10 @@ @extend .is-marginless; padding-left: 0; padding-right: 0; + + .ember-basic-dropdown-trigger { + display: inline-block; + } } a.list-item-row, diff --git a/ui/app/styles/components/namespace-picker.scss b/ui/app/styles/components/namespace-picker.scss index 8e9ad3b47a..8e6b72308d 100644 --- a/ui/app/styles/components/namespace-picker.scss +++ b/ui/app/styles/components/namespace-picker.scss @@ -1,30 +1,72 @@ .namespace-picker { - border-right: 1px solid rgba($black, 0.5); - margin-right: $size-10; position: relative; - padding: 0.5rem; color: $white; + display: flex; fill: $white; + padding: $spacing-xxs $spacing-xs; + width: 100%; + + @include from($mobile) { + margin-left: -$spacing-xs; + padding: $spacing-xxs 0 $spacing-xxs $spacing-s; + width: auto; + } } + .namespace-picker.no-namespaces { border: none; padding-right: 0; } .namespace-picker-trigger { - display: flex; align-items: center; + display: flex; + flex: 1 1 auto; + height: 2rem; + justify-content: space-between; + padding: 0; + text-align: left; + + @include from($mobile) { + height: auto; + padding: $spacing-xs $spacing-m; + } + + .is-status-chevron { + transform: rotate(-90deg); + + @include from($mobile) { + transform: rotate(0deg); + } + } + + &.ember-basic-dropdown-trigger--below .is-status-chevron { + transform: rotate(0deg); + + @include from($mobile) { + transform: rotate(180deg); + } + } } .namespace-name { display: inline-block; - margin-left: $size-10; + flex: 1 1 auto; font-size: 1rem; + margin: 0 $spacing-xs; + + @include from($mobile) { + margin-left: $size-10; + } } .namespace-picker-content { - width: 300px; + width: $drawer-width - ($spacing-xs * 2); max-height: 300px; overflow: auto; border-radius: $radius; box-shadow: $box-shadow, $box-shadow-high; + + @include from($mobile) { + width: $drawer-width; + } } .namespace-picker-content .level-left { max-width: 210px; @@ -74,7 +116,7 @@ z-index: 1; } .leaf-panel-left { - transform: translateX(-300px); + transform: translateX(-$drawer-width); } .leaf-panel-adding, .leaf-panel-current { @@ -86,7 +128,7 @@ .animated-list { .leaf-panel-exiting, .leaf-panel-adding { - transform: translateX(300px); + transform: translateX($drawer-width); z-index: 20; } } diff --git a/ui/app/styles/components/namespace-reminder.scss b/ui/app/styles/components/namespace-reminder.scss index 60c041ea61..d5503069e7 100644 --- a/ui/app/styles/components/namespace-reminder.scss +++ b/ui/app/styles/components/namespace-reminder.scss @@ -4,9 +4,16 @@ } .console-reminder p.namespace-reminder { - margin-bottom: 0; - opacity: 0.7; - position: absolute; color: $grey; font-family: $family-monospace; + font-size: $size-8; + margin: $spacing-xxs 0 0; + opacity: 0.7; + position: absolute; + + .tag { + background-color: $ui-gray-800; + color: $light-grey; + font-size: $size-9; + } } diff --git a/ui/app/styles/components/page-header.scss b/ui/app/styles/components/page-header.scss index 13d7977a36..dd985b3f45 100644 --- a/ui/app/styles/components/page-header.scss +++ b/ui/app/styles/components/page-header.scss @@ -9,9 +9,15 @@ .level-right { flex-grow: 1; flex-shrink: 1; + + @include until($tablet) { + margin-top: 0.5rem; + } } .level-right { - justify-content: flex-end; + @include from($tablet) { + justify-content: flex-end; + } } .title { @@ -23,6 +29,7 @@ } .title .icon { height: auto; + vertical-align: -0.15em; width: auto; } } diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss index 928b94b148..b67366b297 100644 --- a/ui/app/styles/components/popup-menu.scss +++ b/ui/app/styles/components/popup-menu.scss @@ -7,11 +7,11 @@ box-shadow: $box-shadow, $box-shadow-middle; padding: 0; position: relative; - width: 175px; + width: 200px; } &.is-wide > .box { - width: 300px; + width: $drawer-width; } .confirm-action span .button { @@ -24,7 +24,8 @@ padding: $size-11 0; button.link, - a { + a, + .menu-item { background: transparent; box-shadow: none; border: none; @@ -59,17 +60,30 @@ color: $white; } } + + &.disabled { + opacity: 0.5; + + &:hover { + background: transparent; + cursor: default; + } + } + } + + small code { + margin-left: $spacing-xs; } } .menu-label { color: $grey-dark; - font-size: $size-8; - font-weight: $font-weight-semibold; + font-size: $size-9; + font-weight: $font-weight-normal; letter-spacing: 0; margin: 0; - padding: $size-10 $size-8 $size-11; - text-transform: none; + padding: $size-10 $size-8 0; + text-transform: uppercase; } .menu-content { @@ -77,8 +91,8 @@ } hr { - background-color: $grey-light; - margin: $size-11 0; + background-color: $ui-gray-200; + margin: 0; } } @@ -99,6 +113,12 @@ .status-menu-content { margin-top: 8px; + + .box { + @include until($mobile) { + width: $drawer-width - ($spacing-xs * 2); + } + } } .ember-basic-dropdown-content { diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss index 585d3abc3e..7eade62930 100644 --- a/ui/app/styles/components/sidebar.scss +++ b/ui/app/styles/components/sidebar.scss @@ -1,7 +1,7 @@ .is-sidebar { border-right: $base-border; display: flex; - flex: 1; + flex: 1 1 auto; margin: 0.75rem 0.75rem 0.75rem 0; padding: 0 0 0 0.75rem; @@ -10,13 +10,13 @@ bottom: 0; left: -1.5rem; margin: 0; - max-width: 300px; - padding-left: 0; + max-width: $drawer-width; + padding: $spacing-m 0 0; position: absolute; right: $size-2; transform: translateX(-100%); transition: transform $speed; - top: -3rem; + top: 0; z-index: 5; } @@ -24,19 +24,24 @@ @include until($tablet) { transform: translateX(0); } + + .menu-toggle { + left: auto; + right: $size-10; + } } .menu-toggle { color: $blue; cursor: pointer; display: none; + margin-left: $size-10; + left: 100%; + position: absolute; + top: 0; @include until($tablet) { display: block; - margin-left: $size-8; - position: absolute; - top: 4.2rem; - left: 100%; } .button { @@ -45,7 +50,7 @@ } .menu { - flex: 1; + flex: 1 1 auto; padding-top: 5.25rem; position: relative; @@ -56,7 +61,7 @@ .menu-label { color: $grey-light; - font-weight: $font-weight-semibold; + font-weight: $font-weight-bold; font-size: $size-small; line-height: 1; margin-bottom: $size-8; @@ -67,6 +72,10 @@ border-top: $base-border; padding: $size-9 0; + @include until($tablet) { + padding-top: $size-4; + } + a { color: $grey-dark; padding-left: $size-5; diff --git a/ui/app/styles/components/splash-page.scss b/ui/app/styles/components/splash-page.scss index 3f1415c554..4338ca80f3 100644 --- a/ui/app/styles/components/splash-page.scss +++ b/ui/app/styles/components/splash-page.scss @@ -1,13 +1,19 @@ -a.splash-page-logo { - color: $white; - svg { - transform: scale(.5); - transform-origin: left; - fill: $white; +.navbar-brand .splash-page-logo { + padding: $spacing-xs $spacing-s $spacing-xs $spacing-l; + + @include from($mobile) { + padding-left: $spacing-xs; + } + + svg { + fill: $white; + height: 24px; + width: 72px; + + @include from($mobile) { + margin-left: $spacing-xs; + } } -} -a.splash-page-logo.is-active { - background: transparent; } .splash-page-container { diff --git a/ui/app/styles/components/status-menu.scss b/ui/app/styles/components/status-menu.scss index 00d27c7b44..e6118437c5 100644 --- a/ui/app/styles/components/status-menu.scss +++ b/ui/app/styles/components/status-menu.scss @@ -1,16 +1,31 @@ -.is-status-chevron { - line-height: 0; - padding: 0.3em 0 0 $size-11; -} +.status-indicator-button { + &[data-status="good"] { + .status-indicator-icon-dot { + fill: $green-light; + } -.status-menu-user-trigger { - height: 1.5em; - width: 1.5em; - background: $white-bis; - box-shadow: 0 0 0 1px $white; - margin-right: 0.25rem; + .status-indicator-icon-ring { + fill: $green-dark; + } + } - .icon { - min-width: 0; + &[data-status="mixed"] { + .status-indicator-icon-dot { + fill: $yellow; + } + + .status-indicator-icon-ring { + fill: $yellow-dark; + } + } + + &[data-status="bad"] { + .status-indicator-icon-dot { + fill: $red; + } + + .status-indicator-icon-ring { + fill: $red-dark; + } } } diff --git a/ui/app/styles/components/sub-nav.scss b/ui/app/styles/components/sub-nav.scss deleted file mode 100644 index 3be16a876a..0000000000 --- a/ui/app/styles/components/sub-nav.scss +++ /dev/null @@ -1,40 +0,0 @@ -.sub-nav { - &.tabs { - box-shadow: inset 0 -1px 0 $grey-light; - - ul { - border-color: transparent; - } - - li { - &:focus { - box-shadow: none; - } - &.is-active a { - border-color: $blue; - color: $blue; - } - &:first-child a { - margin-left: $size-5; - } - } - - a { - color: $grey-dark; - font-weight: $font-weight-semibold; - text-decoration: none; - padding: $size-6 $size-8 $size-8; - border-bottom: 2px solid transparent; - transition: border-color $speed; - - &:hover, - &:active { - border-color: $grey-light; - } - } - - .ember-basic-dropdown-trigger { - outline: none; - } - } -} diff --git a/ui/app/styles/components/tabs.scss b/ui/app/styles/components/tabs.scss new file mode 100644 index 0000000000..ef0c844b7c --- /dev/null +++ b/ui/app/styles/components/tabs.scss @@ -0,0 +1,38 @@ +.tabs { + box-shadow: inset 0 -1px 0 $grey-light; + + ul { + border-color: transparent; + } + + li { + &:focus { + box-shadow: none; + } + &.is-active a { + border-color: $blue; + color: $blue; + } + &:first-child a { + margin-left: $size-5; + } + } + + a { + color: $grey-dark; + font-weight: $font-weight-semibold; + text-decoration: none; + padding: $size-6 $size-8 $size-8; + border-bottom: 2px solid transparent; + transition: border-color $speed; + + &:hover, + &:active { + border-color: $grey-light; + } + } + + .ember-basic-dropdown-trigger { + outline: none; + } +} diff --git a/ui/app/styles/components/tool-tip.scss b/ui/app/styles/components/tool-tip.scss index 6cc720f897..13591c3970 100644 --- a/ui/app/styles/components/tool-tip.scss +++ b/ui/app/styles/components/tool-tip.scss @@ -26,7 +26,13 @@ } .ember-basic-dropdown-content--left.tool-tip { - margin: 8px 0 0 -11px; + margin: 8px 0 0 -2px; + + &::before, + &::after { + right: auto; + left: $spacing-s; + } } .ember-basic-dropdown-content--right.tool-tip { margin: 8px -11px; diff --git a/ui/app/styles/components/ui-wizard.scss b/ui/app/styles/components/ui-wizard.scss index 8648f8bd78..52cb4dc2a0 100644 --- a/ui/app/styles/components/ui-wizard.scss +++ b/ui/app/styles/components/ui-wizard.scss @@ -24,13 +24,13 @@ .ui-wizard { z-index: 300; padding: $size-5; - width: 300px; + width: $drawer-width; background: $white; box-shadow: $box-shadow, $box-shadow-highest; position: fixed; right: $size-8; bottom: $size-8; - top: calc(3.5rem + #{$size-8}); + top: calc(#{$header-height} + #{$size-8}); overflow: auto; p { @@ -101,7 +101,7 @@ padding-bottom: $size-11; position: fixed; right: $size-8; - top: calc(3.5rem + #{$size-8}); + top: calc(#{$header-height} + #{$size-8}); @include until($tablet) { box-shadow: $box-shadow, 0 0 20px rgba($black, 0.24); @@ -121,6 +121,7 @@ } .wizard-header { + border-bottom: 0; margin: 0 0 $size-10; padding-top: 0; } @@ -142,7 +143,7 @@ margin: $size-8 0 0; padding: 0 $size-8; border-top: solid 1px $white; - border-image: $dark-vault-gradient 1; + border-image: linear-gradient(to right, $vault-gray-dark, $vault-gray) 1; border-width: 1px 0 0; button { font-size: $size-7; diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 4fcbff2295..73b633193c 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -1,5 +1,6 @@ // Start with Structure & Bulma variables as a foundation @import "./utils/colors"; +@import "./utils/spacing"; @import "bulma/sass/utilities/initial-variables"; // Override variables where appropriate @@ -32,12 +33,10 @@ @import "./core/progress"; @import "./core/switch"; @import "./core/tables"; -@import "./core/tabs"; @import "./core/tags"; @import "./core/title"; // bulma additions -@import "./core/gradients"; @import "./core/layout"; @import "./core/lists"; @@ -76,7 +75,7 @@ @import "./components/sidebar"; @import "./components/splash-page"; @import "./components/status-menu"; -@import "./components/sub-nav"; +@import "./components/tabs"; @import "./components/token-expire-warning"; @import "./components/tool-tip"; @import "./components/unseal-warning"; diff --git a/ui/app/styles/core/forms.scss b/ui/app/styles/core/forms.scss index 3513b744c9..864d32d0e1 100644 --- a/ui/app/styles/core/forms.scss +++ b/ui/app/styles/core/forms.scss @@ -193,6 +193,7 @@ label { .select:not(.is-multiple)::before { @extend .select:not(.is-multiple)::after; + content: ""; transform: translateY(-70%) rotate(135deg); z-index: 5; } diff --git a/ui/app/styles/core/gradients.scss b/ui/app/styles/core/gradients.scss deleted file mode 100644 index dd137335ee..0000000000 --- a/ui/app/styles/core/gradients.scss +++ /dev/null @@ -1,4 +0,0 @@ -$dark-vault-gradient: linear-gradient(to right, $vault-gray-dark, $vault-gray); -.has-dark-vault-gradient { - background: $dark-vault-gradient; -} diff --git a/ui/app/styles/core/layout.scss b/ui/app/styles/core/layout.scss index 49b0993277..2a12adb2c6 100644 --- a/ui/app/styles/core/layout.scss +++ b/ui/app/styles/core/layout.scss @@ -3,9 +3,10 @@ flex-direction: column; } .page-container { - min-height: 100vh; + min-height: calc(100vh - #{$header-height}); display: flex; flex-direction: column; + margin-top: $header-height; justify-content: flex-end; } diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index eb09d3ee41..720e61697f 100644 --- a/ui/app/styles/core/navbar.scss +++ b/ui/app/styles/core/navbar.scss @@ -1,65 +1,248 @@ .navbar { - align-items: center; - height: 3.5rem; -} - -.navbar-end { - .navbar-item { - padding: 0.5em 0.75em; - - .button { - display: inline-flex; - min-width: 2.5rem; - } - } -} - -a.navbar-item { - color: $white-ter; - &:hover, - &:active { - color: $white; - background: transparent; - } + background-color: $black; + display: flex; + height: $header-height; + justify-content: flex-start; + left: 0; + padding: $spacing-xs $spacing-s $spacing-xs 0; + position: fixed; + right: 0; + top: 0; } .navbar-brand { - margin: 0 0 0 $size-10; + background: $vault-gray; + border-radius: 0 $radius-large $radius-large 0; + margin-right: $spacing-s; + min-height: auto; + position: relative; + z-index: 203; - a { - @include from($tablet) { - height: 3.25rem; + .navbar-item { + background-color: transparent; + padding: $spacing-xs $spacing-l; + + &:hover, + .is-active { + background-color: transparent; } } } +.navbar-drawer-toggle { + 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 { - justify-content: flex-start; - background-color: $grey; + 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($tablet) { - background-color: transparent; - position: absolute; - left: 3.5em; - top: 0; - height: 3.25rem; - &.with-ns-picker { - left: 0; + @include from($mobile) { + border-radius: $radius; + display: inline-block; + padding: $spacing-xxs $spacing-s; } - } - .icon.edition-icon { - margin: -0.25em -0.5em -0.25em 0.15em; - opacity: 0.33; - transition: opacity $speed; - - #edition-enterprise-hexagon { - fill: #fff; + &.is-active { + background-color: $vault-gray-700; + color: $white; } - } - li.is-active .icon.edition-icon, - li:hover .icon.edition-icon { - opacity: 0.5; + &: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; + padding: 0 $spacing-xxs; + 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; + } + } +} + +.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; } } diff --git a/ui/app/styles/core/tabs.scss b/ui/app/styles/core/tabs.scss deleted file mode 100644 index 970462ae5c..0000000000 --- a/ui/app/styles/core/tabs.scss +++ /dev/null @@ -1,46 +0,0 @@ -.tabs.tabs-subnav { - align-items: center; - height: 3.5rem; - margin-bottom: 0; - padding: $size-10 $size-10; - - @include until($tablet) { - position: relative; - background-color: $vault-gray-800; - flex: 0 0 100%; - height: 3rem; - } - - ul { - border-bottom: none; - } - - a, - .link { - align-items: center; - border-bottom: none; - color: $white-ter; - cursor: pointer; - display: inline-flex; - font-weight: $font-weight-semibold; - line-height: 1; - padding: $size-10 $size-6; - text-decoration: none; - transition: color $speed, background-color $speed; - - &:hover { - color: $white; - } - } - .sep:before { - position: relative; - left: -0.75em; - } - - .is-active a, - .is-active .link { - color: $white; - background: rgba($black, 0.25); - border-radius: 4px; - } -} diff --git a/ui/app/styles/utils/_bulma_variables.scss b/ui/app/styles/utils/_bulma_variables.scss index 16852bf611..3cee454176 100644 --- a/ui/app/styles/utils/_bulma_variables.scss +++ b/ui/app/styles/utils/_bulma_variables.scss @@ -19,6 +19,9 @@ $border: $grey-light; $hr-margin: 1rem 0; +$mobile: 769px; +$header-height: 4rem; + //typography $family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", @@ -45,6 +48,7 @@ $input-focus-background-color: $white; $input-border-color: $grey; $radius: 2px; +$radius-large: 4px; //box $box-radius: 0; @@ -81,6 +85,9 @@ $menu-item-active-background-color: transparent; $box-link-shadow: 0 0 0 1px $ui-gray-200; $box-link-hover-shadow: 0 0 0 1px $grey-light; +// Nav +$drawer-width: 300px; + // animations $speed: 150ms; $speed-slow: $speed * 2; diff --git a/ui/app/styles/utils/_spacing.scss b/ui/app/styles/utils/_spacing.scss new file mode 100644 index 0000000000..029266d9c6 --- /dev/null +++ b/ui/app/styles/utils/_spacing.scss @@ -0,0 +1,9 @@ +// Spacing that will eventually be in Structure package + +$spacing-xxs: 4px; +$spacing-xs: 8px; +$spacing-s: 12px; +$spacing-m: 16px; +$spacing-l: 24px; +$spacing-xl: 36px; +$spacing-xxl: 48px; diff --git a/ui/app/templates/components/auth-form.hbs b/ui/app/templates/components/auth-form.hbs index 50ae2340d3..8b8f0a31b1 100644 --- a/ui/app/templates/components/auth-form.hbs +++ b/ui/app/templates/components/auth-form.hbs @@ -4,7 +4,7 @@ {{partial 'svg/vault-loading'}} {{/if}} -