diff --git a/src/app/@theme/styles/material/_material-dark.scss b/src/app/@theme/styles/material/_material-dark.scss index 2febe2ba7b..b991f81bd3 100644 --- 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 index f7e8482139..fd033164c9 100644 --- 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 index b0adf3a23d..b3f1c92a10 100644 --- 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 @@ -
+
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.ts b/src/app/pages/forms/form-inputs/form-inputs.component.ts index 5ede35ff41..84d4ae1eb6 100644 --- 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; - + public materialTheme$: Observable; 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'); + })); + } }