Make sign up form styling more similar to how Bootstrap 3 used to be

diff --git a/css/bootstrap/_custom-forms.scss b/css/bootstrap/_custom-forms.scss
index b3db8c4..c1b99a2 100644 (file)
--- a/css/bootstrap/_custom-forms.scss
+++ b/css/bootstrap/_custom-forms.scss
@@ -74,6 +74,7 @@
 // Build the custom controls out of pseudo-elements.
 
 .custom-control-label {
+  font-weight: $label-font-weight; // Nick
   position: relative;
   margin-bottom: 0;
   color: $custom-control-label-color;

diff --git a/css/bootstrap/_forms.scss b/css/bootstrap/_forms.scss
index cde4663..a23625c 100644 (file)
--- a/css/bootstrap/_forms.scss
+++ b/css/bootstrap/_forms.scss
@@ -92,6 +92,11 @@ select.form-control {
 // Labels
 //
 
+// Nick
+.form-label {
+  font-weight: $label-font-weight;
+}
+ 
 // For use with horizontal and inline forms, when you need the label (or legend)
 // text to align with the form controls.
 .col-form-label {
@@ -233,6 +238,7 @@ textarea.form-control {
 }
 
 .form-check-label {
+  font-weight: $label-font-weight; // Nick
   margin-bottom: 0; // Override default `<label>` bottom margin
 }
 

diff --git a/css/bootstrap/_variables.scss b/css/bootstrap/_variables.scss
index 1afb0e0..c7649aa 100644 (file)
--- a/css/bootstrap/_variables.scss
+++ b/css/bootstrap/_variables.scss
@@ -392,7 +392,7 @@ $input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
 
 $input-btn-focus-width:       .2rem !default;
-$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
+$input-btn-focus-color:       rgba(darken($component-active-bg, 10%), .25) !default; //rgba($component-active-bg, .25) !default;
 $input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
 
 $input-btn-padding-y-sm:      .25rem !default;
@@ -452,6 +452,7 @@ $btn-transition:              color .15s ease-in-out, background-color .15s ease
 
 // Forms
 
+$label-font-weight:                     $font-weight-bold !default; // Nick
 $label-margin-bottom:                   .5rem !default;
 
 $input-padding-y:                       $input-btn-padding-y !default;
@@ -474,7 +475,7 @@ $input-line-height-lg:                  $input-btn-line-height-lg !default;
 $input-bg:                              $white !default;
 $input-disabled-bg:                     $gray-200 !default;
 
-$input-color:                           $gray-700 !default;
+$input-color:                           $black !default; //$gray-700 !default;
 $input-border-color:                    $gray-400 !default;
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
@@ -484,7 +485,7 @@ $input-border-radius-lg:                $border-radius-lg !default;
 $input-border-radius-sm:                $border-radius-sm !default;
 
 $input-focus-bg:                        $input-bg !default;
-$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
+$input-focus-border-color:              $gray-600 !default; //lighten($component-active-bg, 25%) !default;
 $input-focus-color:                     $input-color !default;
 $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst
index 3d1b76a..6be661d 100644 (file)
--- a/my_account/sign_up/index.html.jst
+++ b/my_account/sign_up/index.html.jst
@@ -17,13 +17,13 @@ return async env => {
       div.row {
         div.col-md-6 {
           div.form-group {
-            label(for="given-names") {'Given names *'}
+            label.form-label(for="given-names") {'Given names *'}
             input.form-control#given-names(type="text" placeholder="Your given names" required="required" maxlength=256) {}
           }
         }
         div.col-md-6 {
           div.form-group {
-            label(for="family-name") {'Family name'}
+            label.form-label(for="family-name") {'Family name'}
             input.form-control#family-name(type="text" placeholder="Your family name" maxlength=256) {}
           }
         }
@@ -31,23 +31,23 @@ return async env => {
       div.row {
         div.col-md-6 {
           div.form-group {
-            label(for="email") {'Email *'}
+            label.form-label(for="email") {'Email *'}
             input.form-control#email(type="email" placeholder="Your email address" required="required" maxlength=256) {}
           }
         }
         div.col-md-6 {
           div.form-group {
-            label(for="password") {'Password *'}
+            label.form-label(for="password") {'Password *'}
             input.form-control#password(type="password" placeholder="New password" required="required" minlength=8 maxlength=256) {}
           }
         }
       }
       div.row {
         div.col-md-12 {
-          div.form-check {
-            input.form-check-input#contact-me(type="checkbox" checked="checked") {}
+          div.custom-control.custom-checkbox {
+            input.custom-control-input#contact-me(type="checkbox" checked="checked") {}
             ' '
-            label.form-check-label(for="contact-me") {
+            label.custom-control-label(for="contact-me") {
               'Contact me by email with updates and special offers'
             }
           }
@@ -56,7 +56,7 @@ return async env => {
       div.row.align-items-center {
         div.'col-md-6' {
           div.form-group {
-            label(for="verification-code") {'Verification code *'}
+            label.form-label(for="verification-code") {'Verification code *'}
             input.form-control#verification-code(type="text" placeholder="Type the code shown to the right" required="required" minlength=6 maxlength=6) {}
           }
         }