From 1ab65f433f0c60b67197299a64f7ddbeee13df06 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 5 Oct 2015 23:16:50 +0200
Subject: [PATCH] Changed datepicker style.

---
 src/assets/css/frontend.css | 44 +++++++++++++++++-----------------
 src/assets/css/general.css  | 47 +++++++++++++++++++++++++++----------
 2 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/src/assets/css/frontend.css b/src/assets/css/frontend.css
index 2c964227..cabff114 100644
--- a/src/assets/css/frontend.css
+++ b/src/assets/css/frontend.css
@@ -9,17 +9,17 @@
  * @since       v1.0.0
  * ---------------------------------------------------------------------------- */
 
-root { 
+root {
     display: block;
 }
 
 
-html, 
+html,
 body {
     height: 100%;
 }
 
-body {  
+body {
     background-color: #CAEDF3;
 }
 
@@ -46,12 +46,12 @@ body {
 
 #book-appointment-wizard #header {
     padding: 5px;
-    height: 80px;
+    height: 90px;
     background: #3DD481;
     border-bottom: 4px solid #1A865F;
 }
 
-#book-appointment-wizard #company-name { 
+#book-appointment-wizard #company-name {
     font-weight: bold;
     color: #FFF;
     font-size: 22px;
@@ -167,9 +167,9 @@ body {
 }
 
 #book-appointment-wizard #appointment-details p,
-#book-appointment-wizard #customer-details p { 
-    font-size: 16px; 
-    line-height: 28px; 
+#book-appointment-wizard #customer-details p {
+    font-size: 16px;
+    line-height: 28px;
 }
 
 #book-appointment-wizard #wizard-frame-1 label {
@@ -183,8 +183,8 @@ body {
 
 /* BOOK SUCCESS & MESSAGE
    ------------------------------------------------------------------------- */
-#message-frame, 
-#success-frame { 
+#message-frame,
+#success-frame {
     background: #FFF;
     border: 1px solid #DDDADA;
     padding: 70px;
@@ -201,7 +201,7 @@ body {
 }
 
 
-/* CANCEL APPOINTMENT 
+/* CANCEL APPOINTMENT
    ------------------------------------------------------------------------- */
 #cancel-appointment-frame {
     padding: 15px 0;
@@ -220,7 +220,7 @@ body {
     /**
      * BOOKING WIZARD
      */
-    html, 
+    html,
     body {
         min-height: 100%;
     }
@@ -240,17 +240,17 @@ body {
         height: auto;
     }
 
-    #book-appointment-wizard #company-name { 
+    #book-appointment-wizard #company-name {
         float: none;
         display: block;
-        text-align: center;    
+        text-align: center;
     }
 
-    #book-appointment-wizard #steps { 
-        float: none; 
+    #book-appointment-wizard #steps {
+        float: none;
         display: block;
-        overflow: auto; 
-        margin: 20px auto; 
+        overflow: auto;
+        margin: 20px auto;
     }
 
     #book-appointment-wizard .wizard-frame {
@@ -310,18 +310,18 @@ body {
     }
 
     .popover .popover-title {
-        text-align: center;   
+        text-align: center;
     }
 
     .popover .popover-content #language-list .language {
         margin: 10px 0;
     }
 
-    /** 
+    /**
      * BOOK SUCCESS
      */
     #message-frame,
-    #success-frame { 
+    #success-frame {
         text-align: center;
         height: 100%;
         border: none;
@@ -346,4 +346,4 @@ body {
     .ui-dialog .ui-dialog-title {
         font-size: 1.2em;
     }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/general.css b/src/assets/css/general.css
index 859d4723..e8d42452 100644
--- a/src/assets/css/general.css
+++ b/src/assets/css/general.css
@@ -45,36 +45,57 @@ body .ui-dialog .ui-dialog-buttonpane {
 }
 
 body .ui-datepicker {
-    border: 1px solid #EDEDED;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
+    border: 1px solid #3DD481;
+    border-radius: 2px;
+    padding: 0;
 }
 
 body .ui-datepicker .ui-widget-header {
     border: none;
-    border-top-left-radius: 4px !important;
-    border-top-right-radius: 4px !important;
+    background: #3DD481;
+}
+
+body .ui-datepicker th {
+    background: #3DD481;
+    color: #FFF;
+}
+
+body .ui-datepicker tbody tr:first-child td {
+    margin-top: 5px;
 }
 
 body .ui-datepicker td a,
 body .ui-datepicker td span {
-    border-radius: 2px;
+    border: none !important;
+    background: none !important;
+    color: #1A865F !important;
     text-align: center !important;
-    box-sizing: border-box;
+    width: 32px;
     height: 32px;
+    line-height: 2;
 }
 
-body .ui-datepicker td a.ui-state-active {
-    background: #80E1AC url("images/ui-bg_flat_65_80e1ac_40x100.png") 50% 50% repeat-x !important;
+html body .ui-datepicker td a.ui-state-active {
     color: #FFF !important;
     font-weight: bold !important;
-    border-bottom: 2px solid #33C073 !important;
-    box-shadow: inset 0 0px 3px #FFF;
+    background: #3DD481 !important;
+    border-radius: 50px;
 }
 
 body .ui-datepicker td a.ui-state-highlight {
-    border: none;
-    color: #E29656;
+    background: #80E3AD !important;
+    border-radius: 67px;
+    color: #FFF !important;
+}
+
+body .ui-datepicker .ui-datepicker-prev-hover {
+    top: 2px !important;
+    left: 2px !important;
+}
+
+body .ui-datepicker .ui-datepicker-next-hover {
+    top: 2px !important;
+    right: 2px !important;
 }
 
 .breaks tr:hover td {