scottk/vault
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/vault.git synced 2025-10-30 10:12:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add better Structure colors

Browse Source
This commit is contained in:
Joshua Ogle
2018-07-05 18:06:34 -06:00
parent 65a9ed9c8a
commit b7655d7880
19 changed files with 164 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ui/app/styles/components/box-label.scss
View File

@@ -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;

2
ui/app/styles/components/linked-block.scss
View File

@@ -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;
}
}

2
ui/app/styles/components/list-pagination.scss
View File

@@ -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 {

2
ui/app/styles/components/sidebar.scss
View File

@@ -55,7 +55,7 @@
}
.menu-label {
color: $grey;
color: $grey-light;
font-weight: $font-weight-semibold;
font-size: $size-small;
line-height: 1;

4
ui/app/styles/core.scss
View File

@@ -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";

2
ui/app/styles/core/buttons.scss
View File

@@ -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;
}
}

1
ui/app/styles/core/footer.scss
View File

@@ -1,4 +1,5 @@
.footer {
background-color: transparent;
border-top: $base-border;
padding: $size-3 1.5rem;
margin-top: auto;

39
ui/app/styles/core/forms.scss
View File

@@ -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} {

2
ui/app/styles/core/gradients.scss
View File

@@ -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);
}

14
ui/app/styles/core/message.scss
View File

@@ -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;
}
}

4
ui/app/styles/core/notification.scss
View File

@@ -35,10 +35,10 @@
&.is-warning {
.title,
.delete {
color: $dark-yellow;
color: $yellow-darkest;
}
border-color: $orange;
color: $dark-yellow;
color: $yellow-darkest;
}
& > .delete {

5
ui/app/styles/core/tabs.scss
View File

@@ -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);
}
}
}

16
ui/app/styles/core/tags.scss
View File

@@ -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;
}
}

53
ui/app/styles/utils/_bulma_variables.scss
View File

@@ -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;

98
ui/app/styles/utils/_colors.scss
View File

@@ -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;

2
ui/app/templates/components/identity/item-aliases.hbs
View File

@@ -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"

2
ui/app/templates/components/secret-list-header.hbs
View File

@@ -17,7 +17,7 @@
<p.levelLeft>
<h1 class="title is-3">
{{model.id}}
<span class="tag is-outlined is-inverted has-text-grey-dark is-font-mono">
<span class="tag">
{{or options.displayName (capitalize model.type)}}
</span>
{{#if (eq model.options.version 2)}}

12
ui/app/templates/partials/replication/enable.hbs
View File

@@ -35,7 +35,7 @@
{{#if initialReplicationMode}}
{{#if (eq initialReplicationMode 'dr')}}
<h3 class="title is-flex-center is-5 is-marginless">
{{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
</h3>
<p class="help has-text-grey-dark">
@@ -43,7 +43,7 @@
</p>
{{else if (eq initialReplicationMode 'performance')}}
<h3 class="title is-flex-center is-5 is-marginless">
{{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
</h3>
{{#if (not version.hasPerfReplication)}}
@@ -68,7 +68,7 @@
<label for="dr" class="box-label is-column {{if (eq replicationMode 'dr') 'is-selected'}}">
<div>
<h3 class="box-label-header title is-6">
{{i-con class="has-text-grey is-medium" glyph="replication" size=24}}
{{i-con class="is-medium" glyph="replication" size=24}}
Disaster Recovery (DR)
</h3>
<p class="help has-text-grey-dark">
@@ -90,18 +90,18 @@
<label for="performance" class="box-label is-column {{if (eq replicationMode 'performance') 'is-selected'}}">
<div>
<h3 class="box-label-header title is-6">
{{i-con class="has-text-grey is-medium" glyph="perf-replication" size=20}}
{{i-con class="is-medium" glyph="perf-replication" size=20}}
Performance
{{#if (not version.hasPerfReplication)}}
{{edition-badge edition="Premium"}}
{{/if}}
</h3>
{{#if (not version.hasPerfReplication)}}
<p class="help has-text-grey-dark">
<p class="help is-mediu-dark">
Performance Replication is a feature of {{#upgrade-link pageName="Performance Replication"}}Vault Enterprise Premium{{/upgrade-link}}
</p>
{{else}}
<p class="help has-text-grey-dark">
<p class="help -dark">
Performance replication scales workloads horizontally across clusters to make requests faster. Local secondaries handle read requests but forward writes to the primary to be handled.
</p>
{{/if}}

2
ui/app/templates/vault/cluster/secrets/backends.hbs
View File

@@ -13,7 +13,7 @@
</PageHeader>
{{#each supportedBackends as |backend|}}
{{#linked-block
{{#linked-block
"vault.cluster.secrets.backend.list-root"
backend.id
class="box is-sideless is-marginless has-pointer"