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

Add material style overrides

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-05 14:25:25 +03:00 • committed by Maksim Karatkevich
parent 2f7d61ded1
commit bef0105a9f
10 changed files with 287 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/@theme/styles/_overrides.scss
View file

@ -8,4 +8,8 @@
right: 0.41rem !important;
}
}
.table {
color: nb-theme(text-basic-color) !important;
}
}

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

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

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

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

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

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

0
src/app/@theme/styles/_ripple.scss → src/app/@theme/styles/material/_ripple.scss
View file

3
src/app/@theme/styles/styles.scss
View file

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

6
src/app/@theme/styles/themes.scss
View file

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

77
src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss Normal file
View file

@ -0,0 +1,77 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
nb-card {
background-color: transparent;
border-width: 0;
box-shadow: none;
margin: 0;
height: 100%;
}
nb-card-header {
border-color: transparent;
}
svg {
width: 100%;
}
.stroke-pattern {
fill: none;
stroke: #bdc4cd;
stroke-miterlimit: 10;
opacity: 0.1;
stroke-width: 1px;
}
.stroked-element {
stroke-width: 4px;
stroke: #bdc4cd;
stroke-miterlimit: 10;
}
.room-border {
stroke-width: 4px;
stroke: #bdc4cd;
stroke-miterlimit: 10;
fill: none;
}
.room-bg {
fill: nb-theme(card-background-color);
stroke: transparent;
cursor: pointer;
stroke-width: 4px;
}
.room-bg-border-grad {
fill: none;
stroke: none;
stroke-width: 4px;
}
.room-text {
cursor: pointer;
user-select: none;
pointer-events: none;
fill: nb-theme(text-hint-color);
}
.selected-room {
z-index: 40;
.room-text {
fill: nb-theme(text-basic-color);
}
.room-border {
stroke: nb-theme(color-primary-default);
}
}
.header {
border-bottom: none;
padding-bottom: 0;
}
}

114
src/app/pages/dashboard/security-cameras/security-cameras.component.scss Normal file
View file

@ -0,0 +1,114 @@
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@import '~bootstrap/scss/mixins/breakpoints';
@include nb-install-component() {
nb-card-header {
display: flex;
align-items: center;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.single-view-button {
.nb-square {
font-size: 1rem;
}
@include nb-ltr {
margin-left: auto;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@include nb-rtl {
margin-right: auto;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.grid-view-button {
::ng-deep svg {
vertical-align: top;
}
@include nb-ltr {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
@include nb-rtl {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.grid-container {
height: 100%;
display: flex;
}
.single-view,
.grid-view {
flex: 1 0 100%;
}
.grid-view {
display: flex;
flex-wrap: wrap;
.camera {
flex: 1 0 50%;
}
}
.single-view .camera {
width: 100%;
height: 100%;
}
.camera {
background-position: center;
background-size: cover;
position: relative;
&::before {
background-color: rgba(255, 255, 255, 0.1);
content: '';
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
}
&:hover::before {
opacity: 0;
}
}
.camera-name {
position: absolute;
bottom: 0;
width: 100%;
color: white;
background: nb-theme(overlay-backdrop-background-color);
padding: 0.5rem 1rem;
}
nb-action {
nb-icon {
@include nb-ltr(margin-right, 0.5rem);
@include nb-rtl(margin-left, 0.5rem);
}
::ng-deep svg {
vertical-align: top;
}
}
@include media-breakpoint-down(xl) {
nb-action {
padding: 0;
}
}
}

49
src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss Normal file
View file

@ -0,0 +1,49 @@
@import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
position: relative;
display: block;
nb-card {
position: relative;
overflow: hidden;
}
nb-card-header {
border-bottom: none;
}
.subtitle {
color: nb-theme(text-hint-color);
}
.container {
display: flex;
flex-direction: row;
}
.chart-container {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.chart-header {
display: flex;
justify-content: space-between;
margin-bottom: 2.125rem;
}
@include media-breakpoint-down(is) {
ngx-legend-chart {
::ng-deep .legends {
padding-left: 0;
}
}
}
}