fix(styling): flatpickr bg-color should be using SASS variable (#616)

Author: ghiscoding

src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts

@@ -166,7 +166,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;

src/app/modules/angular-slickgrid/styles/slick-plugins.scss

@@ -755,30 +755,29 @@ 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] {
+    background-color: $flatpickr-bgcolor;
+  }
 }
 input.flatpickr-input.form-control,
 input.flatpickr.form-control {