Add checkbox/radio styling

Author: phosphoer

src/doc/partials/forms.hbs

@@ -24,6 +24,16 @@
           <input type="checkbox"> Check me out
         </label>
       </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name='radio1'> Radio me out
+        </label>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name='radio1'> Radio me out
+        </label>
+      </div>
       <button type="submit" class="btn btn-default">Submit</button>
     </form>
       {{#markdown}}
@@ -47,6 +57,16 @@
           <input type="checkbox"> Check me out
         </label>
       </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name='radio1'> Radio me out
+        </label>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name='radio1'> Radio me out
+        </label>
+      </div>
       <button type="submit" class="btn btn-default">Submit</button>
     </form>
 ```
@@ -162,7 +182,7 @@
         <option>West Virginia</option>
         <option>Wisconsin</option>
         <option>Wyoming</option>
-      </select>     
+      </select>
 
       {{#markdown}}
 ```xml
@@ -257,7 +277,7 @@
         <option>West Virginia</option>
         <option>Wisconsin</option>
         <option>Wyoming</option>
-      </select>     
+      </select>
 ```
       {{/markdown}}
     </div>

src/scss/override/_forms.scss

@@ -168,4 +168,101 @@ select[multiple].form-control {
     color: #fff;
     background-color: $win-color-accent;
   }
+}
+
+//
+// Checkbox / Radio
+//
+.checkbox label,
+.radio label {
+  padding-left: 30px;
+}
+
+.checkbox input[type=checkbox],
+.radio input[type=radio] {
+  width: 20px;
+  height: 20px;
+  margin-left: -30px;
+
+  &::-ms-check {
+    border-style: solid;
+    display: inline-block;
+    border-width: 2px;
+    background-clip: border-box;
+  }
+}
+
+.checkbox input[type=checkbox] {
+  &::-ms-check {
+    color: $win-color-base;
+    border-color: $win-color-base-high;
+    background-color: transparent;
+  }
+
+  &:indeterminate::-ms-check {
+    color: $win-color-base-high;
+    border-color: $win-color-accent;
+  }
+
+  &:checked::-ms-check {
+    color: #fff;
+    background-color: $win-color-accent;
+    border-color: transparent;
+  }
+
+  &:hover::-ms-check {
+    border-color: $win-color-base;
+  }
+
+  &:hover:indeterminate::-ms-check {
+    color: $win-color-base;
+    border-color: $win-color-accent;
+  }
+
+  &:active::-ms-check {
+    border-color: transparent;
+    background-color: $win-color-base-medium-high;
+  }
+
+  &:indeterminate:active::-ms-check {
+    color: $win-color-base-medium-high;
+    border-color: $win-color-base-high;
+    background-color: transparent;
+  }
+
+  &:disabled::-ms-check, &:indeterminate:disabled::-ms-check {
+    color: $win-color-base-medium-low;
+    border-color: $win-color-base-medium-low;
+    background-color: transparent;
+  }
+}
+
+.radio input[type=radio] {
+  &::-ms-check {
+    color: $win-color-base-high;
+    border-color: $win-color-base-high;
+    background-color: transparent;
+  }
+
+  &:hover::-ms-check {
+    border-color: $win-color-base;
+  }
+
+  &:checked::-ms-check {
+    border-color: $win-color-accent;
+  }
+
+  &:hover::-ms-check {
+    color: $win-color-base;
+  }
+
+  &:active::-ms-check {
+    color: $win-color-base-medium-high;
+    border-color: $win-color-base-medium-high;
+  }
+
+  &:disabled::-ms-check {
+    color: $win-color-base-medium-low;
+    border-color: $win-color-base-medium-low;
+  }
 }