From ea9d7d56eaf2e4f2ad99de707d7481bb5e1ba9d6 Mon Sep 17 00:00:00 2001 From: eugene-sinitsyn Date: Thu, 5 Mar 2020 14:25:25 +0300 Subject: [PATCH] Add material style overrides --- src/app/@theme/styles/_overrides.scss | 4 +++ .../styles/{ => material}/_material-dark.scss | 5 +-- .../{ => material}/_material-light.scss | 7 ++-- src/app/@theme/styles/material/_material.scss | 32 +++++++++++++++++++ .../@theme/styles/{ => material}/_ripple.scss | 0 src/app/@theme/styles/styles.scss | 3 +- src/app/@theme/styles/themes.scss | 6 ++-- .../room-selector.component.scss | 1 + .../security-cameras.component.scss | 2 +- .../visitors-analytics.component.scss | 2 +- 10 files changed, 50 insertions(+), 12 deletions(-) rename src/app/@theme/styles/{ => material}/_material-dark.scss (98%) rename src/app/@theme/styles/{ => material}/_material-light.scss (98%) create mode 100644 src/app/@theme/styles/material/_material.scss rename src/app/@theme/styles/{ => material}/_ripple.scss (100%) diff --git a/src/app/@theme/styles/_overrides.scss b/src/app/@theme/styles/_overrides.scss index acf7d8ac..8ba44121 100644 --- a/src/app/@theme/styles/_overrides.scss +++ b/src/app/@theme/styles/_overrides.scss @@ -8,4 +8,8 @@ right: 0.41rem !important; } } + + .table { + color: nb-theme(text-basic-color) !important; + } } diff --git a/src/app/@theme/styles/_material-dark.scss b/src/app/@theme/styles/material/_material-dark.scss similarity index 98% rename from src/app/@theme/styles/_material-dark.scss rename to src/app/@theme/styles/material/_material-dark.scss index 181e3219..f9a692a4 100644 --- a/src/app/@theme/styles/_material-dark.scss +++ b/src/app/@theme/styles/material/_material-dark.scss @@ -275,7 +275,7 @@ $theme: ( background-basic-color-1: color-basic-800, background-basic-color-2: color-basic-900, - background-basic-color-3: color-basic-1000, + background-basic-color-3: color-basic-800, background-basic-color-4: color-basic-1100, background-alternative-color-1: color-basic-100, @@ -361,7 +361,8 @@ $theme: ( text-danger-active-color: color-danger-active, text-danger-disabled-color: color-danger-400, - shadow: '0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)', + shadow: unquote("0 2px 10px rgba(0, 0, 0, 0.24), 0 0 20px rgba(0, 0, 0, 0.12)"), + 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)"), outline-color: color-basic-700, font-family-primary: unquote('Roboto, sans-serif') diff --git a/src/app/@theme/styles/_material-light.scss b/src/app/@theme/styles/material/_material-light.scss similarity index 98% rename from src/app/@theme/styles/_material-light.scss rename to src/app/@theme/styles/material/_material-light.scss index 6f677190..4ea1d660 100644 --- a/src/app/@theme/styles/_material-light.scss +++ b/src/app/@theme/styles/material/_material-light.scss @@ -274,8 +274,8 @@ $theme: ( color-control-transparent-disabled-border: color-basic-transparent-300, background-basic-color-1: color-basic-100, - background-basic-color-2: color-basic-200, - background-basic-color-3: color-basic-300, + background-basic-color-2: color-basic-300, + background-basic-color-3: color-basic-100, background-basic-color-4: color-basic-400, background-alternative-color-1: color-basic-800, @@ -361,7 +361,8 @@ $theme: ( text-danger-active-color: color-danger-active, text-danger-disabled-color: color-danger-400, - shadow: '0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)', + shadow: unquote("0 2px 10px rgba(0, 0, 0, 0.12), 0 0 20px rgba(0, 0, 0, 0.06)"), + 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)"), outline-color: color-basic-transparent-200, font-family-primary: unquote('Roboto, sans-serif') diff --git a/src/app/@theme/styles/material/_material.scss b/src/app/@theme/styles/material/_material.scss new file mode 100644 index 00000000..282c15da --- /dev/null +++ b/src/app/@theme/styles/material/_material.scss @@ -0,0 +1,32 @@ +@import './ripple'; + +@include nb-install() { + @include ngx-ripple(); + + @include nb-for-themes(material-dark, material-light) { + 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; + } + } + } + + nb-sidebar { + background-color: nb-theme(background-basic-color-2) !important; + transition: width 0.3s; + + .main-container { + transition: width 0.3s; + } + } + + nb-card, nb-reveal-card { + border: none !important; + box-shadow: nb-theme(shadow) !important; + } + } +} diff --git a/src/app/@theme/styles/_ripple.scss b/src/app/@theme/styles/material/_ripple.scss similarity index 100% rename from src/app/@theme/styles/_ripple.scss rename to src/app/@theme/styles/material/_ripple.scss diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss index 15c2de14..42369947 100644 --- a/src/app/@theme/styles/styles.scss +++ b/src/app/@theme/styles/styles.scss @@ -18,7 +18,7 @@ @import './layout'; @import './overrides'; -@import './ripple'; +@import './material/material'; // install the framework and custom global styles @include nb-install() { @@ -32,5 +32,4 @@ @include ngx-pace-theme(); @include nb-overrides(); - @include ngx-ripple(); }; diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss index 6e60d197..22a42a9c 100644 --- a/src/app/@theme/styles/themes.scss +++ b/src/app/@theme/styles/themes.scss @@ -3,8 +3,8 @@ // @nebular out of the box themes @import '~@nebular/theme/styles/themes'; // material themes -@import './material-dark'; -@import './material-light'; +@import './material/material-dark'; +@import './material/material-light'; $nb-themes: nb-register-theme(( layout-padding-top: 2.25rem, @@ -128,6 +128,6 @@ $nb-themes: nb-register-theme(( select-min-width: 6rem, slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%), - slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, + slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,У slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, ), material-dark, material-dark); diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss index d66ebb20..ea352406 100644 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss +++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss @@ -7,6 +7,7 @@ border-width: 0; box-shadow: none; margin: 0; + height: 100%; } nb-card-header { diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss index 567b323a..f62f667f 100644 --- a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss +++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss @@ -13,7 +13,7 @@ .single-view-button { .nb-square { - font-size: 1.25rem; + font-size: 1rem; } @include nb-ltr { diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss index b8af1e7b..dadf5a21 100644 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss +++ b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss @@ -5,10 +5,10 @@ @include nb-install-component() { position: relative; display: block; - overflow: hidden; nb-card { position: relative; + overflow: hidden; } nb-card-header {