custom forms: checkbox and radio stacked option

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
 */
@@ -3286,84 +3284,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
           box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
 }
 
-/*
-* 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
 */

docs/components/custom-forms.md

@@ -3,6 +3,12 @@ layout: page
 title: Custom forms
 ---
 
+In the interest of customization and cross browser consistency, Bootstrap include a handful of customized form elements. They're solid replacements for default form controls as they're built on top of semantic and accessible markup.
+
+## Checkboxes and radios
+
+### Checkboxes
+
 {% example html %}
 <label class="c-input c-checkbox">
   <input type="checkbox">
@@ -11,6 +17,8 @@ title: Custom forms
 </label>
 {% endexample %}
 
+### Radios
+
 {% example html %}
 <label class="c-input c-radio">
   <input id="radio1" name="radio" type="radio">
@@ -23,3 +31,22 @@ title: Custom forms
   Or toggle this other custom radio
 </label>
 {% endexample %}
+
+### Stacked
+
+Custom checkboxes and radios are inline to start. Add a parent with class `.c-inputs-stacked` to ensure each form control is on separate lines.
+
+{% example html %}
+<div class="c-inputs-stacked">
+  <label class="c-input c-radio">
+    <input id="radioStacked1" name="radio-stacked" type="radio">
+    <span class="c-indicator"></span>
+    Toggle this custom radio
+  </label>
+  <label class="c-input c-radio">
+    <input id="radioStacked2" name="radio-stacked" type="radio">
+    <span class="c-indicator"></span>
+    Or toggle this other custom radio
+  </label>
+</div>
+{% endexample %}

docs/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
 */
@@ -3286,84 +3284,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
           box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
 }
 
-/*
-* 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
 */

scss/_custom-forms.scss

@@ -8,7 +8,7 @@
 
 .c-input {
 	position: relative;
-	display: inline-block;
+	display: inline;
 	padding-left: 1.5rem;
 	color: #555;
 	font-weight: normal;
@@ -33,6 +33,10 @@
 			background-color: #84c6ff;
 		}
 	}
+
+	+ .c-input {
+		margin-left: 1rem;
+	}
 }
 
 // Custom indicator
@@ -41,7 +45,7 @@
 
 .c-indicator {
 	position: absolute;
-	top: .25rem;
+	top: 0;
 	left: 0;
 	display: block;
 	width:  1rem;
@@ -93,6 +97,27 @@
 	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K)
 }
 
+// Layout options
+//
+// 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 {
+		display: inline;
+
+		&:after {
+			display: block;
+			content: "";
+			margin-bottom: .25rem;
+		}
+
+		+ .c-input {
+			margin-left: 0;
+		}
+	}
+}
+
 
 
 /*