feat(timepicker): remove inline styling, #2496 (#2812)

* feat(timepicker): remove inline styling, 2496

* replaced inline-styles to component-scoped styles

* refactor(timepicker): change css classes names

Author: LimarenkoDenis

src/timepicker/timepicker.component.html

@@ -32,8 +32,8 @@
   <tr>
     <!-- hours -->
     <td class="form-group" [class.has-error]="invalidHours">
-      <input type="text" style="width:50px;"
-             class="form-control text-center"
+      <input type="text"
+             class="form-control text-center bs-timepicker-field"
              placeholder="HH"
              maxlength="2"
              [readonly]="readonlyInput"
@@ -46,8 +46,8 @@
     <td>&nbsp;:&nbsp;</td>
     <!-- minutes -->
     <td class="form-group" [class.has-error]="invalidMinutes">
-      <input style="width:50px;" type="text"
-             class="form-control text-center"
+      <input type="text"
+             class="form-control text-center bs-timepicker-field"
              placeholder="MM"
              maxlength="2"
              [readonly]="readonlyInput"
@@ -62,8 +62,8 @@
     <!-- seconds -->
     <td class="form-group" *ngIf="showSeconds"
         [class.has-error]="invalidSeconds">
-      <input style="width:50px;" type="text"
-             class="form-control text-center"
+      <input type="text"
+             class="form-control text-center bs-timepicker-field"
              placeholder="SS"
              maxlength="2"
              [readonly]="readonlyInput"

src/timepicker/timepicker.component.ts

@@ -59,6 +59,9 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: any = {
       transform: rotate(-135deg);
       top: -2px;
     }
+    .bs-timepicker-field{
+      width: 50px;
+    }
   `],
   encapsulation: ViewEncapsulation.None
 })