diff --git a/demos/inputs.html b/demos/inputs.html
index 00f9aa1..df44253 100644
--- a/demos/inputs.html
+++ b/demos/inputs.html
@@ -1,333 +1,279 @@
-
-
- CSS Chassis - Inputs
-
-
-
-
-
-
-
- Inputs - (Size: Default)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Disabled)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Focus)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Active)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Error)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs - (Size: Small)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Disabled)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Focus)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Active)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Error)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs - (Size: Large)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Disabled)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Focus)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Active)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inputs (Error)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ CSS Chassis - Inputs
+
+
+
+
+
+
+ Inputs - (Size: Default)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Disabled)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Focus)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Active)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Error)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs - (Size: Small)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Disabled)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Focus)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Active)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Error)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs - (Size: Large)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Disabled)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Focus)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Active)
+
+
+
+
+
+
+
+
+
+
+ Inputs (Error)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scss/atoms/inputs/_inputs.scss b/scss/atoms/inputs/_inputs.scss
index cd55b71..6a568d1 100644
--- a/scss/atoms/inputs/_inputs.scss
+++ b/scss/atoms/inputs/_inputs.scss
@@ -25,3 +25,9 @@
.input-sm {
@include input-sm();
}
+
+/* Checkboxes and RadioButtons (IDK why radiobuttons remind me of radiohead yo!) */
+
+.radiobutton {
+ @include radiobutton();
+}
diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss
index 8211c88..83ed9df 100644
--- a/scss/atoms/inputs/_mixins.scss
+++ b/scss/atoms/inputs/_mixins.scss
@@ -90,3 +90,40 @@ $margin-label: em(map-get($inputs-label, margin));
@mixin input-sm() {
font-size: em(map-get($inputs-sm, font-size));
}
+
+/* Radio Buttons */
+
+$default-border: map-deep-get($inputs-radiobutton, default-color, base);
+$checked-border: map-deep-get($inputs-radiobutton, checked-color, base);
+
+@mixin radiobutton() {
+ opacity: 0;
+ position: absolute;
+
+ &-label {
+ display: inline-block;
+ vertical-align: middle;
+ margin: 5px;
+ cursor: pointer;
+ position: relative;
+ }
+
+ & + &-label:before {
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ width: map-get($inputs-radiobutton, width);
+ height: map-get($inputs-radiobutton, height);
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), inset 0 0 0 1px $default-border;
+ padding: 2px;
+ margin-right: 10px;
+ text-align: center;
+ transition: box-shadow .1s;
+ border-radius: 50%;
+ }
+
+ &:checked + &-label:before {
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), inset 0 0 0 7px $checked-border;
+ transition: box-shadow .2s;
+ }
+}
diff --git a/scss/variables/inputs.js b/scss/variables/inputs.js
index a9edc07..1f5c4be 100644
--- a/scss/variables/inputs.js
+++ b/scss/variables/inputs.js
@@ -100,6 +100,15 @@ chassis.inputs = {
value: {
"font-size": "14px"
}
+ },
+ "radiobutton": {
+ name: "Styles for custom radio buttons",
+ value: {
+ "width": "20px",
+ "height": "20px",
+ "default-color": () => "colors.text",
+ "checked-color": () => "colors.info"
+ }
}
};