Add material theme for material landing page

This commit is contained in:
eugene-sinitsyn 2020-03-12 17:41:53 +03:00 committed by Sergey Andrievskiy
parent a962c248a5
commit 64d6a5a23d
4 changed files with 49 additions and 5 deletions

View file

@ -25,7 +25,7 @@ $grid-breakpoints: (
xxxl: 1600px xxxl: 1600px
); );
$nb-enabled-themes: (ngx-landing, docs-page); $nb-enabled-themes: (ngx-landing, ngx-landing-material, docs-page);
/* stylelint-disable */ /* stylelint-disable */
$nb-themes: nb-register-theme(( $nb-themes: nb-register-theme((
@ -127,6 +127,30 @@ $nb-themes: nb-register-theme((
), ngx-landing, corporate); ), ngx-landing, corporate);
$nb-themes: nb-register-theme((
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)'),
header-shadow: unquote(
'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)'
),
shadow-default: shadow,
shadow-btn: shadow,
shadow-hover-btn: shadow,
shadow-active-btn: shadow,
shadow-hover-green-btn: shadow,
shadow-active-green-btn: shadow,
color-primary-default: #6200ee,
color-active-fg: color-primary-default,
color-active-bg: color-primary-default,
header-background-color: color-primary-default,
header-text-color: #ffffff !important,
menu-text-color: #ffffff !important,
footer-background-color: color-primary-default,
footer-text-color: #ffffff !important
), ngx-landing-material, ngx-landing);
/* stylelint-enable foo */ /* stylelint-enable foo */
$nb-themes: nb-register-theme(( $nb-themes: nb-register-theme((
// custom // custom

View file

@ -37,7 +37,7 @@
::ng-deep nb-layout-header { ::ng-deep nb-layout-header {
box-shadow: nb-theme(shadow-default); box-shadow: nb-theme(shadow-default);
background: nb-theme(header-bg); background: nb-theme(header-bg);
nav { ngx-landing-header {
max-width: calc(#{$content-width} - 8.125rem * 2); max-width: calc(#{$content-width} - 8.125rem * 2);
margin: 0 auto; margin: 0 auto;
} }
@ -48,9 +48,9 @@
background-color: nb-theme(color-white); background-color: nb-theme(color-white);
box-shadow: nb-theme(shadow-default); box-shadow: nb-theme(shadow-default);
nav { ngx-landing-footer {
max-width: $content-width; max-width: $content-width;
width: 100%; justify-content: space-evenly;
margin: 0 auto; margin: 0 auto;
} }
} }

View file

@ -0,0 +1,15 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
::ng-deep {
.version {
color: nb-theme(color-basic-500) !important;
}
ngx-landing-footer{
.h6, .copy {
color: #ffffff !important;
}
}
}
}

View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-material-landing', selector: 'ngx-material-landing',
@ -8,4 +9,8 @@ import { Component } from '@angular/core';
'../landing-home.component.scss' '../landing-home.component.scss'
] ]
}) })
export class MaterialLandingComponent {} export class MaterialLandingComponent {
constructor(private themeService: NbThemeService) {
this.themeService.changeTheme('ngx-landing-material');
}
}