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

ui: Create CSS variables for box-shadowing consistency (#7337) 

* Table - Lowest (on-hover of table items)
* Buttons - Middle
* Form-elements - Removed, no box-shadowing in input forms mocks.
* Menu-panel -High
* Modal-dialog - Highest
* Stats-card -Middle/High(Active)
* Tooltip - Middle
* Card - Middle
* Expanded-single-select - Middle
* Tabular-details - High
* Discovery chain - High
This commit is contained in:
Kenia 2020-02-21 10:17:18 -05:00 committed by John Cowen
parent b500cd929e
commit 6275e13f93
13 changed files with 19 additions and 14 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: 0 3px 1px 0 rgba($black, 0.12);
box-shadow: $decor-elevation-200;
}
/* color */
%copy-button {

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

@ -7,7 +7,6 @@
%form-element-text-input {
-moz-appearance: none;
-webkit-appearance: none;
box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.06);
border-radius: $decor-radius-100;
border: $decor-border-100;
outline: none;

2
ui-v2/app/styles/base/components/menu-panel/skin.scss
View File

@ -1,7 +1,7 @@
%menu-panel {
border: $decor-border-100;
border-radius: $decor-radius-200;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
box-shadow: $decor-elevation-600;
}
%menu-panel {
border-color: $gray-300;

2
ui-v2/app/styles/base/components/modal-dialog/skin.scss
View File

@ -2,7 +2,7 @@
background-color: rgba($white, 0.9);
}
%modal-window {
box-shadow: 2px 8px 8px 0 rgba($black, 0.1);
box-shadow: $decor-elevation-800;
}
%modal-window {
/*%frame-gray-000*/

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: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
box-shadow: $decor-elevation-400;
}
%stats-card:hover,
%stats-card:focus {
box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
box-shadow: $decor-elevation-600;
}
%stats-card header > :not(a):last-child {
border: $decor-border-100;

2
ui-v2/app/styles/base/components/tooltip/skin.scss
View File

@ -23,5 +23,5 @@
/* this isn't quite like the values in structure */
/* but this looks closer visually */
/* TODO: try and get this closer to structure */
box-shadow: 0 2px 5px 0 rgba($black, 0.31);
box-shadow: $decor-elevation-400;
}

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

@ -7,3 +7,8 @@ $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-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/card/skin.scss
View File

@ -21,5 +21,5 @@
list-style-type: none;
}
%card-intent {
box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
box-shadow: $decor-elevation-400;
}

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: 0 4px 8px 0 rgba($black, 0.05);
box-shadow: $decor-elevation-400;
}
%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: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: $decor-elevation-100;
}
/* Header Tooltips/Icon*/
th {

2
ui-v2/app/styles/components/tabular-details/skin.scss
View File

@ -8,7 +8,7 @@
%tabular-detail {
border: 1px solid $gray-300;
border-radius: $decor-radius-100;
box-shadow: 0 8px 10px 0 rgba($black, 0.1);
box-shadow: $decor-elevation-600;
margin-bottom: 20px;
}
%tabular-detail::before,

3
ui-v2/app/styles/variables/index.scss
View File

@ -6,8 +6,9 @@
:root {
--white: #{$white};
--decor-border-100: #{$decor-border-100};
--decor-radius-300: #{$decor-radius-300};
--decor-radius-200: #{$decor-radius-200};
--gray-500: #{$gray-500};
--decor-elevation-600: #{$decor-elevation-600};
}
$gray: $gray-200;

4
ui-v2/app/templates/components/discovery-chain.hbs
View File

@ -6,9 +6,9 @@
background-color: var(--white);
border: var(--decor-border-100);
border-radius: var(--decor-radius-300);
border-radius: var(--decor-radius-200);
border-color: var(--gray-500);
box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
box-shadow: var(--decor-elevation-600);
}
{{/if}}
{{#if selected.edges }}