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;
border-width: 1px;
border-radius: $decor-radius-100;
box-shadow: $decor-elevation-200;
box-shadow: $decor-elevation-300;
}
/* color */
%copy-button {

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

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

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

@ -14,11 +14,11 @@
}
%stats-card,
%stats-card header::before {
box-shadow: $decor-elevation-400;
box-shadow: $decor-elevation-300;
}
%stats-card:hover,
%stats-card:focus {
box-shadow: $decor-elevation-600;
box-shadow: $decor-elevation-400;
}
%stats-card header > :not(a):last-child {
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-200: 2px solid;
$decor-border-300: 3px solid;
$decor-elevation-100: 0 2px 4px rgba(0, 0, 0, 0.1);
$decor-elevation-200: 0 5px 1px -2px rgba($black, 0.12);
$decor-elevation-100: 0 3px 2px rgba(0, 0, 0, 0.06);
$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-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);

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']:hover + *,
%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']: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 {
box-shadow: $decor-elevation-100;
box-shadow: $decor-elevation-300;
}
/* Header Tooltips/Icon*/
th {