diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 97c36472a280affd3b25ed0a31ecd304a8a7e839..fb1e59c57cbe06b3550f4e56316a77c5deb42447 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -133,8 +133,7 @@ .custom-select { display: inline-block; max-width: 100%; - $select-border-width: ($custom-select-border-width * 2); - height: calc(#{$input-height} + #{$select-border-width}); + height: $input-height; padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; line-height: $custom-select-line-height; color: $custom-select-color; diff --git a/scss/_forms.scss b/scss/_forms.scss index 55e8cb43a4916ff43a35de8cc552033d0fd980f4..805bd07437d9bb3502dd587f4ceb830250a8d7d2 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -62,8 +62,7 @@ select.form-control { &:not([size]):not([multiple]) { - $select-border-width: ($border-width * 2); - height: calc(#{$input-height} + #{$select-border-width}); + height: $input-height; } &:focus::-ms-value { @@ -161,8 +160,7 @@ select.form-control { select.form-control-sm { &:not([size]):not([multiple]) { - $select-border-width: ($border-width * 2); - height: calc(#{$input-height-sm} + #{$select-border-width}); + height: $input-height-sm; } } @@ -175,8 +173,7 @@ select.form-control-sm { select.form-control-lg { &:not([size]):not([multiple]) { - $select-border-width: ($border-width * 2); - height: calc(#{$input-height-lg} + #{$select-border-width}); + height: $input-height-lg; } } @@ -254,8 +251,8 @@ select.form-control-lg { .form-control-danger { padding-right: ($input-btn-padding-x * 3); background-repeat: no-repeat; - background-position: center right ($input-height / 4); - background-size: ($input-height / 2) ($input-height / 2); + background-position: center right ($input-height-inner / 4); + background-size: ($input-height-inner / 2) ($input-height-inner / 2); } // Form validation states diff --git a/scss/_variables.scss b/scss/_variables.scss index 3cde2bd04394f82bbadf8dea8cb1dab0926182b2..d59d8fb21c737c571ec18e43bd10e8c124401b98 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -412,9 +412,16 @@ $input-color-focus: $input-color !default; $input-color-placeholder: $gray-light !default; -$input-height: (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default; -$input-height-lg: (($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default; -$input-height-sm: (($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default; +$input-height-border: $input-btn-border-width * 2 !default; + +$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; +$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; + +$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; +$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; + +$input-height-inner-lg: ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; +$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; $input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; @@ -468,6 +475,7 @@ $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3C $custom-select-padding-y: .375rem !default; $custom-select-padding-x: .75rem !default; +$custom-select-height: $input-height !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator $custom-select-line-height: $input-btn-line-height !default; $custom-select-color: $input-color !default;