fix(styling): fix some Bootstrap 4 styling

ghiscoding · Aug 19, 2019 · ee4931c · ee4931c
1 parent be136be
commit ee4931c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/app/examples/grid-graphql.component.ts b/src/app/examples/grid-graphql.component.ts
@@ -11,7 +11,6 @@ import {
   GraphqlServiceOption,
   GridOption,
   GridStateChange,
-  JQueryUiSliderOption,
   MultipleSelectOption,
   OperatorType,
   SortDirection,

diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/src/app/modules/angular-slickgrid/styles/_variables.scss
@@ -289,14 +289,13 @@ $slider-range-filter-thumb-border-radius:   $slider-filter-thumb-border-radius !
 $slider-range-filter-thumb-cursor:          $slider-filter-thumb-cursor !default;
 $slider-range-filter-thumb-size:            $slider-filter-thumb-size !default;
 $slider-range-filter-thumb-top:             -5px !default;
-$slider-range-filter-thumb-margin-left:     -7px !default;
 $slider-range-filter-runnable-track-top:    45% !default;
 $slider-range-filter-runnable-track-height: $slider-filter-runnable-track-height !default;
 $slider-range-filter-bgcolor:               $slider-filter-bgcolor !default;
 $slider-range-filter-padding:               0 12px !default;
 $slider-range-filter-values-slider-width:   calc(98% - 16px) !default;
 $slider-range-filter-values-slider-top:     12px !default;
-$slider-range-filter-values-slider-ml:      10px;
+$slider-range-filter-values-slider-margin:  0 10px !default;
 
 /* Multiple-Select Filter */
 $multiselect-input-filter-border:         1px solid #ccc !default;

diff --git a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss
@@ -380,16 +380,18 @@ input.search-filter {
 // Date Picker Filter
 // ----------------------------------------------
 
-.search-filter.flatpickr {
+.search-filter .flatpickr {
   .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;
         }
@@ -492,6 +494,7 @@ input.slider-filter-input[type=range] {
   /*removes default webkit styles*/
   -webkit-appearance: none;
   height: $slider-filter-height;
+  flex: 1;
 
   padding: $slider-filter-runnable-track-padding;
 
@@ -618,6 +621,7 @@ input.slider-editor-input[type=range] {
 .slider-editor {
   .slider-value {
     padding: 0;
+    height: $header-input-height;
     .input-group-text {
       padding: $slider-editor-number-padding;
       font-size: $slider-filter-number-font-size;
@@ -631,7 +635,6 @@ input.slider-editor-input[type=range] {
 // ----------------------------------------------
 .slider-range-container {
   height: $slider-range-filter-height;
-  border: $slider-range-filter-border;
   padding: $slider-range-filter-padding;
 
   .ui-slider {
@@ -640,7 +643,6 @@ input.slider-editor-input[type=range] {
     .ui-slider-handle {
       position: absolute;
       top: $slider-range-filter-thumb-top;
-      margin-left: $slider-range-filter-thumb-margin-left;
       border-radius: $slider-range-filter-thumb-border-radius;
       cursor: $slider-range-filter-thumb-cursor;
       border: $slider-range-filter-thumb-border;
@@ -659,18 +661,23 @@ input.slider-editor-input[type=range] {
     height: $slider-range-filter-runnable-track-height;
     background-color: $slider-range-filter-bgcolor;
   }
+  .input-group-text {
+    border: 0;
 
+  }
 }
 .slider-range-container.slider-values {
   padding: 0;
   .ui-slider-horizontal {
+    flex: 1;
     width: $slider-range-filter-values-slider-width;
     top: $slider-range-filter-values-slider-top;
-    margin-left: $slider-range-filter-values-slider-ml;
+    margin: $slider-range-filter-values-slider-margin;
   }
   .slider-range-value {
     padding: 0;
     border: 0;
+    height: 100%;
     .input-group-text {
       padding: $slider-filter-number-padding;
       font-size: $slider-filter-number-font-size;