Fixed styles

powerhome · Jan 27, 2022 · 302dba7 · 302dba7
1 parent 0e008e8
commit 302dba7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.scss b/playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.scss
@@ -13,7 +13,6 @@
     @import "./sass_partials/day_styles";
     @import "./sass_partials/header_styles";
     @import "./sass_partials/overrides";
-    @import "./sass_partials/month_and_year_styles";
 
     .flatpickr-wrapper {
       display: block;

diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js b/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
@@ -160,8 +160,10 @@ const datePickerHelper = (config) => {
   }
 
   // Adding dropdown icons to year and month selects
-  // picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
-  // dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  if (picker.monthElements[0].parentElement) {
+    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
+  }
 
   // Remove readonly attribute for validation and or text input
   if (allowInput){

diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss b/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
@@ -1,3 +1,8 @@
+.numInput {
+  border-left: none !important;
+}
+
+// Manual Import
 .flatpickr-monthSelect-months {
   margin: 10px 1px 3px 1px;
   flex-wrap: wrap;
@@ -83,10 +88,10 @@
 .flatpickr-monthSelect-month.selected,
 .flatpickr-monthSelect-month.startRange,
 .flatpickr-monthSelect-month.endRange {
-  background-color: #569ff7;
+  background-color: $primary;
   box-shadow: none;
   color: #fff;
-  border-color: #569ff7;
+  border-color: $primary;
 }
 
 .flatpickr-monthSelect-month.startRange {