Merge pull request #14 from koleary94/alt-input-style

alt input style and design tweaks
kevinoleary19 · Sep 13, 2016 · fc4729f · fc4729f
2 parents 1addaa1 + 9d17347
commit fc4729f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/lib/datepicker.component.css b/lib/datepicker.component.css
@@ -1,5 +1,6 @@
 .datepicker {
   position: relative;
+  display: inline-block;
   color: #2b2b2b;
   font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Calibri', 'Roboto';
 }
@@ -11,6 +12,7 @@
   height: 24.25em;
   width: 20.5em;
   z-index: 1000;
+  background-color: #ffffff;
   color: #333333;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   cursor: default;
@@ -110,9 +112,7 @@
 
 .datepicker__input {
   font-size: 14px;
-  color: #2b2b2b;
   outline: none;
-  border: 1px solid #dadada;
   border-radius: 0.1rem;
   padding: .2em .6em;
 }

diff --git a/lib/datepicker.component.js b/lib/datepicker.component.js
diff --git a/lib/datepicker.component.js.map b/lib/datepicker.component.js.map
diff --git a/lib/datepicker.component.ts b/lib/datepicker.component.ts
@@ -11,6 +11,9 @@ import { Calendar } from './calendar.js';
     >
       <input
         class="datepicker__input"
+        [ngStyle]="{'color': altInputStyle ? colors['white'] : colors['black'],
+                    'background-color': altInputStyle ? accentColor : colors['white'],
+                    'border': altInputStyle ? '' : 'border: 1px solid #dadada'}"
         (click)="onInputClick()"
         [(ngModel)]="inputText"
         readonly="true"
@@ -103,6 +106,7 @@ import { Calendar } from './calendar.js';
 export class DatepickerComponent implements OnInit {
   // api bindings
   @Input() accentColor: string;
+  @Input() altInputStyle: boolean;
   @Input() date: Date;
   @Input() fontFamily: string;
   @Input() rangeStart: Date;
@@ -133,9 +137,10 @@ export class DatepickerComponent implements OnInit {
       'black': '#333333',
       'blue': '#1285bf',
       'lightGrey': '#f1f1f1',
-      'white': '#fff'
-    }
+      'white': '#ffffff'
+    };
     this.accentColor = this.colors['blue'];
+    this.altInputStyle = false;
     // time
     this.calendar = new Calendar();
     this.dayNames = [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ];