Updated styles for Pikaday

8 files changed, 73 insertions, 172 deletions

diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6
index 5397b0aa345..ebf89c2d59b 100644
--- a/app/assets/javascripts/due_date_select.js.es6
+++ b/app/assets/javascripts/due_date_select.js.es6
@@ -27,7 +27,6 @@
       this.initGlDropdown();
       this.initRemoveDueDate();
       this.initDatePicker();
-      this.initStopPropagation();
     }
 
     initGlDropdown() {
@@ -48,8 +47,8 @@
 
       const calendar = new Pikaday({
         field: $dueDateInput.get(0),
+        theme: 'gitlab-theme',
         format: 'yyyy-mm-dd',
-        defaultDate: new Date($dueDateInput.val()),
         onSelect: (dateText) => {
           const formattedDate = dateFormat(new Date(dateText), 'yyyy-mm-dd');
 
@@ -64,6 +63,8 @@
         }
       });
 
+      calendar.setDate(new Date($dueDateInput.val()));
+
       this.$datePicker.append(calendar.el);
       this.$datePicker.data('pikaday', calendar);
     }
@@ -85,11 +86,6 @@
       });
     }
 
-    initStopPropagation() {
-      $(document).off('click', '.ui-datepicker-header a').on('click', '.ui-datepicker-header a', (e) => {
-        return e.stopImmediatePropagation();
-      });
-    }
 
     saveDueDate(isDropdown) {
       this.parseSelectedDate();
@@ -175,12 +171,13 @@
         const $datePicker = $(this);
         const calendar = new Pikaday({
           field: $datePicker.get(0),
+          theme: 'gitlab-theme',
           format: 'yyyy-mm-dd',
-          defaultDate: new Date($datePicker.val()),
           onSelect(dateText) {
             $datePicker.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
           }
         });
+        calendar.setDate(new Date($datePicker.val()));
 
         $datePicker.data('pikaday', calendar);
       });
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index 423a4e3e404..49fe9f48b7b 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -37,14 +37,15 @@
       this.initMoveDropdown();
       $issuableDueDate = $('#issuable-due-date');
       if ($issuableDueDate.length) {
-        new Pikaday({
+        var calendar = new Pikaday({
           field: $issuableDueDate.get(0),
+          theme: 'gitlab-theme',
           format: 'yyyy-mm-dd',
-          defaultDate: new Date($issuableDueDate.val()),
           onSelect: function(dateText) {
             $issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
           }
         });
+        calendar.setDate(new Date($issuableDueDate.val()));
       }
     }
 
diff --git a/app/assets/javascripts/member_expiration_date.js.es6 b/app/assets/javascripts/member_expiration_date.js.es6
index aad84cbeeba..6c3730b7acd 100644
--- a/app/assets/javascripts/member_expiration_date.js.es6
+++ b/app/assets/javascripts/member_expiration_date.js.es6
@@ -18,9 +18,9 @@
 
       const calendar = new Pikaday({
         field: $input.get(0),
+        theme: 'gitlab-theme',
         format: 'yyyy-mm-dd',
         minDate: new Date(),
-        defaultDate: new Date($input.val()),
         onSelect: (dateText) => {
           $input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
 
@@ -30,6 +30,8 @@
         },
       });
 
+      calendar.setDate(new Date($input.val()));
+
       $input.data('pikaday', calendar);
     });
 
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index 1d2d1bfc0d7..261179835d9 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -43,3 +43,56 @@
   float: right;
   font-size: 12px;
 }
+
+.pika-single.gitlab-theme {
+  .pika-label {
+    color: $gl-gray;
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  th {
+    padding: 2px 0;
+    color: $note-disabled-comment-color;
+    font-weight: normal;
+    text-transform: lowercase;
+    border-top: 1px solid $calendar-border-color;
+  }
+
+  abbr {
+    cursor: default;
+  }
+
+  td {
+    border: 1px solid $calendar-border-color;
+
+    &:first-child {
+      border-left: 0;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+
+  .pika-day {
+    border-radius: 0;
+    background-color: $white-light;
+    text-align: center;
+  }
+
+  .is-today {
+    .pika-day {
+      color: inherit;
+      font-weight: normal;
+    }
+  }
+
+  .is-selected .pika-day,
+  .pika-day:hover,
+  .is-today .pika-day:hover {
+    background: $gl-primary;
+    color: $white-light;
+    box-shadow: none;
+  }
+}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ca5861bf3e6..facfb7f9920 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -502,119 +502,16 @@
     max-height: 230px;
   }
 
-  .ui-widget {
-    table {
-      margin: 0;
-    }
-
-    &.ui-datepicker-inline {
-      padding: 0 10px;
-      border: 0;
-      width: 100%;
-    }
-
-    .ui-datepicker-header {
-      padding: 0 8px 10px;
-      border: 0;
-
-      .ui-icon {
-        background: none;
-        font-size: 20px;
-        text-indent: 0;
-
-        &::before {
-          display: block;
-          position: relative;
-          top: -2px;
-          color: $dropdown-title-btn-color;
-          font: normal normal normal 14px/1 FontAwesome;
-          font-size: inherit;
-          text-rendering: auto;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-        }
-      }
-    }
-
-    .ui-datepicker-calendar {
-      .ui-state-hover,
-      .ui-state-active {
-        color: $white-light;
-        border: 0;
-      }
-    }
-
-    .ui-datepicker-prev,
-    .ui-datepicker-next {
-      top: 0;
-      height: 15px;
-      cursor: pointer;
-
-      &:hover {
-        background-color: transparent;
-        border: 0;
-
-        .ui-icon::before {
-          color: $md-link-color;
-        }
-      }
-    }
-
-    .ui-datepicker-prev {
-      left: 0;
-
-      .ui-icon::before {
-        content: '\f104';
-        text-align: left;
-      }
-    }
-
-    .ui-datepicker-next {
-      right: 0;
-
-      .ui-icon::before {
-        content: '\f105';
-        text-align: right;
-      }
-    }
-
-    td {
-      padding: 0;
-      border: 1px solid $calendar-border-color;
-
-      &:first-child {
-        border-left: 0;
-      }
-
-      &:last-child {
-        border-right: 0;
-      }
-
-      a {
-        line-height: 17px;
-        border: 0;
-        border-radius: 0;
-      }
-    }
-
-    .ui-datepicker-title {
-      color: $gl-text-color;
-      font-size: 14px;
-      line-height: 1;
-      font-weight: normal;
-    }
-  }
-
-  th {
-    padding: 2px 0;
-    color: $note-disabled-comment-color;
-    font-weight: normal;
-    text-transform: lowercase;
-    border-top: 1px solid $calendar-border-color;
+  .pika-single {
+    position: relative!important;
+    top: 0!important;
+    border: 0;
+    box-shadow: none;
   }
 
-  .ui-datepicker-unselectable {
-    background-color: $gray-light;
+  .pika-lendar {
+    margin-top: -5px;
+    margin-bottom: 0;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss
index 18f2f316f02..317f9ff3c18 100644
--- a/app/assets/stylesheets/framework/jquery.scss
+++ b/app/assets/stylesheets/framework/jquery.scss
@@ -2,42 +2,6 @@
   font-family: $regular_font;
   font-size: $font-size-base;
 
-  &.ui-datepicker,
-  &.ui-datepicker-inline {
-    border: 1px solid $jq-ui-border;
-    padding: 10px;
-    width: 270px;
-
-    .ui-datepicker-header {
-      background: $white-light;
-      border-color: $jq-ui-border;
-
-      .ui-datepicker-prev,
-      .ui-datepicker-next {
-        top: 4px;
-      }
-
-      .ui-datepicker-prev {
-        left: 2px;
-      }
-
-      .ui-datepicker-next {
-        right: 2px;
-      }
-
-      .ui-state-hover {
-        background: transparent;
-        border: 0;
-        cursor: pointer;
-      }
-    }
-
-    .ui-datepicker-calendar td a {
-      padding: 5px;
-      text-align: center;
-    }
-  }
-
   &.ui-autocomplete {
     border-color: $jq-ui-border;
     padding: 0;
@@ -59,16 +23,6 @@
     border: 0;
     background: transparent;
   }
-
-  .ui-datepicker-calendar {
-    .ui-state-active,
-    .ui-state-hover,
-    .ui-state-focus {
-      border: 1px solid $gl-primary;
-      background: $gl-primary;
-      color: $white-light;
-    }
-  }
 }
 
 .ui-sortable-handle {
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 722b3006f7c..8031c4467a4 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -201,10 +201,6 @@
   color: $note-disabled-comment-color;
 }
 
-.datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
-  text-align: center;
-}
-
 .created-personal-access-token-container {
   #created-personal-access-token {
     width: 90%;
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index d002150e531..b10f5fc08e2 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -90,6 +90,7 @@
 
   new Pikaday({
     field: $dateField.get(0),
+    theme: 'gitlab-theme',
     format: 'yyyy-mm-dd',
     minDate: new Date(),
     onSelect: function(dateText) {