Add new .form-control-with-iconsform-controls-with-icons

2 files changed, 60 insertions, 3 deletions

diff --git a/scss/_variables.scss b/scss/_variables.scss
index bdf2d62a4..e6082f4a0 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -659,12 +659,15 @@ $input-height-inner:                    add($input-line-height * 1em, $input-pad
 $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
 $input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
 
-$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
-$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
-$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+$input-height:                          add($input-font-size * $line-height-base, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm:                       add($input-font-size-sm * $line-height-base, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg:                       add($input-font-size-lg * $line-height-base, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
+$input-with-icon-width:                 $input-height !default;
+$input-with-icon-width-sm:              $input-height-sm !default;
+$input-with-icon-width-lg:              $input-height-lg !default;
 
 $form-check-input-width:                  1em !default;
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 6686ecfb8..6c92e1a81 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -114,3 +114,57 @@
 .form-control-color::-webkit-color-swatch {
   @include border-radius($input-border-radius);
 }
+
+
+// With icons
+
+.form-control-with-icon {
+  position: relative;
+
+  .form-control,
+  .form-select,
+  .form-file-text {
+    padding-left: $input-with-icon-width;
+  }
+
+  .form-control-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $input-with-icon-width;
+    color: $input-placeholder-color;
+  }
+
+  .form-control-sm,
+  .form-select-sm,
+  .form-file-sm .form-file-text {
+    padding-left: $input-with-icon-width-sm;
+  }
+
+  .form-control-sm,
+  .form-select-sm,
+  .form-file-sm {
+    + .form-control-icon {
+      width: $input-with-icon-width-sm;
+    }
+  }
+
+  .form-control-lg,
+  .form-select-lg,
+  .form-file-lg .form-file-text {
+    padding-left: $input-with-icon-width-lg;
+  }
+
+  .form-control-lg,
+  .form-select-lg,
+  .form-file-lg {
+    + .form-control-icon {
+      width: $input-with-icon-width-lg;
+    }
+  }
+}