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

* 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

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 {

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;

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;

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

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 + *,

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 {