diff --git a/demos/demos.css b/demos/demos.css
index 6c50aa0..cfe6171 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -1,5 +1,43 @@
+.clearfix:after {
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: " ";
+ clear: both;
+ height: 0;
+ }
+* html .clearfix { zoom: 1; } /* IE6 */
+*:first-child+html .clearfix { zoom: 1; } /* IE7 */
+
body {
max-width: 900px;
margin: 3em auto;
padding: 0 1em;
}
+
+ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+.inputs-container {
+ box-sizing: border-box
+ width: 100%;
+}
+
+.inputs-row {
+ width: 100%;
+}
+
+.inputs-label {
+ width: 10%;
+ float: left;
+ padding: 0.25em 1em 0.25em 0;
+ text-align: right;
+}
+
+.inputs-input {
+ width: 85%;
+ float: right;
+}
\ No newline at end of file
diff --git a/demos/inputs.html b/demos/inputs.html
new file mode 100644
index 0000000..5333d2e
--- /dev/null
+++ b/demos/inputs.html
@@ -0,0 +1,534 @@
+
+
+
+
+ CSS Chassis - Inputs
+
+
+
+
+
+
+
+ Chassis - Inputs
+
+ Checkboxes and Radios
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs - Inline
+
+
+
+
+
+ Inputs
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Disabled)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Readonly)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Focus)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Active)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Warning)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Error)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs - md
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Disabled)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Readonly)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Focus)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Active)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Warning)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Error)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs - lg
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Disabled)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Readonly)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Focus)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Active)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Warning)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Error)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs - xs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Disabled)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Readonly)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Focus)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Active)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Warning)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Error)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scss/atoms/inputs/_inputs.scss b/scss/atoms/inputs/_inputs.scss
new file mode 100644
index 0000000..661ff19
--- /dev/null
+++ b/scss/atoms/inputs/_inputs.scss
@@ -0,0 +1,25 @@
+/*
+* ==========================================================================
+* Inputs
+* ==========================================================================
+*/
+
+@import
+ "dist/chassis",
+ "mixins";
+
+.input {
+ @include input();
+}
+
+.input-label {
+ @include input-label();
+}
+
+.radio {
+ @include radio();
+}
+
+.checkbox {
+ @include checkbox();
+}
diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss
new file mode 100644
index 0000000..6120bd7
--- /dev/null
+++ b/scss/atoms/inputs/_mixins.scss
@@ -0,0 +1,255 @@
+/*
+* ==========================================================================
+* File : _mixins.scss
+* For : Inputs
+* ==========================================================================
+*/
+
+$margin: em(map-get($inputs-input-full-width, margin));
+$margin-label: em(map-get($inputs-label, margin));
+$input-padding: em(map-get($inputs-input-full-width, padding));
+
+@mixin input() {
+ padding: $input-padding 0 $input-padding $input-padding;
+ margin: $margin 0 $margin 0;
+ border: map-get($inputs-input-full-width, border);
+ border-color: map-deep-get($inputs-input-full-width, border-color, light);
+ background: map-deep-get($inputs-input-full-width, background, base);
+ box-shadow: map-get($inputs-shadows, inset);
+ border-radius: em(map-get($inputs-input-full-width, border-radius));
+ transition: map-get($inputs-transitions, blur-shadow), map-get($inputs-transitions, blur-border-color);
+ font-size: em(map-get($inputs-input-full-width, font-size));
+ width: map-get($inputs-input-full-width, width);
+
+ &:focus,
+ &.focus {
+ @include input-focus();
+ }
+
+ &:disabled,
+ &.disabled {
+ @include input-disabled();
+ }
+
+ &.readonly {
+ @include input-readonly();
+ }
+
+ &:active,
+ &.active {
+ @include input-active();
+ }
+
+ &.error {
+ @include input-error();
+ }
+
+ &.warning {
+ @include input-warning();
+ }
+
+ /* Sizes */
+ &.input-xs {
+ @include input-xs();
+ }
+
+ &.input-md {
+ @include input-md();
+ }
+
+ &.input-lg {
+ @include input-lg();
+ }
+}
+
+/* Input Sizes */
+
+@mixin input-xs() {
+ font-size: em(map-get($inputs-input-xs, font-size));
+}
+
+@mixin input-md() {
+ font-size: em(map-get($inputs-input-md, font-size));
+}
+
+@mixin input-lg() {
+ font-size: em(map-get($inputs-input-lg, font-size));
+}
+
+/* Input States */
+
+@mixin input-focus() {
+ border-color: map-deep-get($inputs-focus, border-color, light);
+ transition: map-get($inputs-transitions, focus-shadow), map-get($inputs-transitions, focus-border-color);
+ outline: map-get($inputs-focus, outline);
+ box-shadow: map-get($inputs-shadows, inset), map-get($inputs-shadows, focus);
+}
+
+@mixin input-disabled() {
+ background: map-deep-get($inputs-disabled, background, base);
+ border-color: rgba(map-deep-get($inputs-disabled, border-color, light), .65);
+ color: map-deep-get($inputs-disabled, color, light);
+ cursor: map-get($inputs-disabled, cursor);
+}
+
+@mixin input-readonly() {
+ background: map-deep-get($inputs-readonly, background, base);
+ border-color: rgba(map-deep-get($inputs-readonly, border-color, light), .65);
+ color: map-deep-get($inputs-readonly, color, light);
+ cursor: map-get($inputs-readonly, cursor);
+}
+
+@mixin input-active() {
+ border-color: map-deep-get($inputs-active, border-color, light);
+}
+
+@mixin input-error() {
+ border-color: map-deep-get($inputs-error, border-color, base);
+ box-shadow: map-get($inputs-shadows, inset), map-get($inputs-shadows, error);
+}
+
+@mixin input-warning() {
+ border-color: map-deep-get($inputs-error, border-color, base) ;
+ box-shadow: map-get($inputs-shadows, inset), map-get($inputs-shadows, warning);
+}
+
+/* Labels */
+
+@mixin input-label() {
+ font-size: em(map-get($inputs-label, font-size));
+ display: map-get($inputs-label, display);
+ max-width: map-get($inputs-label, max-width);
+
+ &.input-label-md {
+ @include input-label-md();
+ }
+
+ &.input-label-lg {
+ @include input-label-lg();
+ }
+
+ &.input-label-xs {
+ @include input-label-xs();
+ }
+
+ &.error {
+ @include input-label-error();
+ }
+
+ &.input-label-block {
+ display: block;
+ }
+}
+
+@mixin input-label-error() {
+ color: map-deep-get($inputs-label-error, color, base);
+}
+
+@mixin input-label-md() {
+ font-size: em(map-get($inputs-label-md, font-size));
+}
+
+@mixin input-label-lg() {
+ font-size: em(map-get($inputs-label-lg, font-size));
+}
+
+@mixin input-label-xs() {
+ font-size: em(map-get($inputs-label-xs, font-size));
+}
+
+/* Radio Buttons */
+
+$radio-default-border: map-deep-get($inputs-radio, default-color, base);
+$radio-checked-border: map-deep-get($inputs-radio, checked-color, base);
+
+@mixin radio() {
+ 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-radio, width);
+ height: map-get($inputs-radio, height);
+ box-shadow: inset 0 0 0 1px $radio-default-border, inset 0 2px 2px 0 rgba(0,0,0,.10);
+ padding: 2px;
+ margin-right: 10px;
+ text-align: center;
+ transition: box-shadow .1s;
+ border-radius: 50%;
+ }
+
+ &:checked + label:before {
+ box-shadow: inset 0 0 0 7px $radio-checked-border;
+ transition: box-shadow .2s;
+ }
+}
+
+/* Checkboxes */
+
+$checkbox-default-border: map-deep-get($inputs-checkbox, default-color, base);
+$checkbox-checked-border: map-deep-get($inputs-checkbox, checked-color, base);
+
+@mixin checkbox() {
+ 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-checkbox, width);
+ height: map-get($inputs-checkbox, height);
+ box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.10);
+ padding: 2px;
+ border: 1px solid $checkbox-default-border;
+ margin-right: 10px;
+ text-align: center;
+ border-radius: 2px;
+ transition: background-color .1s;
+ }
+
+ & + label:after {
+ content: "";
+ width: 12px;
+ height: 6px;
+ position: absolute;
+ top: 9px;
+ left: 6px;
+ border: 3px solid #fff;
+ border-top: none;
+ border-right: none;
+ background: transparent;
+ opacity: 0;
+ transform: rotate(-65deg);
+ }
+
+ &:checked + label:before {
+ background: $checkbox-checked-border;
+ border-color: $checkbox-checked-border;
+ transition: background-color .1s;
+ }
+
+ &:checked + label:after {
+ opacity: 1;
+ transform: rotate(-45deg);
+ transition: transform .1s;
+ }
+}
diff --git a/scss/style.scss b/scss/style.scss
index 81b166a..8d57a29 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -10,7 +10,8 @@
@import
"atoms/icons/icons",
"atoms/typography/typography",
- "atoms/buttons/buttons";
+ "atoms/buttons/buttons",
+ "atoms/inputs/inputs";
@import
"views/main";
diff --git a/scss/variables/inputs.js b/scss/variables/inputs.js
new file mode 100644
index 0000000..e0babda
--- /dev/null
+++ b/scss/variables/inputs.js
@@ -0,0 +1,157 @@
+( function( root, factory ) {
+ if ( typeof define === "function" && define.amd ) {
+ define( [ "./chassis" ], factory );
+ } else if ( typeof exports === "object" ) {
+ module.exports = factory( require( "./chassis" ) );
+ } else {
+ root.chassis = factory( root.chassis );
+ }
+}( this, function( chassis ) {
+
+chassis.inputs = {
+ "shadows": {
+ name: "Styles for input shadows",
+ value: {
+ "inset": "inset 0px 2px 2px 0px rgba(0,0,0,0.10)",
+ "focus": "0px 0px 2px 1px #03A9F4",
+ "error": "0px 0px 2px 1px #F44336",
+ "warning": "0px 0px 2px 1px #FF7043"
+ }
+ },
+ "transitions": {
+ name: "Transition animations",
+ value: {
+ "focus-shadow": "box-shadow .25s",
+ "focus-border-color": "border-color .25s",
+ "blur-shadow": "box-shadow .1s",
+ "blur-border-color": "border-color .1s"
+ }
+ },
+ "label": {
+ name: "Styles for input label",
+ value: {
+ "display": "inline",
+ "max-width": "100%",
+ "font-size": "20px",
+ "margin": "0px"
+ }
+ },
+ "label-md": {
+ name: "Styles for small input lables",
+ value: {
+ "font-size": "28px"
+ }
+ },
+ "label-lg": {
+ name: "Styles for large input lables",
+ value: {
+ "font-size": "36px"
+ }
+ },
+ "label-xs": {
+ name: "Styles for extra small input labels",
+ value: {
+ "font-size": "14px"
+ }
+ },
+ "label-error": {
+ name: "Styles for error labels",
+ value: {
+ color: () => "colors.error"
+ }
+ },
+ "input-full-width": {
+ name: "Generic styles for single line inputs",
+ value: {
+ "padding": "10px",
+ "margin": "5px",
+ "border": "1px solid",
+ "border-color": () => "colors.text",
+ "border-radius": "2px",
+ "font-size": "20px",
+ "width": "100%",
+ "background": () => "colors.background"
+ }
+ },
+ "disabled": {
+ name: "Styles for disabled input",
+ value: {
+ "border-color": () => "colors.text",
+ "background": () => "colors.default",
+ "color": () => "colors.text",
+ "cursor": "not-allowed"
+ }
+ },
+ "readonly": {
+ name: "Styles for readonly inputs",
+ value: {
+ "border-color": () => "colors.text",
+ "background": () => "colors.default",
+ "color": () => "colors.text",
+ "cursor": "auto"
+ }
+ },
+ "focus": {
+ name: "Styles for in focus inputs",
+ value: {
+ "border-color": () => "colors.info",
+ "outline": "none"
+ }
+ },
+ "active": {
+ name: "Styles for active inputs",
+ value: {
+ "border-color": () => "colors.info"
+ }
+ },
+ "error": {
+ name: "Styles for error state of inputs",
+ value: {
+ "border-color": () => "colors.error"
+ }
+ },
+ "warning": {
+ name: "Styles for warning state inputs",
+ value: {
+ "border-color": () => "colors.warning"
+ }
+ },
+ "input-md": {
+ name: "Styles for large sized inputs",
+ value: {
+ "font-size": "28px"
+ }
+ },
+ "input-lg": {
+ name: "Styles for small sized inputs",
+ value: {
+ "font-size": "36px"
+ }
+ },
+ "input-xs": {
+ name: "Styles for extra small sized inputs",
+ value: {
+ "font-size": "14px"
+ }
+ },
+ "radio": {
+ name: "Styles for custom radio buttons",
+ value: {
+ "width": "20px",
+ "height": "20px",
+ "default-color": () => "colors.text",
+ "checked-color": () => "colors.primary"
+ }
+ },
+ "checkbox": {
+ name: "Styles for custom radio buttons",
+ value: {
+ "width": "20px",
+ "height": "20px",
+ "default-color": () => "colors.text",
+ "checked-color": () => "colors.primary"
+ }
+ }
+};
+return chassis;
+} ) );