feat(datepicker): Eva style (#1366)

BREAKING CHANGE: Following theme properties were renamed: datepicker-fg -> datepicker-text-color datepicker-bg -> datepicker-background-color datepicker-border -> datepicker-border-color datepicker-border-radius -> datepicker-border-radius
akveo · May 27, 2019 · d0c28a0 · d0c28a0
1 parent 8c16fc4
commit d0c28a0
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 77 deletions.
diff --git a/src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss b/src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss
@@ -9,19 +9,19 @@
     $arrow-size: nb-theme(datepicker-arrow-size);
     $arrow-content-size: calc(#{$arrow-size} - 2px);
 
-    border: 2px solid nb-theme(datepicker-border);
+    border: 2px solid nb-theme(datepicker-border-color);
     border-radius: nb-theme(datepicker-border-radius);
-    background: nb-theme(datepicker-bg);
+    background: nb-theme(datepicker-background-color);
     box-shadow: nb-theme(datepicker-shadow);
 
     .primitive-overlay {
-      color: nb-theme(datepicker-fg);
+      color: nb-theme(datepicker-text-color);
     }
 
     .arrow {
       border-left: $arrow-size solid transparent;
       border-right: $arrow-size solid transparent;
-      border-bottom: $arrow-size solid nb-theme(datepicker-border);
+      border-bottom: $arrow-size solid nb-theme(datepicker-border-color);
 
 
       &::after {
@@ -33,7 +33,7 @@
         left: calc(50% - #{$arrow-content-size});
         border-left: $arrow-content-size solid transparent;
         border-right: $arrow-content-size solid transparent;
-        border-bottom: $arrow-content-size solid nb-theme(datepicker-bg);
+        border-bottom: $arrow-content-size solid nb-theme(datepicker-background-color);
       }
     }
 

diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
@@ -1365,12 +1365,12 @@ $theme: (
   select-option-disabled-opacity: 0.3,
   select-option-padding: 0.75rem 1.5rem,
 
-  datepicker-fg: color-fg-heading,
-  datepicker-bg: color-bg,
-  datepicker-border: color-success,
-  datepicker-border-radius: radius,
+  datepicker-text-color: text-dark-color,
+  datepicker-background-color: color-white,
+  datepicker-border-color: color-primary,
+  datepicker-border-radius: 0.75rem,
   datepicker-shadow: none,
-  datepicker-arrow-size: 11px,
+  datepicker-arrow-size: 0.6875rem,
 
   radio-width: 1.125rem,
   radio-height: 1.125rem,

diff --git a/src/playground/with-layout/datepicker/datepicker-example.scss b/src/playground/with-layout/datepicker/datepicker-example.scss
@@ -0,0 +1,31 @@
+nb-card-body {
+  text-align: center;
+}
+
+input {
+  width: 100%;
+}
+
+input:nth-of-type(2) {
+  margin-top: 1rem;
+}
+
+@media screen and (min-width: 31em) {
+  input {
+    width: 21.875rem;
+  }
+
+  .two-inputs input {
+    width: calc(50% - 0.5rem);
+  }
+  .two-inputs input:last-of-type {
+    margin-top: 0;
+    margin-left: 1rem;
+  }
+}
+
+@media screen and (min-width: 50.25em) {
+  .two-inputs input {
+    width: 21.875rem;
+  }
+}
diff --git a/src/playground/with-layout/datepicker/datepicker-forms.component.ts b/src/playground/with-layout/datepicker/datepicker-forms.component.ts
@@ -11,26 +11,17 @@ import { FormControl } from '@angular/forms';
 @Component({
   selector: 'nb-datepicker-forms',
   template: `
-    <div>
-      <input nbInput placeholder="Form Picker" [nbDatepicker]="formcontrol" [formControl]="formControl">
-      <nb-datepicker #formcontrol></nb-datepicker>
+    <nb-card size="large">
+      <nb-card-body class="two-inputs">
+        <input nbInput placeholder="Form Picker" [nbDatepicker]="formcontrol" [formControl]="formControl">
+        <nb-datepicker #formcontrol></nb-datepicker>
 
-      <input nbInput placeholder="Form Picker" [nbDatepicker]="ngmodel" [(ngModel)]="ngModelDate">
-      <nb-datepicker #ngmodel></nb-datepicker>
-    </div>
+        <input nbInput placeholder="Form Picker" [nbDatepicker]="ngmodel" [(ngModel)]="ngModelDate">
+        <nb-datepicker #ngmodel></nb-datepicker>
+      </nb-card-body>
+    </nb-card>
   `,
-  styles: [`
-    :host {
-      display: flex;
-      justify-content: center;
-      align-content: center;
-      height: 40rem;
-    }
-
-    :host input {
-      width: 21.875rem;
-    }
-  `],
+  styleUrls: ['./datepicker-example.scss'],
 })
 export class DatepickerFormsComponent {
   formControl = new FormControl(new Date());

diff --git a/src/playground/with-layout/datepicker/datepicker-showcase.component.ts b/src/playground/with-layout/datepicker/datepicker-showcase.component.ts
@@ -10,23 +10,14 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-datepicker-showcase',
   template: `
-    <div>
-      <input nbInput placeholder="Form Picker" [nbDatepicker]="formpicker">
-      <nb-datepicker #formpicker></nb-datepicker>
-    </div>
+    <nb-card size="large">
+      <nb-card-body>
+        <input nbInput placeholder="Form Picker" [nbDatepicker]="formpicker">
+        <nb-datepicker #formpicker></nb-datepicker>
+      </nb-card-body>
+    </nb-card>
   `,
-  styles: [`
-    :host {
-      display: flex;
-      justify-content: center;
-      align-content: center;
-      height: 40rem;
-    }
-
-    :host input {
-      width: 21.875rem;
-    }
-  `],
+  styleUrls: ['./datepicker-example.scss'],
 })
 export class DatepickerShowcaseComponent {
 }
diff --git a/src/playground/with-layout/datepicker/datepicker-validation.component.ts b/src/playground/with-layout/datepicker/datepicker-validation.component.ts
@@ -11,23 +11,14 @@ import { NbDateService } from '@nebular/theme';
 @Component({
   selector: 'nb-datepicker-validation',
   template: `
-    <div>
-      <input nbInput placeholder="Form Picker" [nbDatepicker]="picker">
-      <nb-datepicker #picker [min]="min" [max]="max"></nb-datepicker>
-    </div>
+    <nb-card size="large">
+      <nb-card-body>
+        <input nbInput placeholder="Form Picker" [nbDatepicker]="picker">
+        <nb-datepicker #picker [min]="min" [max]="max"></nb-datepicker>
+      </nb-card-body>
+    </nb-card>
   `,
-  styles: [`
-    :host {
-      display: flex;
-      justify-content: center;
-      align-content: center;
-      height: 40rem;
-    }
-
-    :host input {
-      width: 21.875rem;
-    }
-  `],
+  styleUrls: ['./datepicker-example.scss'],
 })
 export class DatepickerValidationComponent {
   min: Date;

diff --git a/src/playground/with-layout/datepicker/datepicker.module.ts b/src/playground/with-layout/datepicker/datepicker.module.ts
@@ -6,7 +6,7 @@
 
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NbDatepickerModule, NbInputModule } from '@nebular/theme';
+import { NbCardModule, NbDatepickerModule, NbInputModule } from '@nebular/theme';
 import { DatepickerRoutingModule } from './datepicker-routing.module';
 import { DatepickerFormsComponent } from './datepicker-forms.component';
 import { DatepickerShowcaseComponent } from './datepicker-showcase.component';
@@ -26,6 +26,7 @@ import { RangepickerShowcaseComponent } from './rangepicker-showcase.component';
     NbDatepickerModule.forRoot(),
     NbInputModule,
     DatepickerRoutingModule,
+    NbCardModule,
   ],
 })
 export class DatepickerModule {}
diff --git a/src/playground/with-layout/datepicker/rangepicker-showcase.component.ts b/src/playground/with-layout/datepicker/rangepicker-showcase.component.ts
@@ -10,23 +10,14 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-rangepicker-showcase',
   template: `
-    <div>
-      <input nbInput placeholder="Form Picker" [nbDatepicker]="formpicker">
-      <nb-rangepicker #formpicker></nb-rangepicker>
-    </div>
+    <nb-card size="large">
+      <nb-card-body>
+        <input nbInput placeholder="Form Picker" [nbDatepicker]="formpicker">
+        <nb-rangepicker #formpicker></nb-rangepicker>
+      </nb-card-body>
+    </nb-card>
   `,
-  styles: [`
-    :host {
-      display: flex;
-      justify-content: center;
-      align-content: center;
-      height: 40rem;
-    }
-
-    :host input {
-      width: 21.875rem;
-    }
-  `],
+  styleUrls: ['./datepicker-example.scss'],
 })
 export class RangepickerShowcaseComponent {
 }