Add better Structure colors
This commit is contained in:
Joshua Ogle
parent
efa779c005
commit
4ea53bbdbd
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,7 +2,7 @@
|
|||
@extend .has-slim-padding;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
background-color: $grey-lighter;
|
||||
background-color: $grey-lightest;
|
||||
margin-bottom: $size-4;
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
|
||||
.menu-label {
|
||||
color: $grey;
|
||||
color: $grey-light;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $size-small;
|
||||
line-height: 1;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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,4 +1,5 @@
|
|||
.footer {
|
||||
background-color: transparent;
|
||||
border-top: $base-border;
|
||||
padding: $size-3 1.5rem;
|
||||
margin-top: auto;
|
||||
|
|
|
|||
|
|
@ -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} {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,10 +35,10 @@
|
|||
&.is-warning {
|
||||
.title,
|
||||
.delete {
|
||||
color: $dark-yellow;
|
||||
color: $yellow-darkest;
|
||||
}
|
||||
border-color: $orange;
|
||||
color: $dark-yellow;
|
||||
color: $yellow-darkest;
|
||||
}
|
||||
|
||||
& > .delete {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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)}}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue