fix(review)

scss/_variables.scss

@@ -1012,7 +1012,7 @@ $input-height-inner-half:               $spacer !default; // Boosted mod
 $input-height-inner-quarter:            map-get($spacers, 2) !default; // Boosted mod
 
 $input-height:                          2.5rem !default;
-$input-height-sm:                       2rem !default;
+$input-height-sm:                       1.875rem !default;
 $input-height-lg:                       3.125rem !default;
 $input-line-height-lg:                  $h5-line-height !default; // Boosted mod
 
@@ -1132,7 +1132,7 @@ $form-select-box-shadow:          $box-shadow-inset !default;
 $form-select-focus-border-color:  $input-color !default; // Boosted mod: for border to show in Firefox
 $form-select-focus-box-shadow:    null !default;
 
-$form-select-padding-y-sm:        $input-padding-y-sm !default;
+$form-select-padding-y-sm:        add($input-padding-y-sm, 1px) !default; // Boosted mod
 $form-select-padding-x-sm:        $input-padding-x-sm !default;
 $form-select-font-size-sm:        $input-font-size-sm !default;
 $form-select-border-radius-sm:    $input-border-radius-sm !default;

scss/forms/_form-control.scss

@@ -138,12 +138,13 @@
 .form-control-sm {
   min-height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm add($input-padding-y-sm, 1px); // Boosted mod
+  line-height: $line-height-sm; // Boosted mod
   @include font-size($input-font-size-sm);
   @include border-radius($input-border-radius-sm);
 
   &::file-selector-button {
     padding: add($input-padding-y-sm, 1px) $input-padding-x-sm add($input-padding-y-sm, 3px); // Boosted mod
-    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+    margin: add(-$input-padding-y-sm, -1px) (-$input-padding-x-sm) add(-$input-padding-y-sm, -3px); // Boosted mod
     margin-inline-end: $input-padding-x-sm;
   }
 }

scss/forms/_form-select.scss

@@ -56,15 +56,16 @@
 }
 
 .form-select-sm {
-  padding-top: $form-select-padding-y-sm;
+  padding-top: subtract($form-select-padding-y-sm, 1px); // Boosted mod
   padding-bottom: add($form-select-padding-y-sm, 1px); // Boosted mod
   padding-left: $form-select-padding-x-sm;
   @include font-size($form-select-font-size-sm);
   @include border-radius($form-select-border-radius-sm);
+  line-height: $line-height-sm; // Boosted mod
 }
 
 .form-select-lg {
-  padding-top: $form-select-padding-y-lg;
+  padding-top: subtract($form-select-padding-y-lg, 1px); // Boosted mod
   padding-bottom: $form-select-padding-y-lg;
   padding-left: $form-select-padding-x-lg;
   @include font-size($form-select-font-size-lg);

scss/forms/_input-group.scss

@@ -70,6 +70,7 @@
 .input-group-lg > .input-group-text,
 .input-group-lg > .btn {
   padding: $input-padding-y-lg $input-padding-x-lg;
+  line-height: $h5-line-height; // Boosted mod
   @include font-size($input-font-size-lg);
   @include border-radius($input-border-radius-lg);
 }
@@ -79,6 +80,7 @@
 .input-group-sm > .input-group-text,
 .input-group-sm > .btn {
   padding: $input-padding-y-sm $input-padding-x-sm;
+  line-height: $line-height-sm; // Boosted mod
   @include font-size($input-font-size-sm);
   @include border-radius($input-border-radius-sm);
 }

scss/forms/_labels.scss

@@ -42,4 +42,8 @@
   @include font-size($input-font-size-lg);
 }
 
-// Boosted mod: no .col-form-label-sm
+.col-form-label-sm {
+  padding-top: add($input-padding-y-sm, $input-border-width);
+  padding-bottom: add($input-padding-y-sm, $input-border-width);
+  @include font-size($input-font-size-sm);
+}

site/content/docs/5.2/forms/form-control.md

@@ -25,10 +25,10 @@ toc: true
 
 Set heights using classes like `.form-control-lg`.
 
-<!-- Boosted mod: no .form-control-sm -->
 {{< example >}}
 <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
 <input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
+<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
 {{< /example >}}
 
 ## Disabled
@@ -98,6 +98,10 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
   <label for="formFileDisabled" class="form-label">Disabled file input example</label>
   <input class="form-control" type="file" id="formFileDisabled" disabled>
 </div>
+<div class="mb-3">
+  <label for="formFileSm" class="form-label">Small file input example</label>
+  <input class="form-control form-control-sm" id="formFileSm" type="file">
+</div>
 <div>
   <label for="formFileLg" class="form-label">Large file input example</label>
   <input class="form-control form-control-lg" id="formFileLg" type="file">

site/content/docs/5.2/forms/layout.md

@@ -176,6 +176,12 @@ Be sure to use `.col-form-label-lg` to your `<label>`s or `<legend>`s to correct
 
 <!-- Boosted mod: no .col-form-label-sm -->
 {{< example >}}
+<div class="row mb-3">
+  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
+  <div class="col-sm-10">
+    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
+  </div>
+</div>
 <div class="row mb-3">
   <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
   <div class="col-sm-10">

site/content/docs/5.2/forms/select.md

@@ -25,14 +25,19 @@ Custom `<select>` menus need only a custom class, `.form-select` to trigger the
 
 You may also use large custom selects to match our similarly sized text inputs.
 
-<!-- Boosted mod: no .form-select-sm -->
 {{< example >}}
 <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
+<select class="form-select form-select-sm" aria-label=".form-select-sm example">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
 {{< /example >}}
 
 The `multiple` attribute is also supported: