From 3ec5798e5cbada223101ba73d2b69aecdd53f501 Mon Sep 17 00:00:00 2001
From: Fetrarijaona R <fetrarij@gmail.com>
Date: Thu, 7 Feb 2019 11:34:09 +0300
Subject: [PATCH] fix(style): timepicker hided

---
 .../daterangepicker.component.html            | 106 +++++++++++-------
 .../daterangepicker.component.scss            |  43 +++++++
 2 files changed, 111 insertions(+), 38 deletions(-)

diff --git a/src/daterangepicker/daterangepicker.component.html b/src/daterangepicker/daterangepicker.component.html
index c070364f..3252bcc6 100644
--- a/src/daterangepicker/daterangepicker.component.html
+++ b/src/daterangepicker/daterangepicker.component.html
@@ -88,25 +88,39 @@
             </table>
         </div>
         <div class="calendar-time" *ngIf="timePicker">
-            <select class="hourselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedHour" (ngModelChange)="timeChanged($event, sideEnum.left)">
-                <option *ngFor="let i of timepickerVariables.left.hours"
-                [value]="i"
-                [disabled]="timepickerVariables.left.disabledHours.indexOf(i) > -1">{{i}}</option>
-            </select>
-            <select class="minuteselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedMinute" (ngModelChange)="timeChanged($event, sideEnum.left)">
-                <option *ngFor="let i of timepickerVariables.left.minutes; let index = index;"
-                [value]="i"
-                [disabled]="timepickerVariables.left.disabledMinutes.indexOf(i) > -1">{{timepickerVariables.left.minutesLabel[index]}}</option>
-            </select>
-            <select  *ngIf="timePickerSeconds" class="secondselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedSecond" (ngModelChange)="timeChanged($event, sideEnum.left)">
-                <option *ngFor="let i of timepickerVariables.left.seconds; let index = index;"
-                [value]="i"
-                [disabled]="timepickerVariables.left.disabledSeconds.indexOf(i) > -1">{{timepickerVariables.left.secondsLabel[index]}}</option>
-            </select>
-            <select *ngIf="!timePicker24Hour" class="ampmselect" [(ngModel)]="timepickerVariables.left.ampmModel" (ngModelChange)="timeChanged($event, sideEnum.left)">
-                <option value="AM" [disabled]="timepickerVariables.left.amDisabled">AM</option>
-                <option value="PM"  [disabled]="timepickerVariables.left.pmDisabled">PM</option>
-            </select>
+            <div class="select">
+                <select class="hourselect select-item" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedHour" (ngModelChange)="timeChanged($event, sideEnum.left)">
+                    <option *ngFor="let i of timepickerVariables.left.hours"
+                    [value]="i"
+                    [disabled]="timepickerVariables.left.disabledHours.indexOf(i) > -1">{{i}}</option>
+                </select>
+            </div>
+            <div class="select">
+                <select class="select-item minuteselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedMinute" (ngModelChange)="timeChanged($event, sideEnum.left)">
+                    <option *ngFor="let i of timepickerVariables.left.minutes; let index = index;"
+                    [value]="i"
+                    [disabled]="timepickerVariables.left.disabledMinutes.indexOf(i) > -1">{{timepickerVariables.left.minutesLabel[index]}}</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
+            <div class="select">
+                <select class="select-item secondselect" *ngIf="timePickerSeconds" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedSecond" (ngModelChange)="timeChanged($event, sideEnum.left)">
+                    <option *ngFor="let i of timepickerVariables.left.seconds; let index = index;"
+                    [value]="i"
+                    [disabled]="timepickerVariables.left.disabledSeconds.indexOf(i) > -1">{{timepickerVariables.left.secondsLabel[index]}}</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
+            <div class="select">
+                <select class="select-item ampmselect" *ngIf="!timePicker24Hour" [(ngModel)]="timepickerVariables.left.ampmModel" (ngModelChange)="timeChanged($event, sideEnum.left)">
+                    <option value="AM" [disabled]="timepickerVariables.left.amDisabled">AM</option>
+                    <option value="PM"  [disabled]="timepickerVariables.left.pmDisabled">PM</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
         </div>
     </div>
     <div class="calendar right"
@@ -179,25 +193,41 @@
             </table>
         </div>
         <div class="calendar-time" *ngIf="timePicker">
-            <select class="hourselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedHour" (ngModelChange)="timeChanged($event, sideEnum.right)">
-                <option *ngFor="let i of timepickerVariables.right.hours"
-                [value]="i"
-                [disabled]="timepickerVariables.right.disabledHours.indexOf(i) > -1">{{i}}</option>
-            </select>
-            <select class="minuteselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedMinute" (ngModelChange)="timeChanged($event, sideEnum.right)">
-                <option *ngFor="let i of timepickerVariables.right.minutes; let index = index;"
-                [value]="i"
-                [disabled]="timepickerVariables.right.disabledMinutes.indexOf(i) > -1">{{timepickerVariables.right.minutesLabel[index]}}</option>
-            </select>
-            <select *ngIf="timePickerSeconds" class="secondselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedSecond" (ngModelChange)="timeChanged($event, sideEnum.right)">
-                <option *ngFor="let i of timepickerVariables.right.seconds; let index = index;"
-                [value]="i"
-                [disabled]="timepickerVariables.right.disabledSeconds.indexOf(i) > -1">{{timepickerVariables.right.secondsLabel[index]}}</option>
-            </select>
-            <select *ngIf="!timePicker24Hour" class="ampmselect" [(ngModel)]="timepickerVariables.right.ampmModel" (ngModelChange)="timeChanged($event, sideEnum.right)">
-                <option value="AM" [disabled]="timepickerVariables.right.amDisabled">AM</option>
-                <option value="PM"  [disabled]="timepickerVariables.right.pmDisabled">PM</option>
-            </select>
+            <div class="select">
+                <select class="select-item hourselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedHour" (ngModelChange)="timeChanged($event, sideEnum.right)">
+                    <option *ngFor="let i of timepickerVariables.right.hours"
+                    [value]="i"
+                    [disabled]="timepickerVariables.right.disabledHours.indexOf(i) > -1">{{i}}</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
+            <div class="select">
+                <select class="select-item minuteselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedMinute" (ngModelChange)="timeChanged($event, sideEnum.right)">
+                    <option *ngFor="let i of timepickerVariables.right.minutes; let index = index;"
+                    [value]="i"
+                    [disabled]="timepickerVariables.right.disabledMinutes.indexOf(i) > -1">{{timepickerVariables.right.minutesLabel[index]}}</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
+            <div class="select">
+                <select *ngIf="timePickerSeconds" class="select-item secondselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedSecond" (ngModelChange)="timeChanged($event, sideEnum.right)">
+                    <option *ngFor="let i of timepickerVariables.right.seconds; let index = index;"
+                    [value]="i"
+                    [disabled]="timepickerVariables.right.disabledSeconds.indexOf(i) > -1">{{timepickerVariables.right.secondsLabel[index]}}</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
+            <div class="select">
+                <select *ngIf="!timePicker24Hour" class="select-item ampmselect" [(ngModel)]="timepickerVariables.right.ampmModel" (ngModelChange)="timeChanged($event, sideEnum.right)">
+                    <option value="AM" [disabled]="timepickerVariables.right.amDisabled">AM</option>
+                    <option value="PM"  [disabled]="timepickerVariables.right.pmDisabled">PM</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
         </div>
     </div>
     <div class="buttons" *ngIf="!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))">
diff --git a/src/daterangepicker/daterangepicker.component.scss b/src/daterangepicker/daterangepicker.component.scss
index c63135bd..8a685210 100644
--- a/src/daterangepicker/daterangepicker.component.scss
+++ b/src/daterangepicker/daterangepicker.component.scss
@@ -407,6 +407,49 @@ $input-height: 3rem !default;
     margin: 4px auto 0 auto;
     line-height: 30px;
     position: relative;
+    .select {
+      display: inline;
+      .select-item {
+        display: inline-block;
+        width: auto;
+        position: relative;
+        font-family: inherit;
+        background-color: transparent;
+        padding: 10px 10px 10px 0;
+        font-size: 18px;
+        border-radius: 0;
+        border: none;
+        border-bottom: 1px solid rgba(0,0,0, 0.12);
+        /* Remove focus */
+        &:after {
+          position: absolute;
+          top: 18px;
+          right: 10px;
+          /* Styling the down arrow */
+          width: 0;
+          height: 0;
+          padding: 0;
+          content: '';
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top: 6px solid rgba(0, 0, 0, 0.12);
+          pointer-events: none;
+        }
+        &:focus {
+          outline: none;
+        }
+        .select-label {
+          color: rgba(0,0,0, 0.26);
+          font-size: 16px;
+          font-weight: normal;
+          position: absolute;
+          pointer-events: none;
+          left: 0;
+          top: 10px;
+          transition: 0.2s ease all;
+        }
+      }
+    }
   }
   
   .calendar-time select.disabled {