adding arrows styling (vlio20#114)

Author: vlio20

src/app/calendar-nav/calendar-nav.component.html

@@ -3,7 +3,7 @@
           class="dp-calendar-nav-left"
           [hidden]="!showLeftNav"
           [disabled]="leftNavDisabled"
-          (click)="leftNavClicked()"> <
+          (click)="leftNavClicked()">
   </button>
   <span class="dp-nav-header" [hidden]="isLabelClickable">{{label}}</span>
   <button type="button"
@@ -16,6 +16,6 @@
           class="dp-calendar-nav-right"
           [hidden]="!showRightNav"
           [disabled]="rightNavDisabled"
-          (click)="rightNavClicked()"> &gt;
+          (click)="rightNavClicked()">
   </button>
 </div>

src/app/calendar-nav/calendar-nav.component.less

@@ -21,14 +21,20 @@
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
+    .arrow(45deg);
+
+    &::before {
+      top: 1px;
+    }
   }
 
   .dp-calendar-nav-left {
-    left: 0;
+    .arrow(-135deg);
+    left: 5px;
   }
 
   .dp-calendar-nav-right {
-    right: 0;
+    right: 5px;
   }
 
   .dp-nav-header {
@@ -72,4 +78,4 @@
       }
     }
   }
-}
+}

src/app/common/styles/variables.less

@@ -5,4 +5,18 @@
 @c-primary: #106CC8;
 @c-light-gray: #E0E0E0;
 
-@basic-height: 30px;
+@basic-height: 30px;
+
+.arrow(@deg) {
+  &::before {
+    position: relative;
+    content: '';
+    display: inline-block;
+    height: 8px;
+    width: 8px;
+    vertical-align: baseline;
+    border-style: solid;
+    border-width: 2px 2px 0 0;
+    transform: rotate(@deg);
+  }
+}

src/app/time-select/time-select.component.less

@@ -14,7 +14,7 @@
     margin: 0 auto;
     vertical-align: middle;
     font-size: inherit;
-    letter-spacing: 1.3px;
+    letter-spacing: 1px;
   }
 
   .dp-time-select-control-up, .dp-time-select-control-down {
@@ -24,18 +24,7 @@
     height: 24px;
     margin: 3px auto;
     cursor: pointer;
-
-    &::before {
-      position: relative;
-      content: '';
-      display: inline-block;
-      height: 8px;
-      width: 8px;
-      left: -1px;
-      vertical-align: baseline;
-      border-style: solid;
-      border-width: 2px 2px 0 0;
-    }
+    .arrow(0deg)
   }
 
   .dp-time-select-control-up::before {