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

refactor: material input new look

Browse source 
* fix(form-inputs): show material inputs
* feat(material): change inputs style
This commit is contained in:
Evgeny Lupanov 2020-04-03 18:48:48 +03:00 • committed by Sergey Andrievskiy
parent c887318acd
commit 8f0a950bcc
4 changed files with 32 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -396,7 +396,7 @@ $theme: (
card-background-color: color-basic-800, card-background-color: color-basic-800,
card-divider-color: color-basic-700, card-divider-color: color-basic-700,
input-border-width: 0 0 1px 0, input-border-width: 1px,
input-basic-border-color: rgba(255, 255, 255, 0.7), input-basic-border-color: rgba(255, 255, 255, 0.7),
input-basic-focus-border-color: color-primary-focus, input-basic-focus-border-color: color-primary-focus,
input-basic-disabled-border-color: input-basic-border-color, input-basic-disabled-border-color: input-basic-border-color,
@ -405,9 +405,14 @@ $theme: (
input-basic-focus-background-color: transparent, input-basic-focus-background-color: transparent,
input-basic-disabled-background-color: transparent, input-basic-disabled-background-color: transparent,
input-basic-hover-background-color: transparent, input-basic-hover-background-color: transparent,
input-rectangle-border-radius: 0, input-rectangle-border-radius: 0.25rem,
input-semi-round-border-radius: 0, input-semi-round-border-radius: 0.25rem,
input-round-border-radius: 0, input-round-border-radius: 0.25rem,
input-medium-padding: 0.75rem 1rem,
input-large-padding: 1rem 1rem,
input-small-text-font-weight: text-paragraph-font-weight,
input-medium-text-font-weight: text-paragraph-font-weight,
input-large-text-font-weight: text-paragraph-font-weight,
input-primary-background-color: input-basic-background-color, input-primary-background-color: input-basic-background-color,
input-primary-focus-background-color: input-basic-focus-background-color, input-primary-focus-background-color: input-basic-focus-background-color,
input-primary-disabled-background-color: input-basic-disabled-background-color, input-primary-disabled-background-color: input-basic-disabled-background-color,

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

@ -392,7 +392,7 @@ $theme: (
card-border-style: none, card-border-style: none,
card-divider-color: color-basic-200, card-divider-color: color-basic-200,
input-border-width: 0 0 1px 0, input-border-width: 1px,
input-basic-border-color: rgba(0, 0, 0, 0.42), input-basic-border-color: rgba(0, 0, 0, 0.42),
input-basic-focus-border-color: color-primary-focus, input-basic-focus-border-color: color-primary-focus,
input-basic-disabled-border-color: rgba(0, 0, 0, 0.42), input-basic-disabled-border-color: rgba(0, 0, 0, 0.42),
@ -401,9 +401,14 @@ $theme: (
input-basic-focus-background-color: transparent, input-basic-focus-background-color: transparent,
input-basic-disabled-background-color: transparent, input-basic-disabled-background-color: transparent,
input-basic-hover-background-color: transparent, input-basic-hover-background-color: transparent,
input-rectangle-border-radius: 0, input-rectangle-border-radius: 0.25rem,
input-semi-round-border-radius: 0, input-semi-round-border-radius: 0.25rem,
input-round-border-radius: 0, input-round-border-radius: 0.25rem,
input-medium-padding: 0.75rem 1rem,
input-large-padding: 1rem 1rem,
input-small-text-font-weight: text-paragraph-font-weight,
input-medium-text-font-weight: text-paragraph-font-weight,
input-large-text-font-weight: text-paragraph-font-weight,
input-primary-background-color: input-basic-background-color, input-primary-background-color: input-basic-background-color,
input-primary-focus-background-color: input-basic-focus-background-color, input-primary-focus-background-color: input-basic-focus-background-color,
input-primary-disabled-background-color: input-basic-disabled-background-color, input-primary-disabled-background-color: input-basic-disabled-background-color,

2
src/app/pages/forms/form-inputs/form-inputs.component.html
View file

@ -87,7 +87,7 @@
</nb-card> </nb-card>
</div> </div>
</div> </div>
<div *ngIf="materialTheme$ | async" class="row"> <div *ngIf="showMaterialInputs" class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<ngx-material-inputs></ngx-material-inputs> <ngx-material-inputs></ngx-material-inputs>
</div> </div>

23
src/app/pages/forms/form-inputs/form-inputs.component.ts
View file

@ -1,25 +1,28 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { NbThemeService } from '@nebular/theme'; import { NbThemeService } from '@nebular/theme';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'; import { tap } from 'rxjs/operators';
@Component({ @Component({
selector: 'ngx-form-inputs', selector: 'ngx-form-inputs',
styleUrls: ['./form-inputs.component.scss'], styleUrls: ['./form-inputs.component.scss'],
templateUrl: './form-inputs.component.html', templateUrl: './form-inputs.component.html',
}) })
export class FormInputsComponent { export class FormInputsComponent implements OnInit {
public constructor(private readonly themeService: NbThemeService) { public constructor(private readonly themeService: NbThemeService) {
this.materialTheme$ = this.themeService.onThemeChange()
.pipe(map(theme => {
const themeName: string = theme?.name || '';
return themeName.startsWith('material');
}));
} }
public readonly materialTheme$: Observable<boolean>; public materialTheme$: Observable<boolean>;
public starRate: number = 2; public starRate: number = 2;
public heartRate: number = 4; public heartRate: number = 4;
public radioGroupValue: string = 'This is value 2'; public radioGroupValue: string = 'This is value 2';
public showMaterialInputs = false;
ngOnInit() {
this.materialTheme$ = this.themeService.onThemeChange()
.pipe(tap(theme => {
const themeName: string = theme?.name || '';
this.showMaterialInputs = themeName.startsWith('material');
}));
}
} }