From 416f94253f36bd3dfee47486f647e0f8bff60aba Mon Sep 17 00:00:00 2001 From: Nash Vail Date: Wed, 8 Jun 2016 12:28:36 +0530 Subject: [PATCH 1/8] 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/8] 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)

+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/scss/atoms/inputs/_inputs.scss b/scss/atoms/inputs/_inputs.scss index 0d86e98..cd55b71 100644 --- a/scss/atoms/inputs/_inputs.scss +++ b/scss/atoms/inputs/_inputs.scss @@ -15,3 +15,13 @@ .input-label { @include input-label(); } + +/* Input Sizes */ + +.input-lg { + @include input-lg(); +} + +.input-sm { + @include input-sm(); +} diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss index 585218d..8211c88 100644 --- a/scss/atoms/inputs/_mixins.scss +++ b/scss/atoms/inputs/_mixins.scss @@ -40,7 +40,7 @@ $margin-label: em(map-get($inputs-label, margin)); } } -// Input state mixins +/* Input States */ @mixin input-focus() { border-color: map-deep-get($inputs-focus, border-color, light); @@ -80,3 +80,13 @@ $margin-label: em(map-get($inputs-label, margin)); font-weight: map-get($inputs-label-error, font-weight); } } + +/* Input Sizes */ + +@mixin input-lg() { + font-size: em(map-get($inputs-lg, font-size)); +} + +@mixin input-sm() { + font-size: em(map-get($inputs-sm, font-size)); +} 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 index bb1fc66..a9edc07 100644 --- a/scss/variables/inputs.js +++ b/scss/variables/inputs.js @@ -88,6 +88,18 @@ chassis.inputs = { "border-color": () => "colors.error", "background": () => "colors.error" } + }, + "lg": { + name: "Styles for large sized inputs", + value: { + "font-size": "30px" + } + }, + "sm": { + name: "Styles for small sized inputs", + value: { + "font-size": "14px" + } } }; From fa7a0ff8e41fccf310157dd3524f2bfeab7ccafe Mon Sep 17 00:00:00 2001 From: Nash Vail Date: Thu, 16 Jun 2016 22:43:37 +0530 Subject: [PATCH 3/8] Inputs: [Alpha] Added radio buttons --- demos/inputs.html | 606 +++++++++++++++------------------ scss/atoms/inputs/_inputs.scss | 6 + scss/atoms/inputs/_mixins.scss | 37 ++ scss/variables/inputs.js | 9 + 4 files changed, 328 insertions(+), 330 deletions(-) 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" + } } }; From df186fcfd15481e406bd2171c68bdfaf89a8ea5b Mon Sep 17 00:00:00 2001 From: Nash Vail Date: Sat, 18 Jun 2016 13:43:17 +0530 Subject: [PATCH 4/8] Inputs: [Alpha] Added checkboxes --- demos/inputs.html | 16 ++++++++ scss/atoms/inputs/_inputs.scss | 4 ++ scss/atoms/inputs/_mixins.scss | 68 ++++++++++++++++++++++++++++++++-- scss/variables/inputs.js | 10 ++++- 4 files changed, 93 insertions(+), 5 deletions(-) diff --git a/demos/inputs.html b/demos/inputs.html index df44253..ff4adfb 100644 --- a/demos/inputs.html +++ b/demos/inputs.html @@ -9,9 +9,25 @@ +

Inputs - (Size: Default)

+

Checkboxes

+ + + + + + + + + + + + +

Radio buttons

+
diff --git a/scss/atoms/inputs/_inputs.scss b/scss/atoms/inputs/_inputs.scss index 6a568d1..e03681a 100644 --- a/scss/atoms/inputs/_inputs.scss +++ b/scss/atoms/inputs/_inputs.scss @@ -31,3 +31,7 @@ .radiobutton { @include radiobutton(); } + +.checkbox { + @include checkbox(); +} diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss index 83ed9df..69e5189 100644 --- a/scss/atoms/inputs/_mixins.scss +++ b/scss/atoms/inputs/_mixins.scss @@ -93,8 +93,8 @@ $margin-label: em(map-get($inputs-label, margin)); /* Radio Buttons */ -$default-border: map-deep-get($inputs-radiobutton, default-color, base); -$checked-border: map-deep-get($inputs-radiobutton, checked-color, base); +$radio-default-border: map-deep-get($inputs-radiobutton, default-color, base); +$radio-checked-border: map-deep-get($inputs-radiobutton, checked-color, base); @mixin radiobutton() { opacity: 0; @@ -114,7 +114,7 @@ $checked-border: map-deep-get($inputs-radiobutton, checked-color, base); 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; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), inset 0 0 0 1px $radio-default-border; padding: 2px; margin-right: 10px; text-align: center; @@ -123,7 +123,67 @@ $checked-border: map-deep-get($inputs-radiobutton, checked-color, base); } &:checked + &-label:before { - box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), inset 0 0 0 7px $checked-border; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), 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: 0 2px 2px 0 rgba(0,0,0,.24); + padding: 2px; + border: 1px solid $checkbox-default-border; + margin-right: 10px; + text-align: center; + border-radius: 3px; + 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/variables/inputs.js b/scss/variables/inputs.js index 1f5c4be..7124c40 100644 --- a/scss/variables/inputs.js +++ b/scss/variables/inputs.js @@ -109,8 +109,16 @@ chassis.inputs = { "default-color": () => "colors.text", "checked-color": () => "colors.info" } + }, + "checkbox": { + name: "Styles for custom radio buttons", + value: { + "width": "20px", + "height": "20px", + "default-color": () => "colors.text", + "checked-color": () => "colors.info" + } } - }; return chassis; } ) ); From 5946e34d45eff14d278741433a8819e7cbaf3795 Mon Sep 17 00:00:00 2001 From: Nash Vail Date: Tue, 26 Jul 2016 10:41:44 +0530 Subject: [PATCH 5/8] Inputs: new styles plus sizes --- demos/demos.css | 5 + demos/inputs.html | 439 +++++++++++++-------------------- scss/atoms/inputs/_inputs.scss | 16 +- scss/atoms/inputs/_mixins.scss | 129 ++++++---- scss/variables/inputs.js | 64 +++-- 5 files changed, 301 insertions(+), 352 deletions(-) diff --git a/demos/demos.css b/demos/demos.css index 6c50aa0..0a182b9 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -3,3 +3,8 @@ body { margin: 3em auto; padding: 0 1em; } + +ul { + margin: 0; + padding: 0; +} diff --git a/demos/inputs.html b/demos/inputs.html index ff4adfb..0390969 100644 --- a/demos/inputs.html +++ b/demos/inputs.html @@ -10,286 +10,183 @@ -

Inputs - (Size: Default)

- -

Checkboxes

+

Inputs

+ - + - + - + +
+
+ + + + + + + + + + + + + + +
+
+ + +
    +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • + +
+ + + +

Inputs - Inline

+ + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + + + + + + + + + + + +
+
+ + + +

Inputs (Disabled)

+ + + + + + + + + + + + + +

Inputs (Readonly)

+ + + + + + + + + + + + + +

Inputs (Focus)

+ + + + + + + + + + + + + +

Inputs (Active)

+ + + + + + + + + + + + + +

Inputs (Error)

+ + + + + + + + + + + + -

Radio buttons

- -
- - -
- -
- - -
- -
- - -
- -
- - -
- - - - - - - - - - - - -

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 e03681a..661ff19 100644 --- a/scss/atoms/inputs/_inputs.scss +++ b/scss/atoms/inputs/_inputs.scss @@ -16,20 +16,8 @@ @include input-label(); } -/* Input Sizes */ - -.input-lg { - @include input-lg(); -} - -.input-sm { - @include input-sm(); -} - -/* Checkboxes and RadioButtons (IDK why radiobuttons remind me of radiohead yo!) */ - -.radiobutton { - @include radiobutton(); +.radio { + @include radio(); } .checkbox { diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss index 69e5189..ee67ea1 100644 --- a/scss/atoms/inputs/_mixins.scss +++ b/scss/atoms/inputs/_mixins.scss @@ -5,20 +5,20 @@ * ========================================================================== */ -$margin: em(map-get($inputs-element, margin)); +$margin: em(map-get($inputs-input-full-width, margin)); $margin-label: em(map-get($inputs-label, margin)); @mixin input() { - padding: em(map-get($inputs-element, padding)); + padding: em(map-get($inputs-input-full-width, 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)); + 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-element, font-size)); - width: map-get($inputs-element, width); + font-size: em(map-get($inputs-input-full-width, font-size)); + width: map-get($inputs-input-full-width, width); &:focus, &.focus { @@ -30,6 +30,10 @@ $margin-label: em(map-get($inputs-label, margin)); @include input-disabled(); } + &.readonly { + @include input-readonly(); + } + &:active, &.active { @include input-active(); @@ -38,6 +42,25 @@ $margin-label: em(map-get($inputs-label, margin)); &.error { @include input-error(); } + + /* Sizes */ + &.input-md { + @include input-md(); + } + + &.input-lg { + @include input-lg(); + } +} + +/* Input Sizes */ + +@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 */ @@ -46,61 +69,81 @@ $margin-label: em(map-get($inputs-label, margin)); 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); + box-shadow: map-get($inputs-shadows, inset), map-get($inputs-shadows, focus); } @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); + 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, error-base), map-get($inputs-shadows, error-spread); - background: rgba(map-deep-get($inputs-error, background, base), .08); + box-shadow: map-get($inputs-shadows, inset), map-get($inputs-shadows, error); } +/* 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); - font-size: em(map-get($inputs-label, font-size)); - font-weight: map-get($inputs-label, font-weight); - margin: $margin-label 0; + margin-bottom: em(map-get($inputs-label, margin)); + + &.input-label-md { + @include input-label-md(); + } + + &.input-label-lg { + @include input-label-lg(); + } &.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); + @include input-label-error(); + } + + &.input-label-block { + display: block; } } -/* Input Sizes */ +@mixin input-label-error() { + color: map-deep-get($inputs-label-error, color, base); +} -@mixin input-lg() { - font-size: em(map-get($inputs-lg, font-size)); +@mixin input-label-md() { + font-size: em(map-get($inputs-label-md, font-size)); } -@mixin input-sm() { - font-size: em(map-get($inputs-sm, font-size)); +@mixin input-label-lg() { + font-size: em(map-get($inputs-label-lg, font-size)); } + + /* Radio Buttons */ -$radio-default-border: map-deep-get($inputs-radiobutton, default-color, base); -$radio-checked-border: map-deep-get($inputs-radiobutton, checked-color, base); +$radio-default-border: map-deep-get($inputs-radio, default-color, base); +$radio-checked-border: map-deep-get($inputs-radio, checked-color, base); -@mixin radiobutton() { +@mixin radio() { opacity: 0; position: absolute; - &-label { + & + label { display: inline-block; vertical-align: middle; margin: 5px; @@ -108,13 +151,13 @@ $radio-checked-border: map-deep-get($inputs-radiobutton, checked-color, base); position: relative; } - & + &-label:before { + & + 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 $radio-default-border; + width: map-get($inputs-radio, width); + height: map-get($inputs-radio, height); + box-shadow: inset 0 0 0 1px $radio-default-border; padding: 2px; margin-right: 10px; text-align: center; @@ -122,8 +165,8 @@ $radio-checked-border: map-deep-get($inputs-radiobutton, checked-color, base); border-radius: 50%; } - &:checked + &-label:before { - box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), inset 0 0 0 7px $radio-checked-border; + &:checked + label:before { + box-shadow: inset 0 0 0 7px $radio-checked-border; transition: box-shadow .2s; } } @@ -137,7 +180,7 @@ $checkbox-checked-border: map-deep-get($inputs-checkbox, checked-color, base); opacity: 0; position: absolute; - &-label { + & + label { display: inline-block; vertical-align: middle; margin: 5px; @@ -145,22 +188,22 @@ $checkbox-checked-border: map-deep-get($inputs-checkbox, checked-color, base); position: relative; } - & + &-label:before { + & + label:before { content: ""; display: inline-block; vertical-align: middle; width: map-get($inputs-checkbox, width); height: map-get($inputs-checkbox, height); - box-shadow: 0 2px 2px 0 rgba(0,0,0,.24); + // box-shadow: 0 2px 2px 0 rgba(0,0,0,.24); padding: 2px; border: 1px solid $checkbox-default-border; margin-right: 10px; text-align: center; - border-radius: 3px; + border-radius: 2px; transition: background-color .1s; } - & + &-label:after { + & + label:after { content: ""; width: 12px; height: 6px; @@ -175,13 +218,13 @@ $checkbox-checked-border: map-deep-get($inputs-checkbox, checked-color, base); transform: rotate(-65deg); } - &:checked + &-label:before { + &:checked + label:before { background: $checkbox-checked-border; border-color: $checkbox-checked-border; transition: background-color .1s; } - &:checked + &-label:after { + &:checked + label:after { opacity: 1; transform: rotate(-45deg); transition: transform .1s; diff --git a/scss/variables/inputs.js b/scss/variables/inputs.js index 7124c40..76b8d0a 100644 --- a/scss/variables/inputs.js +++ b/scss/variables/inputs.js @@ -12,12 +12,9 @@ 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)" + "inset": "inset 0px 2px 2px 0px rgba(0,0,0,0.10)", + "focus": "0px 0px 2px 1px #03a9f4", + "error": "0px 0px 2px 1px #F44336", } }, "transitions": { @@ -32,30 +29,40 @@ chassis.inputs = { "label": { name: "Styles for input label", value: { - "display": "block", + "display": "inline", "max-width": "100%", - "font-size": "18px", - "font-weight": "600", - "margin": "8px" + "font-size": "20px", + "margin": "5px" + } + }, + "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-error": { name: "Styles for error labels", value: { - "font-size": "14px", color: () => "colors.error", "font-weight": "400" } }, - "element": { + "input-full-width": { name: "Generic styles for single line inputs", value: { - "padding": "15px", + "padding": "10px", "margin": "0px", "border": "1px solid", "border-color": () => "colors.text", - "border-radius": "3px", - "font-size": "18px", + "border-radius": "2px", + "font-size": "20px", "width": "100%", "background": () => "colors.background" } @@ -63,12 +70,21 @@ chassis.inputs = { "disabled": { name: "Styles for disabled input", value: { - "border-color": () => "colors.default", + "border-color": () => "colors.text", "background": () => "colors.default", - "color": () => "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: { @@ -89,25 +105,25 @@ chassis.inputs = { "background": () => "colors.error" } }, - "lg": { + "input-md": { name: "Styles for large sized inputs", value: { - "font-size": "30px" + "font-size": "28px" } }, - "sm": { + "input-lg": { name: "Styles for small sized inputs", value: { - "font-size": "14px" + "font-size": "36px" } }, - "radiobutton": { + "radio": { name: "Styles for custom radio buttons", value: { "width": "20px", "height": "20px", "default-color": () => "colors.text", - "checked-color": () => "colors.info" + "checked-color": () => "colors.primary" } }, "checkbox": { @@ -116,7 +132,7 @@ chassis.inputs = { "width": "20px", "height": "20px", "default-color": () => "colors.text", - "checked-color": () => "colors.info" + "checked-color": () => "colors.primary" } } }; From 73d94520ea5a3014ed9ad928fc430c161221d86e Mon Sep 17 00:00:00 2001 From: Nash Vail Date: Tue, 26 Jul 2016 21:46:39 +0530 Subject: [PATCH 6/8] Inputs: Added xs size and code improvements --- demos/demos.css | 1 + demos/inputs.html | 36 ++++++++++++++++++++++------------ scss/atoms/inputs/_mixins.scss | 23 ++++++++++++++++++---- scss/variables/inputs.js | 12 ++++++++++++ 4 files changed, 56 insertions(+), 16 deletions(-) diff --git a/demos/demos.css b/demos/demos.css index 0a182b9..c20ae8e 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -7,4 +7,5 @@ body { ul { margin: 0; padding: 0; + list-style-type: none; } diff --git a/demos/inputs.html b/demos/inputs.html index 0390969..f35c4d5 100644 --- a/demos/inputs.html +++ b/demos/inputs.html @@ -10,7 +10,9 @@ -

Inputs

+

Chassis - Inputs

+ +

Checkboxes and Radios

@@ -44,25 +46,25 @@

Inputs


-
    +
    • - - + +
    • - - + +
    • - - + +
    • - - + +
    @@ -71,8 +73,16 @@

    Inputs

    Inputs - Inline

    - - +
    + + + + + @@ -98,6 +108,8 @@

    Inputs - Inline

    + + + +
    +

    Inputs

    + diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss index ee67ea1..33bc1bb 100644 --- a/scss/atoms/inputs/_mixins.scss +++ b/scss/atoms/inputs/_mixins.scss @@ -7,9 +7,10 @@ $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: em(map-get($inputs-input-full-width, padding)); + padding: $input-padding 0 $input-padding $input-padding; margin: $margin; border: map-get($inputs-input-full-width, border); border-color: map-deep-get($inputs-input-full-width, border-color, light); @@ -44,6 +45,10 @@ $margin-label: em(map-get($inputs-label, margin)); } /* Sizes */ + &.input-xs { + @include input-xs(); + } + &.input-md { @include input-md(); } @@ -55,6 +60,10 @@ $margin-label: em(map-get($inputs-label, margin)); /* 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)); } @@ -111,6 +120,10 @@ $margin-label: em(map-get($inputs-label, margin)); @include input-label-lg(); } + &.input-label-xs { + @include input-label-xs(); + } + &.error { @include input-label-error(); } @@ -132,7 +145,9 @@ $margin-label: em(map-get($inputs-label, margin)); 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 */ @@ -157,7 +172,7 @@ $radio-checked-border: map-deep-get($inputs-radio, checked-color, base); 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; + 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; @@ -194,7 +209,7 @@ $checkbox-checked-border: map-deep-get($inputs-checkbox, checked-color, base); vertical-align: middle; width: map-get($inputs-checkbox, width); height: map-get($inputs-checkbox, height); - // box-shadow: 0 2px 2px 0 rgba(0,0,0,.24); + box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.10); padding: 2px; border: 1px solid $checkbox-default-border; margin-right: 10px; diff --git a/scss/variables/inputs.js b/scss/variables/inputs.js index 76b8d0a..2d73bc2 100644 --- a/scss/variables/inputs.js +++ b/scss/variables/inputs.js @@ -47,6 +47,12 @@ chassis.inputs = { "font-size": "36px" } }, + "label-xs": { + name: "Styles for extra small input labels", + value: { + "font-size": "14px" + } + }, "label-error": { name: "Styles for error labels", value: { @@ -117,6 +123,12 @@ chassis.inputs = { "font-size": "36px" } }, + "input-xs": { + name: "Styles for extra small sized inputs", + value: { + "font-size": "14px" + } + }, "radio": { name: "Styles for custom radio buttons", value: { From ad6dd09548585d079d89a8da194c604e24f3298b Mon Sep 17 00:00:00 2001 From: Nash Vail Date: Sat, 30 Jul 2016 11:36:26 +0530 Subject: [PATCH 7/8] Inputs: added multiple sizes, removed table layout --- demos/demos.css | 32 +++ demos/inputs.html | 432 +++++++++++++++++++++++++++++---- scss/atoms/inputs/_mixins.scss | 12 +- scss/variables/inputs.js | 19 +- 4 files changed, 435 insertions(+), 60 deletions(-) diff --git a/demos/demos.css b/demos/demos.css index c20ae8e..cfe6171 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -1,3 +1,14 @@ +.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; @@ -9,3 +20,24 @@ ul { 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 index f35c4d5..5333d2e 100644 --- a/demos/inputs.html +++ b/demos/inputs.html @@ -73,40 +73,45 @@

    Checkboxes and Radios

    Inputs - Inline

    - - - - - - - - - - - - - - - - - -
    +
    +
    +
    -
    		+ +
    -
    + + + +
    +
    -
    		+ +
    -
    + + + +
    +
    -
    		+ +
    -
    + + + +
    +
    -
    		+ +
    -
    +
+ + + +

Inputs

@@ -122,83 +127,408 @@

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/_mixins.scss b/scss/atoms/inputs/_mixins.scss index 33bc1bb..6120bd7 100644 --- a/scss/atoms/inputs/_mixins.scss +++ b/scss/atoms/inputs/_mixins.scss @@ -11,7 +11,7 @@ $input-padding: em(map-get($inputs-input-full-width, padding)); @mixin input() { padding: $input-padding 0 $input-padding $input-padding; - margin: $margin; + 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); @@ -44,6 +44,10 @@ $input-padding: em(map-get($inputs-input-full-width, padding)); @include input-error(); } + &.warning { + @include input-warning(); + } + /* Sizes */ &.input-xs { @include input-xs(); @@ -104,13 +108,17 @@ $input-padding: em(map-get($inputs-input-full-width, padding)); 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); - margin-bottom: em(map-get($inputs-label, margin)); &.input-label-md { @include input-label-md(); diff --git a/scss/variables/inputs.js b/scss/variables/inputs.js index 2d73bc2..e0babda 100644 --- a/scss/variables/inputs.js +++ b/scss/variables/inputs.js @@ -13,8 +13,9 @@ chassis.inputs = { name: "Styles for input shadows", value: { "inset": "inset 0px 2px 2px 0px rgba(0,0,0,0.10)", - "focus": "0px 0px 2px 1px #03a9f4", + "focus": "0px 0px 2px 1px #03A9F4", "error": "0px 0px 2px 1px #F44336", + "warning": "0px 0px 2px 1px #FF7043" } }, "transitions": { @@ -32,7 +33,7 @@ chassis.inputs = { "display": "inline", "max-width": "100%", "font-size": "20px", - "margin": "5px" + "margin": "0px" } }, "label-md": { @@ -56,15 +57,14 @@ chassis.inputs = { "label-error": { name: "Styles for error labels", value: { - color: () => "colors.error", - "font-weight": "400" + color: () => "colors.error" } }, "input-full-width": { name: "Generic styles for single line inputs", value: { "padding": "10px", - "margin": "0px", + "margin": "5px", "border": "1px solid", "border-color": () => "colors.text", "border-radius": "2px", @@ -107,8 +107,13 @@ chassis.inputs = { "error": { name: "Styles for error state of inputs", value: { - "border-color": () => "colors.error", - "background": () => "colors.error" + "border-color": () => "colors.error" + } + }, + "warning": { + name: "Styles for warning state inputs", + value: { + "border-color": () => "colors.warning" } }, "input-md": { From aa81f470d3df6b30ef3ccf8a10cf6f3066bd80d4 Mon Sep 17 00:00:00 2001 From: Nash Vail Date: Wed, 26 Oct 2016 19:08:13 +0530 Subject: [PATCH 8/8] Inputs: Added import to lint.scss --- scss/lint.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/lint.scss b/scss/lint.scss index 427a48d..aa4a513 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -17,7 +17,8 @@ @import "atoms/icons/icons", "atoms/typography/typography", - "atoms/buttons/buttons"; + "atoms/buttons/buttons", + "atoms/inputs/inputs"; @import "views/main";