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

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 Maksim Karatkevich
parent 9dcac96871
commit b4b07f7e82
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-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-focus-border-color: color-primary-focus,
input-basic-disabled-border-color: input-basic-border-color,
@ -405,9 +405,14 @@ $theme: (
input-basic-focus-background-color: transparent,
input-basic-disabled-background-color: transparent,
input-basic-hover-background-color: transparent,
input-rectangle-border-radius: 0,
input-semi-round-border-radius: 0,
input-round-border-radius: 0,
input-rectangle-border-radius: 0.25rem,
input-semi-round-border-radius: 0.25rem,
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-focus-background-color: input-basic-focus-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-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-focus-border-color: color-primary-focus,
input-basic-disabled-border-color: rgba(0, 0, 0, 0.42),
@ -401,9 +401,14 @@ $theme: (
input-basic-focus-background-color: transparent,
input-basic-disabled-background-color: transparent,
input-basic-hover-background-color: transparent,
input-rectangle-border-radius: 0,
input-semi-round-border-radius: 0,
input-round-border-radius: 0,
input-rectangle-border-radius: 0.25rem,
input-semi-round-border-radius: 0.25rem,
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-focus-background-color: input-basic-focus-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>
</div>
</div>
<div *ngIf="materialTheme$ | async" class="row">
<div *ngIf="showMaterialInputs" class="row">
<div class="col-lg-12">
<ngx-material-inputs></ngx-material-inputs>
</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 { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { tap } from 'rxjs/operators';
@Component({
selector: 'ngx-form-inputs',
styleUrls: ['./form-inputs.component.scss'],
templateUrl: './form-inputs.component.html',
})
export class FormInputsComponent {
export class FormInputsComponent implements OnInit {
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 heartRate: number = 4;
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');
}));
}
}