refactor: material input new look

* fix(form-inputs): show material inputs * feat(material): change inputs style
akveo · Jan 19, 2021 · 3c33fca · 3c33fca
1 parent 9d68344
commit 3c33fca
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/src/app/@theme/styles/material/_material-dark.scss b/src/app/@theme/styles/material/_material-dark.scss
@@ -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,

diff --git a/src/app/@theme/styles/material/_material-light.scss b/src/app/@theme/styles/material/_material-light.scss
@@ -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,

diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html
@@ -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>

diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.ts b/src/app/pages/forms/form-inputs/form-inputs.component.ts
@@ -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');
+    }));
+  }
 }