fix(b-form-datepicker, b-form-timepicker): adjust scss to support input-groups (#5231)

tmorehouse · web-flow · commit 7b1adc460f11 · 2020-04-23T15:53:27.000-03:00
Co-authored-by: Jacob M&uuml;ller
diff --git a/src/_custom-controls.scss b/src/_custom-controls.scss
@@ -38,6 +38,13 @@
   background-image: none;
   padding: 0;
 
+  @at-root {
+    // Handle input-group padding overrides
+    .input-group & {
+      padding: 0;
+    }
+  }
+
   @at-root {
     // Prevent the button/label from reversing order on in horizontal RTL mode
     [dir="rtl"] &,
@@ -78,6 +85,7 @@
     padding-left: 0.25rem;
     margin: 0;
     border: 0;
+    font-size: inherit;
     @if $enable-pointer-cursor-for-buttons {
       cursor: pointer;
     }
@@ -93,6 +101,21 @@
     &.form-control-lg {
       min-height: calc(#{$input-height-lg} - #{$input-height-border});
     }
+
+    @at-root {
+      // Handle input group sizing
+      .input-group.input-group-sm & {
+        min-height: calc(#{$input-height-sm} - #{$input-height-border});
+        padding-top: $input-padding-y-sm;
+        padding-bottom: $input-padding-y-sm
+      }
+
+      .input-group.input-group-lg & {
+        min-height: calc(#{$input-height-lg} - #{$input-height-border});
+        padding-top: $input-padding-y-lg;
+        padding-bottom: $input-padding-y-lg
+      }
+    }
   }
 
   // Disabled and read-only styling
