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:
parent
80a362554a
commit
919b38c63a
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 + *,
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue