diff --git a/ui/app/styles/components/box-label.scss b/ui/app/styles/components/box-label.scss index c536c26b6e..dccbd983d0 100644 --- a/ui/app/styles/components/box-label.scss +++ b/ui/app/styles/components/box-label.scss @@ -1,12 +1,15 @@ label.box-label { cursor: pointer; } + .box-label { @extend .box; @extend .is-centered; @extend .is-gapless; + border-color: $grey-light; border-radius: 3px; text-decoration: none; + transition: box-shadow $speed; width: 100%; > div:first-child { @@ -16,8 +19,17 @@ label.box-label { &.is-column { @extend .is-flex-column; } + &.is-selected { - box-shadow: 0 0 0 1px $blue; + box-shadow: $box-link-hover-shadow, $box-shadow-middle; + + .icon { + color: $grey; + } + } + + .icon { + color: $grey-light; } input[type=radio] { @@ -25,7 +37,7 @@ label.box-label { } input[type=radio] + label { - border: 1px solid $grey; + border: 1px solid $grey-light; border-radius: 50%; cursor: pointer; display: block; diff --git a/ui/app/styles/components/linked-block.scss b/ui/app/styles/components/linked-block.scss index 8dc3ec8726..f407395cd3 100644 --- a/ui/app/styles/components/linked-block.scss +++ b/ui/app/styles/components/linked-block.scss @@ -7,7 +7,7 @@ &:focus, &:active { position: relative; - box-shadow: $box-link-hover-shadow, $box-shadow-middle; + box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow, $box-shadow-middle; } } diff --git a/ui/app/styles/components/list-pagination.scss b/ui/app/styles/components/list-pagination.scss index 7051b672cf..4f2d28ec17 100644 --- a/ui/app/styles/components/list-pagination.scss +++ b/ui/app/styles/components/list-pagination.scss @@ -2,7 +2,7 @@ @extend .has-slim-padding; position: relative; top: 1px; - background-color: $grey-lighter; + background-color: $grey-lightest; margin-bottom: $size-4; a { diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss index 521486199e..25feecefc6 100644 --- a/ui/app/styles/components/sidebar.scss +++ b/ui/app/styles/components/sidebar.scss @@ -55,7 +55,7 @@ } .menu-label { - color: $grey; + color: $grey-light; font-weight: $font-weight-semibold; font-size: $size-small; line-height: 1; diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index f8c5f1f342..6449bc609d 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -1,4 +1,5 @@ -// Start with Bulma variables as a foundation +// Start with Structure & Bulma variables as a foundation +@import "./utils/colors"; @import "bulma/sass/utilities/initial-variables"; // Override variables where appropriate @@ -7,7 +8,6 @@ // Utils @import "./utils/mixins"; @import "./utils/animations"; -@import "./utils/colors"; // Bring in the rest of Bulma @import "bulma/bulma"; diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index b588ae78c0..f4635769a4 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -131,7 +131,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12); color: $blue; &:hover { - background-color: $grey-lighter; + background-color: $grey-lightest; } } diff --git a/ui/app/styles/core/footer.scss b/ui/app/styles/core/footer.scss index fc3b451827..99219f3282 100644 --- a/ui/app/styles/core/footer.scss +++ b/ui/app/styles/core/footer.scss @@ -1,4 +1,5 @@ .footer { + background-color: transparent; border-top: $base-border; padding: $size-3 1.5rem; margin-top: auto; diff --git a/ui/app/styles/core/forms.scss b/ui/app/styles/core/forms.scss index 7fa28d5fd1..225880d5c4 100644 --- a/ui/app/styles/core/forms.scss +++ b/ui/app/styles/core/forms.scss @@ -70,20 +70,16 @@ label { .input, .textarea, .select select { + border-color: $grey-light; + color: $grey-dark; + padding-left: $size-8; + padding-right: $size-8; @include until($desktop) { font-size: 16px; } &::placeholder { opacity: 0.5; } - border-color: $grey-light; - color: $grey-dark; - padding-left: $size-8; - padding-right: $size-8; - - .has-background-grey-lighter & { - background-color: $white; - } } .input, @@ -98,7 +94,7 @@ label { } .input[disabled], .textarea[disabled] { - border-color: $grey-lighter; + border-color: $grey-lightest; background-color: $white-ter; color: $grey-light; } @@ -142,7 +138,7 @@ label { .input, .textarea { - box-shadow: none; + box-shadow: 0 4px 1px rgba($black, 0.06) inset; @each $name, $pair in $colors { $color: nth($pair, 1); @@ -179,12 +175,21 @@ label { } } -.select { - &:not(.is-multiple)::after { - border-width: 2px; - margin-top: 0; - transform: rotate(-45deg) translateY(-50%); - } +.select select { + background-color: $ui-gray-050; + box-shadow: 0 3px 1px rgba($black, 0.12); +} + +.select:not(.is-multiple)::after { + border-color: $black; + border-width: 2px; + margin-top: 0; + transform: translateY(25%) rotate(-45deg); +} + +.select:not(.is-multiple)::before { + @extend .select:not(.is-multiple)::after; + transform: translateY(-75%) rotate(135deg); } .field:not(:last-child) { @@ -242,7 +247,7 @@ label { } .checkbox { @include input; - background-color: $dark-white; + background-color: $grey-lightest; @each $name, $pair in $colors { $color: nth($pair, 1); &.is-#{$name} { diff --git a/ui/app/styles/core/gradients.scss b/ui/app/styles/core/gradients.scss index 2b91588d46..7cd9111dfd 100644 --- a/ui/app/styles/core/gradients.scss +++ b/ui/app/styles/core/gradients.scss @@ -1,3 +1,3 @@ .has-dark-vault-gradient { - background: linear-gradient(to right, $vault-grey-dark, $vault-grey); + background: linear-gradient(to right, $vault-gray-dark, $vault-gray); } diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss index f9007a535f..a3bcbc34f6 100644 --- a/ui/app/styles/core/message.scss +++ b/ui/app/styles/core/message.scss @@ -5,21 +5,21 @@ &.is-warning { .message-body { - color: $dark-yellow; + color: $yellow-darkest; padding: 0.75rem 1.25rem; } } &.is-highlight { - background: $light-yellow; + background: $yellow-lightest; .message-body { border: none; - box-shadow: 0 0 0 1px $orange; - color: $dark-yellow; + box-shadow: 0 0 0 1px $yellow; + color: $yellow-darkest; } .has-text-highlight, .close-button { - color: $orange; + color: $yellow; } .title, code { @@ -27,8 +27,8 @@ color: inherit; } .content .button { - border-color: $orange; - color: $dark-yellow; + border-color: $yellow; + color: $yellow-darkest; } } diff --git a/ui/app/styles/core/notification.scss b/ui/app/styles/core/notification.scss index 44447c8cca..1273e643f6 100644 --- a/ui/app/styles/core/notification.scss +++ b/ui/app/styles/core/notification.scss @@ -35,10 +35,10 @@ &.is-warning { .title, .delete { - color: $dark-yellow; + color: $yellow-darkest; } border-color: $orange; - color: $dark-yellow; + color: $yellow-darkest; } & > .delete { diff --git a/ui/app/styles/core/tabs.scss b/ui/app/styles/core/tabs.scss index 6e7e8c2bdd..970462ae5c 100644 --- a/ui/app/styles/core/tabs.scss +++ b/ui/app/styles/core/tabs.scss @@ -6,7 +6,7 @@ @include until($tablet) { position: relative; - background-color: $grey; + background-color: $vault-gray-800; flex: 0 0 100%; height: 3rem; } @@ -42,8 +42,5 @@ color: $white; background: rgba($black, 0.25); border-radius: 4px; - @include until($tablet) { - background: rgba($grey-dark, 0.75); - } } } diff --git a/ui/app/styles/core/tags.scss b/ui/app/styles/core/tags.scss index 00fa1c1ea2..e925e41b97 100644 --- a/ui/app/styles/core/tags.scss +++ b/ui/app/styles/core/tags.scss @@ -1,26 +1,14 @@ .tag:not(body) { background-color: $ui-gray-100; border-radius: 2px; - color: $grey-dark; + color: $grey; height: auto; padding: 0 $size-10; margin-right: 0.5rem; font-weight: normal; code { - color: $grey-dark; - } -} - -.tag.is-outlined { - border: 1px solid currentColor; -} - -.tag.is-inverted { - border-color: $grey; - background: none; - code { - color: $grey-dark; + color: $grey; } } diff --git a/ui/app/styles/utils/_bulma_variables.scss b/ui/app/styles/utils/_bulma_variables.scss index 9c0b2df5dd..c3edef2285 100644 --- a/ui/app/styles/utils/_bulma_variables.scss +++ b/ui/app/styles/utils/_bulma_variables.scss @@ -1,34 +1,20 @@ -$vault-grey: #6a7786; - -// ui colors -$blue: #1563ff; - -// -$orange: #f9bb2d; -$light-orange: rgb(255, 254, 218); -$light-yellow: #fffbee; -$dark-yellow: #614903; -$light-red: #fff5f8; -$dark-red: #c84034; -$light-blue: #e2eafa; -$dark-blue: #1563ff; -$light-blue: rgb(218, 234, 247); -$dark-green: #36ae40; -$light-green: rgb(244, 250, 236); -$light-white: #f9f8fe; -$dark-white: #f9f9f9; -$white-ter: rgba($white, .5); -$white-bis: $dark-white; - -// Primary colors -$success: $dark-green; -$danger: $dark-red; -$warning: $light-yellow; +// Color overrides +$light: $grey-lightest; $primary: $grey-dark; +$link: $blue; +$text: $grey-darkest; +$info: $blue; +$success: $green; +$warning: $yellow; +$danger: $red; +$black-bis: $ui-gray-900; +$black-ter: $ui-gray-700; +$grey-darker: $ui-gray-900; +$grey-lighter: $ui-gray-050; +$white-ter: rgba($white, .5); +$white-bis: $ui-gray-050; $code: $grey-dark; $code-background: transparent; -$info: $dark-blue; -$light: $grey-lighter; $border: $grey-light; $hr-margin: 1rem 0; @@ -52,7 +38,7 @@ $font-weight-semibold: 600; $font-weight-bold: 700; //input -$input-background-color: $dark-white; +$input-background-color: $white; $input-focus-background-color: $white; $input-border-color: $grey; @@ -70,9 +56,6 @@ $box-shadow-high: 0 12px 5px -7px rgba($black, 0.08), $box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.20); -$link: $blue; -$text: $black; - $breadcrumb-item-color: $blue; $breadcrumb-item-separator-color: rgba($blue, 0.5); $breadcrumb-item-active-color: $black; @@ -85,13 +68,17 @@ $menu-item-hover-color: $white; $progress-bar-background-color: lighten($grey-light, 15%); $base-border: 1px solid $grey-light; +$component-border: 1px solid $grey; +$layout-border: $base-border; //menu $menu-item-hover-color: $text; -$menu-item-hover-background-color: $grey-lighter; +$menu-item-hover-background-color: $grey-lightest; $menu-item-active-color: $link; $menu-item-active-background-color: transparent; +$box-link-hover-shadow: 0 0 0 1px $grey-light; + // animations $speed: 150ms; $speed-slow: $speed * 2; diff --git a/ui/app/styles/utils/_colors.scss b/ui/app/styles/utils/_colors.scss index fe941383d1..f40d85020a 100644 --- a/ui/app/styles/utils/_colors.scss +++ b/ui/app/styles/utils/_colors.scss @@ -1,33 +1,93 @@ // Colors that will eventually be in Structure package // Vault Gray -$vault-gray-050: #E9EEF5; -$vault-gray-100: #DAE2ED; -$vault-gray-200: #BCC8D6; -$vault-gray-300: #9BAABA; -$vault-gray-400: #828F9E; -$vault-gray-500: #6A7786; -$vault-gray-600: #515D6B; -$vault-gray-700: #3D4854; -$vault-gray-800: #242B33; -$vault-gray-900: #11161C; - -$vault-grey: $vault-gray-500; -$vault-grey-dark: $vault-gray-700; +$vault-gray-050: #F7FAFC; +$vault-gray-100: #EBEEF5; +$vault-gray-200: #D3DBE6; +$vault-gray-300: #B4BDCC; +$vault-gray-400: #949FB0; +$vault-gray-500: #7C8797; +$vault-gray-600: #5A6370; +$vault-gray-700: #3C434D; +$vault-gray-800: #1D2126; +$vault-gray-900: #060708; +$vault-gray: $vault-gray-500; +$vault-gray-dark: $vault-gray-700; // UI Gray $ui-gray-050: #F7F8FA; $ui-gray-100: #EBEEF2; -$ui-gray-200: #DCE0E6; $ui-gray-300: #BAC1CC; -$ui-gray-400: #8E96A3; $ui-gray-500: #6a7786; -$ui-gray-600: #626873; $ui-gray-700: #525761; -$ui-gray-800: #373A42; $ui-gray-900: #1F2124; - -$grey-lighter: $ui-gray-050; +$grey-lightest: $ui-gray-050; $grey-light: $ui-gray-300; $grey: $ui-gray-500; $grey-dark: $ui-gray-700; +$grey-darkest: $ui-gray-900; + +// Blue +$blue-050: #F0F5FF; +$blue-100: #BFD4FF; +$blue-300: #5B92FF; +$blue-500: #1563ff; +$blue-700: #0E40A3; +$blue-900: #061B46; +$blue-lightest: $blue-050; +$blue-light: $blue-300; +$blue: $blue-500; +$blue-dark: $blue-700; +$blue-darkest: $blue-900; + +// Red +$red-050: #F9ECEE; +$red-100: #EFC7CC; +$red-300: #DB7D88; +$red-500: #C73445; +$red-700: #7F222C; +$red-900: #370F13; +$red-lightest: $red-050; +$red-light: $red-300; +$red: $red-500; +$red-dark: $red-700; +$red-darkest: $red-900; + +// Green +$green-050: #ECF7ED; +$green-100: #C6E9C9; +$green-300: #7ACC81; +$green-500: #2EB039; +$green-700: #1E7125; +$green-900: #0D3010; +$green-lightest: $green-050; +$green-light: $green-300; +$green: $green-500; +$green-dark: $green-700; +$green-darkest: $green-900; + +// Orange +$orange-050: #FEF4EC; +$orange-100: #FDE0C8; +$orange-300: #FBB77F; +$orange-500: #FA8F37; +$orange-700: #A05C23; +$orange-900: #45270F; +$orange-lightest: $orange-050; +$orange-light: $orange-300; +$orange: $orange-500; +$orange-dark: $orange-700; +$orange-darkest: $orange-900; + +// Yellow +$yellow-050: #FFFBED; +$yellow-100: #FDEEBA; +$yellow-300: #FBD95E; +$yellow-500: #FAC402; +$yellow-700: #A07D02; +$yellow-900: #453601; +$yellow-lightest: $yellow-050; +$yellow-light: $yellow-300; +$yellow: $yellow-500; +$yellow-dark: $yellow-700; +$yellow-darkest: $yellow-900; diff --git a/ui/app/templates/components/identity/item-aliases.hbs b/ui/app/templates/components/identity/item-aliases.hbs index 1ebafafbba..ccec8a8bf7 100644 --- a/ui/app/templates/components/identity/item-aliases.hbs +++ b/ui/app/templates/components/identity/item-aliases.hbs @@ -1,5 +1,5 @@ {{#each (if model.alias.id (array model.alias) model.aliases) as |item|}} - {{#linked-block + {{#linked-block "vault.cluster.access.identity.aliases.show" item.id "details" diff --git a/ui/app/templates/components/secret-list-header.hbs b/ui/app/templates/components/secret-list-header.hbs index 40201222ad..a925a5f8bd 100644 --- a/ui/app/templates/components/secret-list-header.hbs +++ b/ui/app/templates/components/secret-list-header.hbs @@ -17,7 +17,7 @@

{{model.id}} - + {{or options.displayName (capitalize model.type)}} {{#if (eq model.options.version 2)}} diff --git a/ui/app/templates/partials/replication/enable.hbs b/ui/app/templates/partials/replication/enable.hbs index ae00437a62..3930e1aaa6 100644 --- a/ui/app/templates/partials/replication/enable.hbs +++ b/ui/app/templates/partials/replication/enable.hbs @@ -35,7 +35,7 @@ {{#if initialReplicationMode}} {{#if (eq initialReplicationMode 'dr')}}

- {{i-con class="has-text-grey is-medium" glyph="replication" size=24}} + {{i-con class="is-medium" glyph="replication" size=24}} Disaster Recovery (DR) Replication

@@ -43,7 +43,7 @@

{{else if (eq initialReplicationMode 'performance')}}

- {{i-con class="has-text-grey is-medium" glyph="perf-replication" size=20}} + {{i-con class="is-medium" glyph="perf-replication" size=20}} Performance Replication

{{#if (not version.hasPerfReplication)}} @@ -68,7 +68,7 @@