custom forms: checkbox and radio stacked option

1 files changed, 29 insertions, 109 deletions

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index d3204d1c5..305612483 100644
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -3017,7 +3017,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
 
 .c-input {
   position: relative;
-  display: inline-block;
+  display: inline;
   padding-left: 1.5rem;
   font-weight: normal;
   color: #555;
@@ -3029,10 +3029,25 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
   opacity: 0;
   /* Put the input behind the label so it doesn't overlay text */
 }
+.c-input > input:focus ~ .c-indicator {
+  -webkit-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
+          box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
+}
+.c-input > input:checked ~ .c-indicator {
+  color: #fff;
+  background-color: #0074d9;
+}
+.c-input > input:active ~ .c-indicator {
+  color: #fff;
+  background-color: #84c6ff;
+}
+.c-input + .c-input {
+  margin-left: 1rem;
+}
 
 .c-indicator {
   position: absolute;
-  top: .25rem;
+  top: 0;
   left: 0;
   display: block;
   width: 1rem;
@@ -3052,45 +3067,16 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
           background-size: 50% 50%;
 }
 
-/* Hover state */
-/* Uncomment if you need it, but be aware of the sticky iOS states.
-.control:hover .control-indicator {
-	color: #fff;
-	background-color: #ccc;
-}
-*/
-/* Focus */
-.c-input input:focus ~ .c-indicator {
-  -webkit-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
-          box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
-}
-
-/* Checked state */
-.c-input input:checked ~ .c-indicator {
-  color: #fff;
-  background-color: #0074d9;
-}
-
-/* Active */
-.c-input input:active ~ .c-indicator {
-  color: #fff;
-  background-color: #84c6ff;
-}
-
-/* Checkbox modifiers */
 .c-checkbox .c-indicator {
   border-radius: .25rem;
 }
-
 .c-checkbox input:checked ~ .c-indicator {
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
 }
 
-/* Radio modifiers */
 .c-radio .c-indicator {
   border-radius: 50%;
 }
-
 .c-radio input:checked ~ .c-indicator {
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
 }
@@ -3104,6 +3090,18 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
 }
 
+.c-inputs-stacked .c-input {
+  display: inline;
+}
+.c-inputs-stacked .c-input:after {
+  display: block;
+  margin-bottom: .25rem; 
+  content: "";
+}
+.c-inputs-stacked .c-input + .c-input {
+  margin-left: 0;
+}
+
 /*
 * Select
 */
@@ -3287,84 +3285,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
 }
 
 /*
-* Progress
-*/
-.progress {
-  display: inline-block;
-  height: 1rem;
-}
-
-.progress[value] {
-  /* Reset the default appearance */
-  -webkit-appearance: none;
-  /* IE10 uses `color` to set the bar background-color */
-  color: #0074d9; 
-  /* Remove Firefox and Opera border */
-  border: 0;
-
-     -moz-appearance: none;
-          appearance: none;
-}
-
-.progress[value]::-webkit-progress-bar {
-  background-color: #eee;
-  border-radius: .2rem;
-}
-
-.progress[value]::-webkit-progress-value {
-  background-color: #0074d9;
-  border-top-left-radius: .2rem;
-  border-bottom-left-radius: .2rem;
-}
-
-.progress[value="100"]::-webkit-progress-value {
-  border-top-right-radius: .2rem;
-  border-bottom-right-radius: .2rem;
-}
-
-/* Firefox styles must be entirely separate or it busts Webkit styles. */
-@-moz-document url-prefix() {
-  .progress[value] {
-    background-color: #eee;
-    border-radius: .2rem;
-  }
-
-  .progress[value]::-moz-progress-bar {
-    background-color: #0074d9;
-    border-top-left-radius: .2rem;
-    border-bottom-left-radius: .2rem;
-  }
-
-  .progress[value="100"]::-moz-progress-bar {
-    border-top-right-radius: .2rem;
-    border-bottom-right-radius: .2rem;
-  }
-}
-
-/* IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. */
-@media screen and (min-width: 0\0) {
-  .progress {
-    background-color: #eee;
-    border-radius: .2rem;
-  }
-
-  .progress-bar {
-    display: inline-block;
-    height: 1rem;
-    text-indent: -999rem;
-    /* Simulate hiding of value as in native `<progress>` */
-    background-color: #0074d9;
-    border-top-left-radius: .2rem;
-    border-bottom-left-radius: .2rem;
-  }
-
-  .progress[width="100%"] {
-    border-top-right-radius: .2rem;
-    border-bottom-right-radius: .2rem;
-  }
-}
-
-/*
 * Control layouts
 */
 .controls-stacked {