fix(forms): change top margin, font size/color of .form-text (#1442)

Co-authored-by: Julien Déramond <[email protected]>

scss/_forms.scss

@@ -205,7 +205,8 @@ textarea.form-control {
 
 .form-text {
   display: block;
-  margin-top: $form-text-margin-top;
+  margin: $form-text-margin-top 0 0; // Boosted mod
+  font-size: $form-text-font-size; // Boosted mod
 }
 
 

scss/_variables.scss

@@ -606,7 +606,8 @@ $input-height-lg:                       add($input-height-inner-lg, $input-heigh
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
-$form-text-margin-top:                  map-get($spacers, 2) !default;
+$form-text-margin-top:                  .25rem !default; // Boosted mod
+$form-text-font-size:                   $font-size-base !default; // Boosted mod
 
 $form-check-input-gutter:               $spacer !default;
 $form-check-input-margin-y:             .15rem !default;

site/content/docs/4.6/components/forms.md

@@ -19,7 +19,7 @@ Here's a quick example to demonstrate Boosted's form styles. Keep reading for do
   <div class="form-group">
     <label for="exampleInputEmail1">Email address</label>
     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+    <small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small>
   </div>
   <div class="form-group">
     <label for="exampleInputPassword1">Password</label>
@@ -488,7 +488,7 @@ Help text below inputs can be styled with `.form-text`. This class includes `dis
 {{< example >}}
 <label for="inputPassword5">Password</label>
 <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
-<small id="passwordHelpBlock" class="form-text text-muted">
+<small id="passwordHelpBlock" class="form-text">
   Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
 </small>
 {{< /example >}}
@@ -500,7 +500,7 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
   <div class="form-group">
     <label for="inputPassword6">Password</label>
     <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
-    <small id="passwordHelpInline" class="text-muted">
+    <small id="passwordHelpInline" class="form-text">
       Must be 8-20 characters long.
     </small>
   </div>