fix(custom-forms): fix doc for disabled custom checkboxes and radio

Orange-OpenSource · Jan 5, 2018 · d10d25c · d10d25c
1 parent 508ead2
commit d10d25c
Show file tree

Hide file tree

Showing 15 changed files with 57 additions and 65 deletions.
diff --git a/_includes/boostwatch/forms.html b/_includes/boostwatch/forms.html
@@ -20,29 +20,25 @@ <h2 id="forms">Forms<a class="doc-link" href="../components/forms/" title="go to
                       <div>
                         <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input">
-                            <span class="custom-control-label"></span>
-                            <span class="custom-control-description">Orange checkbox unchecked</span>
+                            <span class="custom-control-label">Orange checkbox unchecked</span>
                         </label>
                       </div>
                       <div>
                         <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" disabled>
-                            <span class="custom-control-label"></span>
-                            <span class="custom-control-description">Orange checkbox unchecked disabled</span>
+                            <span class="custom-control-label">Orange checkbox unchecked disabled</span>
                         </label>
                       </div>
                       <div>
                         <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" checked>
-                            <span class="custom-control-label"></span>
-                            <span class="custom-control-description">Orange checkbox checked</span>
+                            <span class="custom-control-label">Orange checkbox checked</span>
                         </label>
                       </div>
                       <div>
                         <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" checked disabled>
-                            <span class="custom-control-label"></span>
-                            <span class="custom-control-description">Orange checkbox checked disabled</span>
+                            <span class="custom-control-label">Orange checkbox checked disabled</span>
                         </label>
                       </div>
                   </div>
@@ -60,29 +56,25 @@ <h2 id="forms">Forms<a class="doc-link" href="../components/forms/" title="go to
                       <div>
                         <label class="custom-control custom-radio">
                             <input id="radio1" name="radio" type="radio" class="custom-control-input" checked>
-                            <span class="custom-control-label"></span>
-                            <span class="custom-control-description">Toggle this custom radio</span>
+                            <span class="custom-control-label">Toggle this custom radio</span>
                         </label>
                       </div>
                       <div>
                         <label class="custom-control custom-radio">
                             <input id="radio2" name="radio" type="radio" class="custom-control-input">
-                            <span class="custom-control-label"></span>
-                            <span class="custom-control-description">Or toggle this other custom radio</span>
+                            <span class="custom-control-label">Or toggle this other custom radio</span>
                         </label>
                       </div>
                       <div>
                         <label class="custom-control custom-radio">
                             <input id="radio3" name="radio-disabled" type="radio" class="custom-control-input" checked disabled>
-                            <span class="custom-control-label"></span>
-                            <span class="custom-control-description">Orange radio checked disabled</span>
+                            <span class="custom-control-label">Orange radio checked disabled</span>
                         </label>
                       </div>
                       <div>
                         <label class="custom-control custom-radio">
                             <input id="radio4" name="radio-disabled" type="radio" class="custom-control-input" disabled>
-                            <span class="custom-control-label"></span>
-                            <span class="custom-control-description">Orange radio unchecked disabled</span>
+                            <span class="custom-control-label">Orange radio unchecked disabled</span>
                         </label>
                       </div>
                   </div>

diff --git a/dist/css/boosted-grid.css.map b/dist/css/boosted-grid.css.map
diff --git a/dist/css/boosted-reboot.css.map b/dist/css/boosted-reboot.css.map
diff --git a/dist/css/boosted-rtl.css b/dist/css/boosted-rtl.css
diff --git a/dist/css/boosted-rtl.css.map b/dist/css/boosted-rtl.css.map
diff --git a/dist/css/boosted-rtl.min.css b/dist/css/boosted-rtl.min.css
diff --git a/dist/css/boosted-rtl.min.css.map b/dist/css/boosted-rtl.min.css.map
diff --git a/dist/css/boosted.css b/dist/css/boosted.css
diff --git a/dist/css/boosted.css.map b/dist/css/boosted.css.map
diff --git a/dist/css/boosted.min.css b/dist/css/boosted.min.css
diff --git a/dist/css/boosted.min.css.map b/dist/css/boosted.min.css.map
diff --git a/dist/css/orangeHelvetica.css.map b/dist/css/orangeHelvetica.css.map
diff --git a/dist/css/orangeIcons.css.map b/dist/css/orangeIcons.css.map
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
@@ -27,8 +27,16 @@
 
   &:checked ~ .custom-control-label::before {
     color: $custom-control-indicator-checked-color;
+    // our custom control have a border
+    border-color: $custom-control-indicator-checked-border-color;
+    // end mod
     @include gradient-bg($custom-control-indicator-checked-bg);
     @include box-shadow($custom-control-indicator-checked-box-shadow);
+    // Boosted mod move gradient to global settings, to change the color for disabled checked elements
+    &::before {
+      @include gradient-bg($custom-control-indicator-checked-bg);
+    }
+    // end mod
   }
 
   &:focus ~ .custom-control-label::before {
@@ -52,13 +60,18 @@
       color: $custom-control-label-disabled-color;
 
       &::before {
-        background-color: $custom-control-indicator-disabled-bg;
         // Boosted mod
         // our custom control have a border
         border-color: $gray-500;
         // end mod
       }
     }
+    // Boosted mod disable bg only for checked elements
+    &:checked ~ .custom-control-label {
+      &::before {
+        background-color: $custom-control-indicator-disabled-bg;
+      }
+    }
   }
 }
 
@@ -116,13 +129,7 @@
   }
 
   .custom-control-input:checked ~ .custom-control-label {
-    &::before {
-      // Boosted mod
-      // our custom control have a border
-      border-color: $custom-control-indicator-checked-border-color;
-      // end mod
-      @include gradient-bg($custom-control-indicator-checked-bg);
-    }
+    // Boosted mod move ::before gradient to global definition
     &::after {
       background-image: $custom-checkbox-indicator-icon-checked;
     }
@@ -159,13 +166,7 @@
   }
 
   .custom-control-input:checked ~ .custom-control-label {
-    &::before {
-      // Boosted mod
-      // our custom control have a border
-      border-color: $custom-control-indicator-checked-border-color;
-      // end mod
-      @include gradient-bg($custom-control-indicator-checked-bg);
-    }
+    // Boosted mod move ::before gradient to global definition
     &::after {
       background-image: $custom-radio-indicator-icon-checked;
     }
@@ -184,6 +185,7 @@
   width: 100%;
   height: $input-height;
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+  font-weight: 700; // boosted mod set font-weight bold
   line-height: $custom-select-line-height;
   color: $custom-select-color;
   vertical-align: middle;

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -506,7 +506,7 @@ $custom-control-indicator-bg:         $white !default;
 $custom-control-indicator-bg-size:    1rem !default;
 $custom-control-indicator-box-shadow: none !default;
 
-$custom-control-indicator-disabled-bg:        $white !default;
+$custom-control-indicator-disabled-bg:        $gray-500 !default;
 $custom-control-label-disabled-color:         #767676 !default;
 
 $custom-control-indicator-checked-color:      $white !default;
@@ -529,7 +529,7 @@ $custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml;charset=u
 $custom-checkbox-indicator-indeterminate-box-shadow: none !default;
 
 $custom-radio-indicator-border-radius:        50% !default;
-$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-radio-indicator-icon-checked:         str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
 
 $custom-select-padding-y:          .4375rem !default;
 $custom-select-padding-x:          .5rem !default;