Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update material styles

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-09 15:38:42 +03:00 • committed by Maksim Karatkevich
parent f5f6251e3e
commit 94347655b7
4 changed files with 85 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/app/@theme/styles/material/_material-dark.scss
View file

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

19
src/app/@theme/styles/material/_material-light.scss
View file

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

11
src/app/@theme/styles/material/_material.scss
View file

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

45
src/app/pages/e-commerce/charts-panel/charts-panel.component.scss Normal file
View file

@ -0,0 +1,45 @@
@import '../../../@theme/styles/themes';
$legend-all-orders-color: #00977e;
$legend-payment-color: #6935ca;
$legend-canceled-color: #3f4fda;
@include nb-install-component() {
nb-card {
overflow: hidden;
}
nb-tabset {
display: flex;
flex-direction: column;
flex: 1;
::ng-deep ul {
// make same size as card header
border-color: transparent;
padding-bottom: 1px;
.tab-link {
padding: 1.25rem 2rem;
}
}
}
nb-tab {
flex: 1;
padding: 0 0 1.25rem;
}
.chart-container {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
ngx-profit-chart,
ngx-orders-chart {
padding: 0 1.25rem;
}
}