From 33dc40dc4411d33e5ce6be51b7585f8e0f34cdd3 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Wed, 28 Oct 2020 22:50:13 -0400
Subject: [PATCH] fix(styling): flatpickr bg-color should be using SASS
 variable (#449)

---
 .../filters/dateRangeFilter.ts                |  2 +-
 .../styles/slick-plugins.scss                 | 36 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/aurelia-slickgrid/filters/dateRangeFilter.ts b/src/aurelia-slickgrid/filters/dateRangeFilter.ts
index ea917e13a..331a47480 100644
--- a/src/aurelia-slickgrid/filters/dateRangeFilter.ts
+++ b/src/aurelia-slickgrid/filters/dateRangeFilter.ts
@@ -163,7 +163,7 @@ export class DateRangeFilter implements Filter {
   // private functions
   // ------------------
   private buildDatePickerInput(searchTerms?: SearchTerm | SearchTerm[]) {
-    const columnId = this.columnDef && this.columnDef.id;
+    const columnId = this.columnDef && this.columnDef.id || '';
     const inputFormat = mapFlatpickrDateFormatWithFieldType(this.columnFilter.type || this.columnDef.type || FieldType.dateIso);
     const outputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.outputType || this.columnFilter.type || this.columnDef.type || FieldType.dateUtc);
     const userFilterOptions = (this.columnFilter && this.columnFilter.filterOptions || {}) as FlatpickrOption;
diff --git a/src/aurelia-slickgrid/styles/slick-plugins.scss b/src/aurelia-slickgrid/styles/slick-plugins.scss
index 8278ce711..165656187 100644
--- a/src/aurelia-slickgrid/styles/slick-plugins.scss
+++ b/src/aurelia-slickgrid/styles/slick-plugins.scss
@@ -755,30 +755,30 @@ input.search-filter {
 
 .search-filter .flatpickr {
   input.form-control {
-    cursor: pointer;
     border-left: none;
   }
+}
+.search-filter.flatpickr,
+.search-filter .flatpickr {
+  flex: 1;
+  cursor: pointer;
 
-  .flatpickr {
-    flex: 1;
-    cursor: pointer;
-
-    input.flatpickr.form-control,
-    .flatpickr-input.form-control {
-      background-color: $flatpickr-bgcolor;
-      font-family: $filter-placeholder-font-family;
-      font-size: $font-size-base;
-      border-radius: $compound-filter-border-radius;
-      width: 100%;
-      &[readonly] {
-        background-color: $flatpickr-bgcolor;
-      }
-    }
-    .form-control[readonly],
-    .flatpickr.form-control[readonly] {
+  input.flatpickr.form-control,
+  .flatpickr-input.form-control {
+    background-color: $flatpickr-bgcolor;
+    font-family: $filter-placeholder-font-family;
+    font-size: $font-size-base;
+    border-radius: $compound-filter-border-radius;
+    width: 100%;
+    &[readonly] {
       background-color: $flatpickr-bgcolor;
     }
   }
+  .form-control[readonly],
+  .flatpickr.form-control[readonly] {
+    cursor: pointer;
+    background-color: $flatpickr-bgcolor;
+  }
 }
 input.flatpickr-input.form-control,
 input.flatpickr.form-control {