fix(styling): fix some styling issues with input groups and Firefox (#…

…750)
ghiscoding · Aug 18, 2022 · 1aa849e · 1aa849e
1 parent ca5638c
commit 1aa849e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss
@@ -442,14 +442,26 @@ ul {
     overflow-y: var(--slick-frozen-overflow-right, $slick-frozen-overflow-right) !important;
   }
   .input-group {
+    display: flex;
+
     > :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-append,
+    .input-group-prepend {
+      display: inline-flex;
+      width: auto;
+    }
+
     .input-group-addon {
+      input {
+        flex: 1 1 auto;
+        width: 1%;
+      }
       .input-group-text {
         height: 100%;
       }

diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
@@ -68,6 +68,13 @@
   .flatpickr.input-group {
     height: var(--slick-date-editor-height, $slick-date-editor-height);
     .input-group-btn {
+      &.input-group-append {
+        .btn {
+          border-top-left-radius: 0px;
+          border-bottom-left-radius: 0px;
+          margin-left: -1px;
+        }
+      }
       .btn {
         background-color: #eeeeee;
         border: 1px solid #cccccc;

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -809,6 +809,12 @@ input.search-filter {
 // Date Picker Filter
 // ----------------------------------------------
 
+.search-filter.form-group {
+  .input-group.flatpickr  input.form-control {
+    border-bottom-left-radius: 0px;
+    border-top-left-radius: 0px;
+  }
+}
 .search-filter .flatpickr {
   input.form-control {
     border-left: none;