Revamp custom form styles

- Less nesting with more specific classes
- New class names for most elements to avoid unnecessary and potentially confusing shorthand
- Require new class and markup for the description (though it's only necessary for disable states, it's now part of the entire component's markup for all states just in case)
- Change up colors and variables for regular and disabled states

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 2998a9de7fe2bcd6046cae0f1a7fed3792345095..a9abd04e6f54122dea847264db0207305caa78a5 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -7,38 +7,49 @@
 //
 // Base class takes care of all the key behavioral aspects.
 
-.c-input {
+.custom-control {
   position: relative;
   display: inline;
   padding-left: 1.5rem;
   color: #555;
-  cursor: pointer;
 
-  > input {
-    position: absolute;
-    z-index: -1; // Put the input behind the label so it doesn't overlay text
-    opacity: 0;
+  + .custom-control {
+    margin-left: 1rem;
+  }
+}
 
-    &:checked ~ .c-indicator {
-      color: #fff;
-      background-color: #0074d9;
-      @include box-shadow(none);
-    }
+.custom-control-input {
+  position: absolute;
+  z-index: -1; // Put the input behind the label so it doesn't overlay text
+  opacity: 0;
 
-    &:focus ~ .c-indicator {
-      // the mixin is not used here to make sure there is feedback
-      box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
-    }
+  &:checked ~ .custom-control-indicator {
+    color: #fff;
+    background-color: #0074d9;
+    @include box-shadow(none);
+  }
 
-    &:active ~ .c-indicator {
-      color: #fff;
-      background-color: #84c6ff;
-      @include box-shadow(none);
-    }
+  &:focus ~ .custom-control-indicator {
+    // the mixin is not used here to make sure there is feedback
+    box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
   }
 
-  + .c-input {
-    margin-left: 1rem;
+  &:active ~ .custom-control-indicator {
+    color: #fff;
+    background-color: #84c6ff;
+    @include box-shadow(none);
+  }
+
+  &:disabled {
+    ~ .custom-control-indicator {
+      cursor: not-allowed;
+      background-color: $custom-form-bg-color-disabled;
+    }
+
+    ~ .custom-control-description {
+      color: $custom-form-description-color-disabled;
+      cursor: not-allowed;
+    }
   }
 }
 
@@ -46,9 +57,9 @@
 //
 // Generates a shadow element to create our makeshift checkbox/radio background.
 
-.c-indicator {
+.custom-control-indicator {
   position: absolute;
-  top: 0;
+  top: .0625rem;
   left: 0;
   display: block;
   width: 1rem;
@@ -62,63 +73,41 @@
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 50% 50%;
-  @include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1));
+  @include box-shadow(inset 0 .25rem .25rem rgba(0,0,0,.1));
 }
 
 // Checkboxes
 //
 // Tweak just a few things for checkboxes.
 
-.c-checkbox {
-  .c-indicator {
+.custom-checkbox {
+  .custom-control-indicator {
     border-radius: .25rem;
   }
 
-  input:checked ~ .c-indicator {
+  .custom-control-input:checked ~ .custom-control-indicator {
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
   }
 
-  input:indeterminate ~ .c-indicator {
+  .custom-control-input:indeterminate ~ .custom-control-indicator {
     background-color: #0074d9;
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
     @include box-shadow(none);
   }
-
-  input:disabled {
-    ~ .c-indicator {
-      cursor: not-allowed;
-      background-color: $custom-form-bg-color-disabled;
-    }
-    ~ .c-indicator-label {
-      color: $custom-form-label-color-disabled;
-      cursor: not-allowed;
-    }
-  }
 }
 
 // Radios
 //
 // Tweak just a few things for radios.
 
-.c-radio {
-  .c-indicator {
+.custom-radio {
+  .custom-control-indicator {
     border-radius: 50%;
   }
 
-  input:checked ~ .c-indicator {
+  .custom-control-input:checked ~ .custom-control-indicator {
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
   }
-
-  input:disabled {
-    ~ .c-indicator {
-      cursor: not-allowed;
-      background-color: $custom-form-bg-color-disabled;
-    }
-    ~ .c-indicator-label {
-      color: $custom-form-label-color-disabled;
-      cursor: not-allowed;
-    }
-  }
 }
 
 
@@ -127,8 +116,8 @@
 // By default radios and checkboxes are `inline-block` with no additional spacing
 // set. Use these optional classes to tweak the layout.
 
-.c-inputs-stacked {
-  .c-input {
+.custom-controls-stacked {
+  .custom-control {
     display: inline;
 
     &::after {
@@ -137,7 +126,7 @@
       content: "";
     }
 
-    + .c-input {
+    + .custom-control {
       margin-left: 0;
     }
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6c5ee1edf0f6562583fea54709dcf7ec8d2395ee..ae9955ce6eb3f9c06e194f4e78f95637306dd26c 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -322,9 +322,9 @@ $input-group-addon-border-color: $input-border-color !default;
 
 $cursor-disabled:                not-allowed !default;
 
-$custom-form-bg-color:           #d1d1d1 !default;
-$custom-form-bg-color-disabled:  #e2e2e2 !default;
-$custom-form-label-color-disabled:  #c3c3c3 !default;
+$custom-form-bg-color:                    #ddd !default;
+$custom-form-bg-color-disabled:           #eee !default;
+$custom-form-description-color-disabled:  #767676 !default;
 
 
 // Form validation icons