From 55926852370e4ce8566e2cf8814af77748f803cb Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 23 Aug 2022 14:06:10 +0200
Subject: [PATCH] fix(forms): change top margin, font size/color of
 `.form-text` (#1442)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_forms.scss                          | 3 ++-
 scss/_variables.scss                      | 3 ++-
 site/content/docs/4.6/components/forms.md | 6 +++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index a5d481ec44..fc9c29b8b4 100644
--- a/scss/_forms.scss
+++ b/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
 }
 
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b52ec027f3..13130323f7 100644
--- a/scss/_variables.scss
+++ b/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;
diff --git a/site/content/docs/4.6/components/forms.md b/site/content/docs/4.6/components/forms.md
index 9fbed099d6..9de92b9e5c 100644
--- a/site/content/docs/4.6/components/forms.md
+++ b/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>