enhanced custom forms

- removed box-shadow from custom form element #2200
- updated pages/forms/general.html (splited general and custom elements)
- fixed focus on custom switch & range

build/scss/_bootstrap-variables.scss

@@ -490,7 +490,7 @@ $custom-select-border-color:        $input-border-color !default;
 $custom-select-border-radius:       $border-radius !default;
 
 $custom-select-focus-border-color:  $input-focus-border-color !default;
-$custom-select-focus-box-shadow:    inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
+$custom-select-focus-box-shadow:    none !default;
 
 $custom-select-font-size-sm:        75% !default;
 $custom-select-height-sm:           $input-height-sm !default;
@@ -500,7 +500,7 @@ $custom-select-height-lg:           $input-height-lg !default;
 
 $custom-file-height:                $input-height !default;
 $custom-file-focus-border-color:    $input-focus-border-color !default;
-$custom-file-focus-box-shadow:      $input-btn-focus-box-shadow !default;
+$custom-file-focus-box-shadow:      $custom-select-focus-box-shadow !default;
 
 $custom-file-padding-y:             $input-btn-padding-y !default;
 $custom-file-padding-x:             $input-btn-padding-x !default;
@@ -510,7 +510,7 @@ $custom-file-bg:                    $input-bg !default;
 $custom-file-border-width:          $input-btn-border-width !default;
 $custom-file-border-color:          $input-border-color !default;
 $custom-file-border-radius:         $input-border-radius !default;
-$custom-file-box-shadow:            $input-box-shadow !default;
+$custom-file-box-shadow:            $custom-select-focus-box-shadow !default;
 $custom-file-button-color:          $custom-file-color !default;
 $custom-file-button-bg:             $input-group-addon-bg !default;
 $custom-file-text: (

build/scss/_mixins.scss

@@ -362,6 +362,10 @@
       border-color: darken($color, 20%);
     }
 
+    & .custom-control-input:focus ~ .custom-control-label::before {
+      box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+    }
+
     & .custom-control-input ~ .custom-control-label::after {
       background: darken($color, 25%);
     }
@@ -373,6 +377,10 @@
       border-color: darken($color, 20%);
     }
 
+    & .custom-control-input:checked:focus ~ .custom-control-label::before {
+      box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+    }
+
     & .custom-control-input:checked ~ .custom-control-label::after {
       background: lighten($color, 30%);
     }
@@ -386,15 +394,15 @@
       outline: none;
 
       &::-webkit-slider-thumb {
-        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
       }
 
       &::-moz-range-thumb     {
-        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
       }
 
       &::-ms-thumb            {
-        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
       }
     }
 

pages/forms/general.html

@@ -826,11 +826,6 @@
               <!-- /.card-body -->
             </div>
             <!-- /.card -->
-
-          </div>
-          <!--/.col (left) -->
-          <!-- right column -->
-          <div class="col-md-6">
             <!-- Horizontal Form -->
             <div class="card card-info">
               <div class="card-header">
@@ -870,6 +865,11 @@
               </form>
             </div>
             <!-- /.card -->
+
+          </div>
+          <!--/.col (left) -->
+          <!-- right column -->
+          <div class="col-md-6">
             <!-- general form elements disabled -->
             <div class="card card-warning">
               <div class="card-header">
@@ -878,24 +878,35 @@
               <!-- /.card-header -->
               <div class="card-body">
                 <form role="form">
-                  <!-- text input -->
-                  <div class="form-group">
-                    <label>Text</label>
-                    <input type="text" class="form-control" placeholder="Enter ...">
-                  </div>
-                  <div class="form-group">
-                    <label>Text Disabled</label>
-                    <input type="text" class="form-control" placeholder="Enter ..." disabled>
-                  </div>
-
-                  <!-- textarea -->
-                  <div class="form-group">
-                    <label>Textarea</label>
-                    <textarea class="form-control" rows="3" placeholder="Enter ..."></textarea>
+                  <div class="row">
+                    <div class="col-sm-6">
+                      <!-- text input -->
+                      <div class="form-group">
+                        <label>Text</label>
+                        <input type="text" class="form-control" placeholder="Enter ...">
+                      </div>
+                    </div>
+                    <div class="col-sm-6">
+                      <div class="form-group">
+                        <label>Text Disabled</label>
+                        <input type="text" class="form-control" placeholder="Enter ..." disabled>
+                      </div>
+                    </div>
                   </div>
-                  <div class="form-group">
-                    <label>Textarea Disabled</label>
-                    <textarea class="form-control" rows="3" placeholder="Enter ..." disabled></textarea>
+                  <div class="row">
+                    <div class="col-sm-6">
+                      <!-- textarea -->
+                      <div class="form-group">
+                        <label>Textarea</label>
+                        <textarea class="form-control" rows="3" placeholder="Enter ..."></textarea>
+                      </div>
+                    </div>
+                    <div class="col-sm-6">
+                      <div class="form-group">
+                        <label>Textarea Disabled</label>
+                        <textarea class="form-control" rows="3" placeholder="Enter ..." disabled></textarea>
+                      </div>
+                    </div>
                   </div>
 
                   <!-- input states -->
@@ -915,105 +926,243 @@
                     <input type="text" class="form-control is-invalid" id="inputError" placeholder="Enter ...">
                   </div>
 
-                  <!-- checkbox -->
-                  <div class="form-group">
-                    <div class="form-check">
-                      <input class="form-check-input" type="checkbox" value="option1">
-                      <label class="form-check-label">Checkbox</label>
-                    </div>
-
-                    <div class="form-check">
-                      <input class="form-check-input" type="checkbox" value="option1" disabled>
-                      <label class="form-check-label">Checkbox disabled</label>
+                  <div class="row">
+                    <div class="col-sm-6">
+                      <!-- checkbox -->
+                      <div class="form-group">
+                        <div class="form-check">
+                          <input class="form-check-input" type="checkbox">
+                          <label class="form-check-label">Checkbox</label>
+                        </div>
+                        <div class="form-check">
+                          <input class="form-check-input" type="checkbox" checked>
+                          <label class="form-check-label">Checkbox checked</label>
+                        </div>
+                        <div class="form-check">
+                          <input class="form-check-input" type="checkbox" disabled>
+                          <label class="form-check-label">Checkbox disabled</label>
+                        </div>
+                      </div>
+                    </div> 
+                    <div class="col-sm-6">
+                      <!-- radio -->
+                      <div class="form-group">
+                        <div class="form-check">
+                          <input class="form-check-input" type="radio" name="radio1">
+                          <label class="form-check-label">Radio</label>
+                        </div>
+                        <div class="form-check">
+                          <input class="form-check-input" type="radio" name="radio1" checked>
+                          <label class="form-check-label">Radio checked</label>
+                        </div>
+                        <div class="form-check">
+                          <input class="form-check-input" type="radio" disabled>
+                          <label class="form-check-label">Radio disabled</label>
+                        </div>
+                      </div>
                     </div>
                   </div>
 
-                  <!-- radio -->
-                  <div class="form-group">
-                    <div class="form-check">
-                      <input class="form-check-input" type="radio" value="option1">
-                      <label class="form-check-label">Radio</label>
+                  <div class="row">
+                    <div class="col-sm-6">
+                      <!-- select -->
+                      <div class="form-group">
+                        <label>Select</label>
+                        <select class="form-control">
+                          <option>option 1</option>
+                          <option>option 2</option>
+                          <option>option 3</option>
+                          <option>option 4</option>
+                          <option>option 5</option>
+                        </select>
+                      </div>
                     </div>
-                    <div class="form-check">
-                      <input class="form-check-input" type="radio" value="option1" disabled>
-                      <label class="form-check-label">Radio disabled</label>
+                    <div class="col-sm-6">
+                      <div class="form-group">
+                        <label>Select Disabled</label>
+                        <select class="form-control" disabled>
+                          <option>option 1</option>
+                          <option>option 2</option>
+                          <option>option 3</option>
+                          <option>option 4</option>
+                          <option>option 5</option>
+                        </select>
+                      </div>
                     </div>
                   </div>
 
-                  <!-- select -->
-                  <div class="form-group">
-                    <label>Select</label>
-                    <select class="form-control">
-                      <option>option 1</option>
-                      <option>option 2</option>
-                      <option>option 3</option>
-                      <option>option 4</option>
-                      <option>option 5</option>
-                    </select>
+                  <div class="row">
+                    <div class="col-sm-6">
+                      <!-- Select multiple-->
+                      <div class="form-group">
+                        <label>Select Multiple</label>
+                        <select multiple class="form-control">
+                          <option>option 1</option>
+                          <option>option 2</option>
+                          <option>option 3</option>
+                          <option>option 4</option>
+                          <option>option 5</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class="col-sm-6">
+                      <div class="form-group">
+                        <label>Select Multiple Disabled</label>
+                        <select multiple class="form-control" disabled>
+                          <option>option 1</option>
+                          <option>option 2</option>
+                          <option>option 3</option>
+                          <option>option 4</option>
+                          <option>option 5</option>
+                        </select>
+                      </div>
+                    </div>
                   </div>
-                  <div class="form-group">
-                    <label>Select Disabled</label>
-                    <select class="form-control" disabled>
-                      <option>option 1</option>
-                      <option>option 2</option>
-                      <option>option 3</option>
-                      <option>option 4</option>
-                      <option>option 5</option>
-                    </select>
+                </form>
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+            <!-- general form elements disabled -->
+            <div class="card card-secondary">
+              <div class="card-header">
+                <h3 class="card-title">Custom Elements</h3>
+              </div>
+              <!-- /.card-header -->
+              <div class="card-body">
+                <form role="form">
+                  <div class="row">
+                    <div class="col-sm-6">
+                      <!-- checkbox -->
+                      <div class="form-group">
+                        <div class="custom-control custom-checkbox">
+                          <input class="custom-control-input" type="checkbox" id="customCheckbox1" value="option1">
+                          <label for="customCheckbox1" class="custom-control-label">Custom Checkbox</label>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                          <input class="custom-control-input" type="checkbox" id="customCheckbox2" checked>
+                          <label for="customCheckbox2" class="custom-control-label">Custom Checkbox checked</label>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                          <input class="custom-control-input" type="checkbox" id="customCheckbox3" disabled>
+                          <label for="customCheckbox3" class="custom-control-label">Custom Checkbox disabled</label>
+                        </div>
+                      </div>
+                    </div> 
+                    <div class="col-sm-6">
+                      <!-- radio -->
+                      <div class="form-group">
+                        <div class="custom-control custom-radio">
+                          <input class="custom-control-input" type="radio" id="customRadio1" name="customRadio">
+                          <label for="customRadio1" class="custom-control-label">Custom Radio</label>
+                        </div>
+                        <div class="custom-control custom-radio">
+                          <input class="custom-control-input" type="radio" id="customRadio2" name="customRadio" checked>
+                          <label for="customRadio2" class="custom-control-label">Custom Radio checked</label>
+                        </div>
+                        <div class="custom-control custom-radio">
+                          <input class="custom-control-input" type="radio" id="customRadio3" disabled>
+                          <label for="customRadio3" class="custom-control-label">Custom Radio disabled</label>
+                        </div>
+                      </div>
+                    </div>
                   </div>
 
-                  <!-- Select multiple-->
-                  <div class="form-group">
-                    <label>Select Multiple</label>
-                    <select multiple class="form-control">
-                      <option>option 1</option>
-                      <option>option 2</option>
-                      <option>option 3</option>
-                      <option>option 4</option>
-                      <option>option 5</option>
-                    </select>
+                  <div class="row">
+                    <div class="col-sm-6">
+                      <!-- select -->
+                      <div class="form-group">
+                        <label>Custom Select</label>
+                        <select class="custom-select">
+                          <option>option 1</option>
+                          <option>option 2</option>
+                          <option>option 3</option>
+                          <option>option 4</option>
+                          <option>option 5</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class="col-sm-6">
+                      <div class="form-group">
+                        <label>Custom Select Disabled</label>
+                        <select class="custom-select" disabled>
+                          <option>option 1</option>
+                          <option>option 2</option>
+                          <option>option 3</option>
+                          <option>option 4</option>
+                          <option>option 5</option>
+                        </select>
+                      </div>
+                    </div>
                   </div>
-                  <div class="form-group">
-                    <label>Select Multiple Disabled</label>
-                    <select multiple class="form-control" disabled>
-                      <option>option 1</option>
-                      <option>option 2</option>
-                      <option>option 3</option>
-                      <option>option 4</option>
-                      <option>option 5</option>
-                    </select>
+
+                  <div class="row">
+                    <div class="col-sm-6">
+                      <!-- Select multiple-->
+                      <div class="form-group">
+                        <label>Custom Select Multiple</label>
+                        <select multiple class="custom-select">
+                          <option>option 1</option>
+                          <option>option 2</option>
+                          <option>option 3</option>
+                          <option>option 4</option>
+                          <option>option 5</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class="col-sm-6">
+                      <div class="form-group">
+                        <label>Custom Select Multiple Disabled</label>
+                        <select multiple class="custom-select" disabled>
+                          <option>option 1</option>
+                          <option>option 2</option>
+                          <option>option 3</option>
+                          <option>option 4</option>
+                          <option>option 5</option>
+                        </select>
+                      </div>
+                    </div>
                   </div>
 
                   <div class="form-group">
                     <div class="custom-control custom-switch">
                       <input type="checkbox" class="custom-control-input" id="customSwitch1">
-                      <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
+                      <label class="custom-control-label" for="customSwitch1">Toggle this custom switch element</label>
                     </div>
                   </div>
                   <div class="form-group">
                     <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
                       <input type="checkbox" class="custom-control-input" id="customSwitch3">
-                      <label class="custom-control-label" for="customSwitch3">Toggle this switch element with Custom Colors danger/success</label>
+                      <label class="custom-control-label" for="customSwitch3">Toggle this custom switch element with custom colors danger/success</label>
                     </div>
                   </div>
                   <div class="form-group">
                     <div class="custom-control custom-switch">
                       <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
-                      <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
+                      <label class="custom-control-label" for="customSwitch2">Disabled custom switch element</label>
                     </div>
                   </div>
                   <div class="form-group">
-                    <label for="customRange1">Example range</label>
+                    <label for="customRange1">Custom range</label>
                     <input type="range" class="custom-range" id="customRange1">
                   </div>
                   <div class="form-group">
-                    <label for="customRange1">Example range (custom-range-danger)</label>
+                    <label for="customRange1">Custom range (custom-range-danger)</label>
                     <input type="range" class="custom-range custom-range-danger" id="customRange1">
                   </div>
                   <div class="form-group">
-                    <label for="customRange1">Example range (custom-range-teal)</label>
+                    <label for="customRange1">Custom range (custom-range-teal)</label>
                     <input type="range" class="custom-range custom-range-teal" id="customRange1">
                   </div>
+                  <div class="form-group">
+                    <label for="customFile">Custom File</label>
+                    <div class="custom-file">
+                      <input type="file" class="custom-file-input" id="customFile">
+                      <label class="custom-file-label" for="customFile">Choose file</label>
+                    </div>
+                  </div>
+                  <div class="form-group">
+                  </div>
                 </form>
               </div>
               <!-- /.card-body -->