From ec2e808cb5e0a3ad0696da6fa13c3a4d84bccfb5 Mon Sep 17 00:00:00 2001 From: eugene-sinitsyn Date: Mon, 9 Mar 2020 15:38:42 +0300 Subject: [PATCH] Update material styles --- .../styles/material/_material-dark.scss | 30 +++++++++++++------ .../styles/material/_material-light.scss | 19 +++++++++--- src/app/@theme/styles/material/_material.scss | 11 +++---- .../charts-panel/charts-panel.component.scss | 4 +++ 4 files changed, 44 insertions(+), 20 deletions(-) diff --git a/src/app/@theme/styles/material/_material-dark.scss b/src/app/@theme/styles/material/_material-dark.scss index 2686db5b..613a45a4 100644 --- a/src/app/@theme/styles/material/_material-dark.scss +++ b/src/app/@theme/styles/material/_material-dark.scss @@ -99,9 +99,9 @@ $theme: ( color-basic-400: #d4d4d4, color-basic-500: #b3b3b3, color-basic-600: #808080, - color-basic-700: #4a4a4a, - color-basic-800: #383838, - color-basic-900: #292929, + color-basic-700: #404040, + color-basic-800: #353535, + color-basic-900: #303030, color-basic-1000: #1f1f1f, color-basic-1100: #141414, @@ -273,9 +273,9 @@ $theme: ( color-control-transparent-active-border: color-basic-100, color-control-transparent-disabled-border: color-basic-transparent-300, - background-basic-color-1: color-basic-800, - background-basic-color-2: color-basic-900, - background-basic-color-3: color-basic-800, + background-basic-color-1: color-basic-1000, + background-basic-color-2: color-basic-1000, + background-basic-color-3: color-basic-900, background-basic-color-4: color-basic-1100, background-alternative-color-1: color-basic-100, @@ -361,12 +361,19 @@ $theme: ( text-danger-active-color: color-danger-active, text-danger-disabled-color: color-danger-400, - shadow: unquote('0 2px 10px rgba(0, 0, 0, 0.24), 0 0 20px rgba(0, 0, 0, 0.12)'), + font-family-primary: unquote('Roboto, sans-serif'), + + shadow: unquote('0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'), + card-shadow: shadow, header-shadow: unquote( '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)' ), - font-family-primary: unquote('Roboto, sans-serif'), + header-background-color: color-primary-default, + footer-background-color: color-primary-default, + footer-text-color: text-basic-color, + footer-text-highlight-color: footer-text-color, + sidebar-background-color: background-basic-color-2, menu-text-font-weight: 400, menu-text-color: rgba(255, 255, 255, 0.7), @@ -379,7 +386,12 @@ $theme: ( menu-submenu-item-hover-background-color: rgba(255, 255, 255, 0.04), menu-submenu-item-active-hover-background-color: rgba(255, 255, 255, 0.1), - menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.25) + menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.25), + + card-border-style: none, + card-background-color: color-basic-800, + card-divider-color: color-basic-700, + card-border-radius: .25rem .25rem .125rem .125rem ); $nb-themes: nb-register-theme($theme, material-dark, dark); diff --git a/src/app/@theme/styles/material/_material-light.scss b/src/app/@theme/styles/material/_material-light.scss index 1ca014b1..a5fe401f 100644 --- a/src/app/@theme/styles/material/_material-light.scss +++ b/src/app/@theme/styles/material/_material-light.scss @@ -361,12 +361,19 @@ $theme: ( text-danger-active-color: color-danger-active, text-danger-disabled-color: color-danger-400, - shadow: unquote('0 2px 10px rgba(0, 0, 0, 0.12), 0 0 20px rgba(0, 0, 0, 0.06)'), + font-family-primary: unquote('Roboto, sans-serif'), + + shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'), + card-shadow: shadow, header-shadow: unquote( - '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)' + '0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12)' ), - font-family-primary: unquote('Roboto, sans-serif'), + header-background-color: color-primary-default, + footer-background-color: color-primary-default, + footer-text-color: text-alternate-color, + footer-text-highlight-color: footer-text-color, + sidebar-background-color: background-basic-color-2, menu-text-font-weight: 400, menu-text-color: rgba(0, 0, 0, 0.87), @@ -379,7 +386,11 @@ $theme: ( menu-submenu-item-hover-background-color: rgba(0, 0, 0, 0.04), menu-submenu-item-active-hover-background-color: rgba(0, 0, 0, 0.1), - menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.08) + menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.08), + + card-border-style: none, + card-divider-color: color-basic-200, + card-border-radius: .25rem .25rem .125rem .125rem ); $nb-themes: nb-register-theme($theme, material-light, default); diff --git a/src/app/@theme/styles/material/_material.scss b/src/app/@theme/styles/material/_material.scss index 1273145b..1a998400 100644 --- a/src/app/@theme/styles/material/_material.scss +++ b/src/app/@theme/styles/material/_material.scss @@ -15,9 +15,6 @@ @include mat-core(); nb-layout-header { - box-shadow: nb-theme(header-shadow) !important; - background-color: nb-theme(color-primary-default) !important; - .logo-container, nb-action { a, nb-icon, .user-name { color: nb-theme(text-control-color) !important; @@ -26,7 +23,6 @@ } nb-sidebar { - background-color: nb-theme(background-basic-color-2) !important; transition: width 0.3s; .main-container { @@ -34,9 +30,10 @@ } } - nb-card, nb-reveal-card { - border: none !important; - box-shadow: nb-theme(shadow) !important; + nb-card { + nb-card-header, .tabset { + background-color: nb-theme(card-divider-color); + } } } } diff --git a/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss b/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss index acf1a902..4d601af1 100644 --- a/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss +++ b/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss @@ -6,6 +6,10 @@ $legend-canceled-color: #3f4fda; @include nb-install-component() { + nb-card { + overflow: hidden; + } + nb-tabset { display: flex; flex-direction: column;