From e35f116efc1989f675ef6e030d80a8a31a444373 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Mon, 4 Jan 2021 00:36:35 -0500
Subject: [PATCH] feat(styling): add support for Bootstrap 5 (#226)

* feat(styling): add support for Bootstrap 5
- Fix border-radius styling for `.headerrow` columns
- Ensure ui-slider maintains correct left margin
- handle changes to `.input-group` styling within Bootstrap
- Handle `.input-group` inner content height
- Appropriately size pagination (previous version was cutting off the bottom 6 pixels)
- Vertically align the pagination icons
---
 .../styles/_variables-theme-salesforce.scss   |  1 +
 packages/common/src/styles/_variables.scss    |  2 ++
 .../common/src/styles/slick-bootstrap.scss    | 30 ++++++++++++++++++-
 .../common/src/styles/slick-component.scss    |  3 +-
 packages/common/src/styles/slick-plugins.scss | 14 +++++++++
 5 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
index 785bb3d69..820a3b797 100644
--- a/packages/common/src/styles/_variables-theme-salesforce.scss
+++ b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -26,6 +26,7 @@ $cell-text-color:                               #080707 !default;
 $font-size-base-value:                          13 !default;
 $icon-font-size:                                18px !default;
 $icon-width:                                    18px !default;
+$frozen-border-bottom:                          1px solid #{$highlight-color} !default;
 $frozen-border-right:                           1px solid #{$highlight-color} !default;
 $group-totals-formatter-color:                  #666666 !default;
 $header-background-color:                       #fafaf9 !default;
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
index 7f2b7d4b9..d1f540437 100644
--- a/packages/common/src/styles/_variables.scss
+++ b/packages/common/src/styles/_variables.scss
@@ -805,8 +805,10 @@ $pagination-button-padding:                           6px 12px !default;
 $pagination-border-color:                             #ddd !default;
 $pagination-count-margin-left:                        2px !default;
 $pagination-font-size:                                calc(#{$font-size-base} - 1px) !default;
+$pagination-height:                                   40px !default;
 $pagination-icon-color:                               $primary-color !default;
 $pagination-icon-font-size:                           calc(#{$icon-font-size} - 1px) !default;
+$pagination-icon-line-height:                         calc(#{$icon-font-size} + 4px) !default;
 $pagination-icon-height:                              initial !default;
 $pagination-icon-seek-first:                          "\f100" !default;
 $pagination-icon-seek-end:                            "\f101" !default;
diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss
index 449bca54f..ad2ac831b 100644
--- a/packages/common/src/styles/slick-bootstrap.scss
+++ b/packages/common/src/styles/slick-bootstrap.scss
@@ -364,7 +364,7 @@
       }
       .slick-resizable-handle {
         width: 7px;
-        right: 0px;
+        right: 0;
         z-index: 1;
       }
       .slick-resizable-handle:hover {
@@ -430,4 +430,32 @@
   .slick-viewport-bottom.slick-viewport-right {
     overflow-y: $frozen-overflow-right !important;
   }
+  .input-group {
+    > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+      margin-left: 0;
+      &.ui-slider-horizontal {
+        margin-left: 10px;
+      }
+    }
+
+    .input-group-addon {
+      .input-group-text {
+        height: 100%;
+      }
+      &.input-group-append {
+        .input-group-text {
+          margin-left: -1px;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+      &.input-group-prepend {
+        .input-group-text {
+          margin-right: -1px;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+  }
 }
diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss
index 0f8761321..8ae6d25b7 100644
--- a/packages/common/src/styles/slick-component.scss
+++ b/packages/common/src/styles/slick-component.scss
@@ -67,7 +67,7 @@
   border-bottom: $pagination-border-bottom;
   border-left: $pagination-border-left;
   width: 100%;
-  height: 34px;
+  height: $pagination-height;
   padding-top: 4px;
   vertical-align: middle;
   font-family: $font-family;
@@ -130,6 +130,7 @@
             color: $pagination-icon-color;
             text-decoration: none;
             font-family: $icon-font-family;
+            line-height: $pagination-icon-line-height;
             -webkit-text-stroke: $pagination-icon-seek-text-stroke;
             padding: $pagination-button-padding;
         }
diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
index 8ab77b26d..d0cc57bbd 100644
--- a/packages/common/src/styles/slick-plugins.scss
+++ b/packages/common/src/styles/slick-plugins.scss
@@ -751,6 +751,20 @@ input.search-filter {
     border-left: none !important;
   }
 }
+.slickgrid-container {
+  .slick-headerrow {
+    .slick-headerrow-columns {
+      .slick-headerrow-column {
+        .input-group-prepend + .flatpickr {
+          input.compound-input {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}
 
 // ----------------------------------------------
 // Date Picker Filter