From dde85e9888ee7d4c8a39c2ea2dadba1dcf55edf1 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 8 May 2016 16:05:27 -0700
Subject: Redo checkboxes and radios

- Move disabled radio and checkbox styles to Reboot
- Collapse .radio and .checkbox into single class, .form-check
- Collapse .radio-inline and .checkbox-inline into single class, .form-check-inline
- Require classes for sub-elements in both new classes
---
 scss/_forms.scss  | 75 ++++++++++++++++++-------------------------------------
 scss/_reboot.scss | 11 ++++++++
 2 files changed, 35 insertions(+), 51 deletions(-)

(limited to 'scss')

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 7c483477c..da2bdfaf4 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -174,83 +174,56 @@ select.form-control {
 //
 // Indent the labels to position radios/checkboxes as hanging controls.
 
-.radio,
-.checkbox {
+.form-check {
   position: relative;
   display: block;
-  // margin-top:    ($spacer * .75);
   margin-bottom: ($spacer * .75);
 
-  label {
-    padding-left: 1.25rem;
-    margin-bottom: 0;
-    cursor: pointer;
+  // Move up sibling radios or checkboxes for tighter spacing
+  + .form-check  {
+    margin-top: -.25rem;
+  }
 
-    // When there's no labels, don't position the input.
-    input:only-child {
-      position: static;
+  &.disabled {
+    .form-check-label {
+      cursor: $cursor-disabled;
     }
   }
 }
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
+
+.form-check-label {
+  padding-left: 1.25rem;
+  margin-bottom: 0; // Override default `<label>` bottom margin
+  cursor: pointer;
+}
+
+.form-check-input {
   position: absolute;
   margin-top: .25rem;
-  // margin-top: 4px \9;
   margin-left: -1.25rem;
-}
 
-.radio + .radio,
-.checkbox + .checkbox {
-  // Move up sibling radios or checkboxes for tighter spacing
-  margin-top: -.25rem;
+  &:only-child {
+    position: static;
+  }
 }
 
 // Radios and checkboxes on same line
-.radio-inline,
-.checkbox-inline {
+.form-check-inline {
   position: relative;
   display: inline-block;
   padding-left: 1.25rem;
-  margin-bottom: 0;
+  margin-bottom: 0; // Override default `<label>` bottom margin
   vertical-align: middle;
   cursor: pointer;
-}
-.radio-inline + .radio-inline,
-.checkbox-inline + .checkbox-inline {
-  margin-top: 0;
-  margin-left: .75rem;
-}
 
-// Apply same disabled cursor tweak as for inputs
-// Some special care is needed because <label>s don't inherit their parent's `cursor`.
-//
-// Note: Neither radios nor checkboxes can be readonly.
-input[type="radio"],
-input[type="checkbox"] {
-  &:disabled,
-  &.disabled {
-    cursor: $cursor-disabled;
+  + .form-check-inline {
+    margin-left: .75rem;
   }
-}
-// These classes are used directly on <label>s
-.radio-inline,
-.checkbox-inline {
+
   &.disabled {
     cursor: $cursor-disabled;
   }
 }
-// These classes are used on elements with <label> descendants
-.radio,
-.checkbox {
-  &.disabled {
-    label {
-      cursor: $cursor-disabled;
-    }
-  }
-}
 
 
 // Form control feedback states
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 8de53cf73..e30de2c1b 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -321,6 +321,17 @@ textarea {
   border-radius: 0;
 }
 
+input[type="radio"],
+input[type="checkbox"] {
+  // Apply a disabled cursor for radios and checkboxes.
+  //
+  // Note: Neither radios nor checkboxes can be readonly.
+  &:disabled {
+    cursor: $cursor-disabled;
+  }
+}
+
+
 input[type="date"],
 input[type="time"],
 input[type="datetime-local"],
-- 
cgit v1.2.3