feat(search): Eva theme (#1419)

BREAKING CHANGE: Following theme properties renamed: search-bg -> search-background-color search-bg-secondary -> search-extra-background-color search-text -> search-text-color search-info -> search-info-text-color search-dash -> search-divider-color search-placeholder -> search-placeholder-text-color Following theme properties removed: search-btn-open-fg search-btn-close-fg
akveo · May 27, 2019 · a7e582f · a7e582f
1 parent 54da610
commit a7e582f
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 43 deletions.
diff --git a/src/framework/theme/components/search/_search.component.theme.scss b/src/framework/theme/components/search/_search.component.theme.scss
@@ -9,22 +9,26 @@
  nb-search-field {
 
  .search {
- background: nb-theme(search-bg);
-
- button {
- color: nb-theme(search-btn-close-fg);
- }
-
- span {
- color: nb-theme(search-info);
+ background: nb-theme(search-background-color);
+
+ span.info {
+ color: nb-theme(search-info-text-color);
+  font-family: nb-theme(search-info-text-font-family);
+ font-size: nb-theme(search-info-text-font-size);
+  font-weight: nb-theme(search-info-text-font-weight);
+ line-height: nb-theme(search-info-text-line-height);
  }
 
  input {
- color: nb-theme(search-text);
- border-bottom: 4px solid nb-theme(search-dash);
+ border-bottom: nb-theme(search-divider-width) nb-theme(search-divider-style) nb-theme(search-divider-color);
+ color: nb-theme(search-text-color);
+ font-family: nb-theme(search-text-font-family);
+ font-size: nb-theme(search-text-font-size);
+ font-weight: nb-theme(search-text-font-weight);
+ line-height: nb-theme(search-text-line-height);
 
  &::placeholder {
- color: nb-theme(search-placeholder);
+ color: nb-theme(search-placeholder-text-color);
  }
 
  &::-ms-clear {
@@ -35,60 +39,54 @@
 
  &.rotate-layout {
  opacity: 0;
- background: nb-theme(search-bg);
+ background: nb-theme(search-background-color);
  }
 
  &.modal-zoomin {
  .search::before,
  .search::after {
- border: 1.5rem solid nb-theme(search-bg-secondary);
+ border: 1.5rem solid nb-theme(search-extra-background-color);
  }
 
  }
 
- &.modal-half {
- .form-wrapper {
- background: nb-theme(search-bg);
- }
+ &.modal-half {
+ .form-wrapper {
+ background: nb-theme(search-background-color);
+ }
  .search::before {
- background: nb-theme(search-bg-secondary);
+ background: nb-theme(search-extra-background-color);
  }
  }
 
  &.modal-drop {
  .form-content::after {
- background: nb-theme(search-dash);
+ background: nb-theme(search-divider-color);
  }
  .search::before {
- background: nb-theme(search-bg);
+ background: nb-theme(search-background-color);
  }
  }
 
  &.curtain {
  .search::after {
- background: nb-theme(search-bg);
+ background: nb-theme(search-background-color);
  }
  .search {
- background: nb-theme(search-bg);
+ background: nb-theme(search-background-color);
  }
  }
 
- &.column-curtain {
+ &.column-curtain {
  &::before {
- background: nb-theme(search-bg);
+ background: nb-theme(search-background-color);
  }
  &::after {
  background: transparent;
  }
  &.show::after {
- background: nb-theme(search-bg-secondary);
+ background: nb-theme(search-extra-background-color);
  }
- }
- }
-
- nb-search {
- button {
- color: nb-theme(search-btn-open-fg);
  }
  }
 }
diff --git a/src/framework/theme/components/search/search.component.ts b/src/framework/theme/components/search/search.component.ts
@@ -47,7 +47,7 @@ import { NbOverlayService, NbOverlayRef, NbPortalDirective } from '../cdk';
  ],
  template: `
  <div class="search" (keyup.esc)="emitClose()">
- <button (click)="emitClose()">
+ <button (click)="emitClose()" nbButton ghost>
  <nb-icon icon="close-outline" pack="nebular-essentials"></nb-icon>
  </button>
  <div class="form-wrapper">
@@ -162,6 +162,9 @@ export class NbSearchFieldComponent implements OnChanges, AfterViewInit {
  }
 }
 
+export type NbSearchType = 'modal-zoomin' | 'rotate-layout' | 'modal-move' |
+ 'curtain' | 'column-curtain' | 'modal-drop' | 'modal-half';
+
 /**
  * Beautiful full-page search control.
  *
@@ -209,7 +212,7 @@ export class NbSearchFieldComponent implements OnChanges, AfterViewInit {
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['styles/search.component.scss'],
  template: `
- <button #searchButton class="start-search" (click)="emitActivate()">
+ <button #searchButton class="start-search" (click)="emitActivate()" nbButton ghost>
  <nb-icon icon="search-outline" pack="nebular-essentials"></nb-icon>
  </button>
  <nb-search-field
@@ -256,10 +259,10 @@ export class NbSearchComponent implements OnInit, OnDestroy {
  * modal-zoomin, rotate-layout, modal-move, curtain, column-curtain, modal-drop, modal-half
  * @type {string}
  */
- @Input() type: string;
+ @Input() type: NbSearchType;
 
  @ViewChild(NbPortalDirective) searchFieldPortal: NbPortalDirective;
- @ViewChild('searchButton') searchButton: ElementRef<HTMLElement>;
+ @ViewChild('searchButton', { read: ElementRef }) searchButton: ElementRef<HTMLElement>;
 
  constructor(
  private searchService: NbSearchService,

diff --git a/src/framework/theme/components/search/search.module.ts b/src/framework/theme/components/search/search.module.ts
@@ -8,6 +8,7 @@ import { NgModule } from '@angular/core';
 import { NbSharedModule } from '../shared/shared.module';
 import { NbOverlayModule } from '../cdk/overlay/overlay.module';
 import { NbIconModule } from '../icon/icon.module';
+import { NbButtonModule } from '../button/button.module';
 
 import { NbSearchComponent, NbSearchFieldComponent } from './search.component';
 import { NbSearchService } from './search.service';
@@ -18,6 +19,7 @@ import { NbSearchService } from './search.service';
  NbSharedModule,
  NbOverlayModule,
  NbIconModule,
+ NbButtonModule,
  ],
  declarations: [
  NbSearchComponent,

diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
@@ -203,6 +203,11 @@ $theme: (
  font-family-primary: unquote('Open Sans, sans-serif'),
  font-family-secondary: unquote('Raleway, sans-serif'),
 
+ text-heading-1-font-family: font-family-secondary,
+ text-heading-1-font-size: 4.5rem,
+ text-heading-1-font-weight: 800,
+ text-heading-1-line-height: 5rem,
+
  text-heading-6-font-family: font-family-secondary,
  text-heading-6-font-size: 1.25rem,
  text-heading-6-font-weight: 800,
@@ -600,14 +605,22 @@ $theme: (
  actions-giant-padding: 0 1.25rem,
  actions-giant-text-font-size: text-button-giant-font-size,
 
- search-btn-open-fg: color-fg,
- search-btn-close-fg: color-fg,
- search-bg: layout-bg,
- search-bg-secondary: color-fg,
- search-text: color-fg-heading,
- search-info: color-fg,
- search-dash: color-fg,
- search-placeholder: color-fg,
+ search-background-color: color-basic-100,
+ search-divider-color: divider-color,
+ search-divider-style: solid,
+ search-divider-width: 0.25rem,
+ search-extra-background-color: color-primary,
+ search-text-color: text-dark-color,
+ search-text-font-family: text-heading-1-font-family,
+ search-text-font-size: text-heading-1-font-size,
+ search-text-font-weight: text-heading-1-font-weight,
+ search-text-line-height: text-heading-1-line-height,
+ search-placeholder-text-color: text-hint-color,
+ search-info-text-color: text-hint-color,
+ search-info-text-font-family: text-subtitle-font-family,
+ search-info-text-font-size: text-subtitle-font-size,
+ search-info-text-font-weight: text-subtitle-font-weight,
+ search-info-text-line-height: text-subtitle-line-height,
 
  smart-table-header-font-family: font-secondary,
  smart-table-header-font-size: font-size,