luxolus/open-consul
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

ui: Update the shadows for radio buttons and the cards (#7391)

Browse source 
* Update box-shadowing for cards and radio buttons to low
* Update box-shadowing for hover cards to middle
* Create a new box-shadow CSS variable for form elements
This commit is contained in:
Kenia 2020-03-05 09:16:48 -05:00 committed by John Cowen
parent 80a362554a
commit 919b38c63a
6 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui-v2/app/styles/base/components/buttons/skin.scss
View file

@ -27,7 +27,7 @@
@extend %button; @extend %button;
border-width: 1px; border-width: 1px;
border-radius: $decor-radius-100; border-radius: $decor-radius-100;
box-shadow: $decor-elevation-200; box-shadow: $decor-elevation-300;
} }
/* color */ /* color */
%copy-button { %copy-button {

1
ui-v2/app/styles/base/components/form-elements/skin.scss
View file

@ -7,6 +7,7 @@
%form-element-text-input { %form-element-text-input {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
box-shadow: inset $decor-elevation-100;
border-radius: $decor-radius-100; border-radius: $decor-radius-100;
border: $decor-border-100; border: $decor-border-100;
outline: none; outline: none;

4
ui-v2/app/styles/base/components/stats-card/skin.scss
View file

@ -14,11 +14,11 @@
} }
%stats-card, %stats-card,
%stats-card header::before { %stats-card header::before {
box-shadow: $decor-elevation-400; box-shadow: $decor-elevation-300;
} }
%stats-card:hover, %stats-card:hover,
%stats-card:focus { %stats-card:focus {
box-shadow: $decor-elevation-600; box-shadow: $decor-elevation-400;
} }
%stats-card header > :not(a):last-child { %stats-card header > :not(a):last-child {
border: $decor-border-100; border: $decor-border-100;

5
ui-v2/app/styles/base/decoration/base-variables.scss
View file

@ -7,8 +7,9 @@ $decor-border-000: none;
$decor-border-100: 1px solid; $decor-border-100: 1px solid;
$decor-border-200: 2px solid; $decor-border-200: 2px solid;
$decor-border-300: 3px solid; $decor-border-300: 3px solid;
$decor-elevation-100: 0 2px 4px rgba(0, 0, 0, 0.1); $decor-elevation-100: 0 3px 2px rgba(0, 0, 0, 0.06);
$decor-elevation-200: 0 5px 1px -2px rgba($black, 0.12); $decor-elevation-200: 0 2px 4px rgba(0, 0, 0, 0.1);
$decor-elevation-300: 0 5px 1px -2px rgba($black, 0.12);
$decor-elevation-400: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1); $decor-elevation-400: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1);
$decor-elevation-600: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1); $decor-elevation-600: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1);
$decor-elevation-800: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2); $decor-elevation-800: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2);

2
ui-v2/app/styles/components/expanded-single-select/skin.scss
View file

@ -4,7 +4,7 @@
%expanded-single-select input[type='radio']:checked + *, %expanded-single-select input[type='radio']:checked + *,
%expanded-single-select input[type='radio']:hover + *, %expanded-single-select input[type='radio']:hover + *,
%expanded-single-select input[type='radio']:focus + * { %expanded-single-select input[type='radio']:focus + * {
box-shadow: $decor-elevation-400; box-shadow: $decor-elevation-300;
} }
%expanded-single-select input[type='radio']:checked + *, %expanded-single-select input[type='radio']:checked + *,
%expanded-single-select input[type='radio']:hover + *, %expanded-single-select input[type='radio']:hover + *,

2
ui-v2/app/styles/components/table.scss
View file

@ -45,7 +45,7 @@ table:not(.sessions) td:first-child {
} }
table:not(.sessions) tbody tr:hover { table:not(.sessions) tbody tr:hover {
box-shadow: $decor-elevation-100; box-shadow: $decor-elevation-300;
} }
/* Header Tooltips/Icon*/ /* Header Tooltips/Icon*/
th { th {