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
);
$nb-enabled-themes: (ngx-landing, docs-page);
$nb-enabled-themes: (ngx-landing, ngx-landing-material, docs-page);
/* stylelint-disable */
$nb-themes: nb-register-theme((
@ -127,6 +127,30 @@ $nb-themes: nb-register-theme((
), 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 */
$nb-themes: nb-register-theme((
// custom

View file

@ -37,7 +37,7 @@
::ng-deep nb-layout-header {
box-shadow: nb-theme(shadow-default);
background: nb-theme(header-bg);
nav {
ngx-landing-header {
max-width: calc(#{$content-width} - 8.125rem * 2);
margin: 0 auto;
}
@ -48,9 +48,9 @@
background-color: nb-theme(color-white);
box-shadow: nb-theme(shadow-default);
nav {
ngx-landing-footer {
max-width: $content-width;
width: 100%;
justify-content: space-evenly;
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 { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-material-landing',
@ -8,4 +9,8 @@ import { Component } from '@angular/core';
'../landing-home.component.scss'
]
})
export class MaterialLandingComponent {}
export class MaterialLandingComponent {
constructor(private themeService: NbThemeService) {
this.themeService.changeTheme('ngx-landing-material');
}
}