diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_variables.scss | 9 | ||||
| -rw-r--r-- | scss/forms/_form-control.scss | 54 |
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; + } + } +} |