From 416f94253f36bd3dfee47486f647e0f8bff60aba Mon Sep 17 00:00:00 2001
From: Nash Vail
Date: Wed, 8 Jun 2016 12:28:36 +0530
Subject: [PATCH 1/7] Inputs: Added initial components with styles
---
demos/inputs.html | 121 +++++++++++++++++++++++++++++++++
scss/atoms/inputs/_inputs.scss | 17 +++++
scss/atoms/inputs/_mixins.scss | 82 ++++++++++++++++++++++
scss/variables/inputs.js | 95 ++++++++++++++++++++++++++
4 files changed, 315 insertions(+)
create mode 100644 demos/inputs.html
create mode 100644 scss/atoms/inputs/_inputs.scss
create mode 100644 scss/atoms/inputs/_mixins.scss
create mode 100644 scss/variables/inputs.js
diff --git a/demos/inputs.html b/demos/inputs.html
new file mode 100644
index 0000000..a3968d9
--- /dev/null
+++ b/demos/inputs.html
@@ -0,0 +1,121 @@
+
+
+
+
+ CSS Chassis - Inputs
+
+
+
+
+
+
+
+ Inputs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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
new file mode 100644
index 0000000..0d86e98
--- /dev/null
+++ b/scss/atoms/inputs/_inputs.scss
@@ -0,0 +1,17 @@
+/*
+* ==========================================================================
+* Inputs
+* ==========================================================================
+*/
+
+@import
+ "dist/chassis",
+ "mixins";
+
+.input {
+ @include input();
+}
+
+.input-label {
+ @include input-label();
+}
diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss
new file mode 100644
index 0000000..585218d
--- /dev/null
+++ b/scss/atoms/inputs/_mixins.scss
@@ -0,0 +1,82 @@
+/*
+* ==========================================================================
+* File : _mixins.scss
+* For : Inputs
+* ==========================================================================
+*/
+
+$margin: em(map-get($inputs-element, margin));
+$margin-label: em(map-get($inputs-label, margin));
+
+@mixin input() {
+ padding: em(map-get($inputs-element, padding));
+ margin: $margin;
+ border: map-get($inputs-element, border);
+ border-color: map-deep-get($inputs-element, border-color, base);
+ background: map-deep-get($inputs-element, background, base);
+ box-shadow: map-get($inputs-shadows, normal);
+ border-radius: em(map-get($inputs-element, border-radius));
+ transition: map-get($inputs-transitions, blur-shadow), map-get($inputs-transitions, blur-border-color);
+ font-size: em(map-get($inputs-element, font-size));
+ width: map-get($inputs-element, width);
+
+ &:focus,
+ &.focus {
+ @include input-focus();
+ }
+
+ &:disabled,
+ &.disabled {
+ @include input-disabled();
+ }
+
+ &:active,
+ &.active {
+ @include input-active();
+ }
+
+ &.error {
+ @include input-error();
+ }
+}
+
+// Input state mixins
+
+@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, focus-base), map-get($inputs-shadows, focus-spread);
+}
+
+@mixin input-disabled() {
+ background: map-deep-get($inputs-disabled, background, base);
+ box-shadow: map-get($inputs-shadows, disabled);
+ border-color: map-deep-get($inputs-disabled, border-color, darker);
+ color: map-deep-get($inputs-disabled, color, darker);
+ cursor: map-get($inputs-disabled, 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, error-base), map-get($inputs-shadows, error-spread);
+ background: rgba(map-deep-get($inputs-error, background, base), .08);
+}
+
+@mixin input-label() {
+ display: map-get($inputs-label, display);
+ max-width: map-get($inputs-label, max-width);
+ font-size: em(map-get($inputs-label, font-size));
+ font-weight: map-get($inputs-label, font-weight);
+ margin: $margin-label 0;
+
+ &.error {
+ font-size: em(map-get($inputs-label-error, font-size));
+ color: map-deep-get($inputs-label-error, color, base);
+ font-weight: map-get($inputs-label-error, font-weight);
+ }
+}
diff --git a/scss/variables/inputs.js b/scss/variables/inputs.js
new file mode 100644
index 0000000..bb1fc66
--- /dev/null
+++ b/scss/variables/inputs.js
@@ -0,0 +1,95 @@
+( 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: {
+ "disabled": "0 0 2px 0 rgba(0, 0, 0, 0.12)",
+ "normal": "0 2px 2px 0 rgba(0, 0, 0, 0.12)",
+ "focus-base": "0 0 8px 0 rgba(0, 0, 0, 0.08)",
+ "focus-spread": "0 8px 8px 0 rgba(0, 0, 0, 0.18)",
+ "error-base": "0 0 2px 0 rgba(198,62,54,0.24)",
+ "error-spread": "0 2px 2px 0 rgba(198,62,54,0.48)"
+ }
+ },
+ "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": "block",
+ "max-width": "100%",
+ "font-size": "18px",
+ "font-weight": "600",
+ "margin": "8px"
+ }
+ },
+ "label-error": {
+ name: "Styles for error labels",
+ value: {
+ "font-size": "14px",
+ color: () => "colors.error",
+ "font-weight": "400"
+ }
+ },
+ "element": {
+ name: "Generic styles for single line inputs",
+ value: {
+ "padding": "15px",
+ "margin": "0px",
+ "border": "1px solid",
+ "border-color": () => "colors.text",
+ "border-radius": "3px",
+ "font-size": "18px",
+ "width": "100%",
+ "background": () => "colors.background"
+ }
+ },
+ "disabled": {
+ name: "Styles for disabled input",
+ value: {
+ "border-color": () => "colors.default",
+ "background": () => "colors.default",
+ "color": () => "colors.default",
+ "cursor": "not-allowed"
+ }
+ },
+ "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",
+ "background": () => "colors.error"
+ }
+ }
+
+};
+return chassis;
+} ) );
From 6bcf58e8a8f4e9f511df31e3ef2e296304ff8159 Mon Sep 17 00:00:00 2001
From: Nash Vail
Date: Thu, 9 Jun 2016 12:11:29 +0530
Subject: [PATCH 2/7] Inputs: Added two new input sizes
---
demos/inputs.html | 214 ++++++++++++++++++++++++++++++++-
scss/atoms/inputs/_inputs.scss | 10 ++
scss/atoms/inputs/_mixins.scss | 12 +-
scss/style.scss | 3 +-
scss/variables/inputs.js | 12 ++
5 files changed, 248 insertions(+), 3 deletions(-)
diff --git a/demos/inputs.html b/demos/inputs.html
index a3968d9..00f9aa1 100644
--- a/demos/inputs.html
+++ b/demos/inputs.html
@@ -10,7 +10,7 @@
- Inputs
+ Inputs - (Size: Default)
@@ -116,6 +116,218 @@ Inputs (Error)
+ Inputs - (Size: Small)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Disabled)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Focus)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Active)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Error)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs - (Size: Large)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Disabled)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Focus)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Active)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs (Error)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+