Fix `custom-forms` heights and position (#25602)

Now `.custom-control` will have height equal to `$font-size-base`
Fix custom checkbox and radio top position (we can't subtract rem from unit)
`$line-height-base - $custom-control-indicator-size` is not valid
Because `$line-height-base` is a unitless variable and `$custom-control-indicator-size`
is a unit (rem) variable

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 1311ba482c6dc94fea71215c81cec1da098ef7b9..f4e005a96245af48fb606629b5540116abc7094f 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -10,7 +10,7 @@
 .custom-control {
   position: relative;
   display: block;
-  min-height: (1rem * $line-height-base);
+  min-height: ($font-size-base * $line-height-base);
   padding-left: $custom-control-gutter;
 }
 
@@ -63,7 +63,7 @@
   // Background-color and (when enabled) gradient
   &::before {
     position: absolute;
-    top: (($line-height-base - $custom-control-indicator-size) / 2);
+    top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
     left: -$custom-control-gutter;
     display: block;
     width: $custom-control-indicator-size;
@@ -78,7 +78,7 @@
   // Foreground (icon)
   &::after {
     position: absolute;
-    top: (($line-height-base - $custom-control-indicator-size) / 2);
+    top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
     left: -$custom-control-gutter;
     display: block;
     width: $custom-control-indicator-size;