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
ghiscoding · Jan 4, 2021 · e35f116 · e35f116
1 parent bf3610f
commit e35f116
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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