From b8403f6576eddfa978b98cf1e82aac4840892b6a Mon Sep 17 00:00:00 2001 From: sumedh123 Date: Sun, 29 Jan 2017 10:03:15 +0530 Subject: [PATCH 1/5] New Components : HTML5 form elements --- demos/form-elements.html | 25 +++++ scss/atoms/buttons/_buttons.scss | 2 +- .../_form-base-styling.scss | 100 ++++++++++++++++++ scss/atoms/html5-form-elements/_mixin.scss | 71 +++++++++++++ scss/lint.scss | 3 +- scss/variables/html5Elements.js | 35 ++++++ 6 files changed, 234 insertions(+), 2 deletions(-) create mode 100644 demos/form-elements.html create mode 100644 scss/atoms/html5-form-elements/_form-base-styling.scss create mode 100644 scss/atoms/html5-form-elements/_mixin.scss create mode 100644 scss/variables/html5Elements.js diff --git a/demos/form-elements.html b/demos/form-elements.html new file mode 100644 index 0000000..c74a0b9 --- /dev/null +++ b/demos/form-elements.html @@ -0,0 +1,25 @@ + + + + + html5 form elements + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index 3474d63..7d4baa2 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -39,7 +39,7 @@ } .btn { - @include btn( map-get($btn-element, margin)); + @include btn(map-get($btn-element, margin)); } /* Button Colors */ diff --git a/scss/atoms/html5-form-elements/_form-base-styling.scss b/scss/atoms/html5-form-elements/_form-base-styling.scss new file mode 100644 index 0000000..bbf38ea --- /dev/null +++ b/scss/atoms/html5-form-elements/_form-base-styling.scss @@ -0,0 +1,100 @@ +/* +* ==================================== +* Form base styling for html5 elements +* ==================================== +*/ + +@import + "dist/chassis", + "mixin"; + +#wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + + +input[ type = "search" ] { + display: block; + border-radius: .2em; + padding-left: .5em; + color: map-get($formelements-searchbox, color); + border: 1px solid map-get($formelements-searchbox, border-color); + background: transparent; + @include focus; + + &.searchbox-sm { + @include sm; + } + + &.searchbox-md { + @include md; + } + + &.searchbox-lg { + @include lg; + } +} + +input[ type = "email" ] { + display: block; + border-radius: .2em; + padding-left: .5em; + color: #566573; + border: 1px solid map-get($formelements-emailbox, border-color); + background: transparent; + + &:focus:not(:invalid) { + outline: none; + border-color: #3498db; + box-shadow: 0 0 4px #3498db; + } + + &:focus:invalid { + outline: none; + border-color: #e74c3c; + box-shadow: 0 0 4px #ec7063; + } + + &.emaibox-sm { + @include sm; + } + + &.emailbox-md { + @include md; + } + + &.emailbox-lg { + @include lg; + } +} + +.urlbox { + display: block; + padding-left: .5em; + width: 20em; + line-height: 2.5em; + font-size: 1rem; + color: #566573; + border: 1px solid #212f3d; + border-radius: .2em; + background: transparent; + + &::-webkit-input-placeholder { + padding-left: 1em; + font-size: 1.2rem; + } + + &::-moz-input-placeholder { + padding-left: 1em; + font-size: 1.2rem; + } + + + &::-o-input-placeholder { + padding-left: 1em; + font-size: 1.2rem; + } +} diff --git a/scss/atoms/html5-form-elements/_mixin.scss b/scss/atoms/html5-form-elements/_mixin.scss new file mode 100644 index 0000000..8288cbb --- /dev/null +++ b/scss/atoms/html5-form-elements/_mixin.scss @@ -0,0 +1,71 @@ +@mixin focus { + &:focus { + outline: none; + border-color: #3498db; + box-shadow: 0 0 4px #3498db; + } + + &::-webkit-input-placeholder { + padding-left: 1em; + font-size: 1.2rem; + } + + &::-moz-input-placeholder { + padding-left: 1em; + font-size: 1.2rem; + } + + + &::-o-input-placeholder { + padding-left: 1em; + font-size: 1.2rem; + } + + &.disabled { + pointer-events: none; + cursor: map-get($btn-disable, cursor); + opacity: .4; + } +} + +@mixin sm { + width: 10em; + line-height: 1.5em; + font-size: 1rem; + border-radius: .2em; + @extend %placeholder; +} + +@mixin md { + width: 15em; + line-height: 2em; + font-size: 1rem; + border-radius: .2em; + @extend %placeholder; +} + +@mixin lg { + width: 20em; + line-height: 2.5em; + font-size: 1rem; + border-radius: .2em; + @extend %placeholder; +} + +%placeholder { + &::-webkit-input-placeholder { + padding-left: 1em; + font-size: 1rem; + } + + &::-moz-input-placeholder { + padding-left: 1em; + font-size: 1rem; + } + + + &::-o-input-placeholder { + padding-left: 1em; + font-size: 1rem; + } +} diff --git a/scss/lint.scss b/scss/lint.scss index 427a48d..4ae74ff 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/html5-form-elements/form-base-styling"; @import "views/main"; diff --git a/scss/variables/html5Elements.js b/scss/variables/html5Elements.js new file mode 100644 index 0000000..5181097 --- /dev/null +++ b/scss/variables/html5Elements.js @@ -0,0 +1,35 @@ +(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.formelements = { + "searchbox" : { + name : "Search Input Styling", + value : { + "border-color" : "#212f3d", + "color" : "#566573" + } + }, + "emailbox" : { + name : "Email Input Styling", + value : { + "valid" : { + "color" : "#566573", + "border-color" : "#212f3d" + }, + "invalid" : { + "color" : "#566573", + "border-color" : "#e74c3c" + } + } + } +}; + +return chassis; +} ) ); From c5af6c728706281204ceaa197858b20913935c83 Mon Sep 17 00:00:00 2001 From: sumedh123 Date: Mon, 13 Feb 2017 22:40:51 +0530 Subject: [PATCH 2/5] New Components : update html5Elements.js to fix travis ci build fail --- scss/variables/html5Elements.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/scss/variables/html5Elements.js b/scss/variables/html5Elements.js index 5181097..0655462 100644 --- a/scss/variables/html5Elements.js +++ b/scss/variables/html5Elements.js @@ -10,22 +10,22 @@ chassis.formelements = { "searchbox" : { - name : "Search Input Styling", - value : { + name: "Search Input Styling", + value: { "border-color" : "#212f3d", "color" : "#566573" } }, - "emailbox" : { - name : "Email Input Styling", - value : { - "valid" : { - "color" : "#566573", - "border-color" : "#212f3d" + "emailbox": { + name: "Email Input Styling", + value: { + "valid": { + "color": "#566573", + "border-color": "#212f3d" }, - "invalid" : { - "color" : "#566573", - "border-color" : "#e74c3c" + "invalid": { + "color": "#566573", + "border-color": "#e74c3c" } } } From 879afe23f977e2edac0840446f8c038b7d2fe988 Mon Sep 17 00:00:00 2001 From: sumedh123 Date: Mon, 13 Feb 2017 22:50:45 +0530 Subject: [PATCH 3/5] New Components : update html5Elements.js to fix travis CI build fail --- scss/variables/html5Elements.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/variables/html5Elements.js b/scss/variables/html5Elements.js index 0655462..d483416 100644 --- a/scss/variables/html5Elements.js +++ b/scss/variables/html5Elements.js @@ -9,11 +9,11 @@ }( this, function( chassis ) { chassis.formelements = { - "searchbox" : { + "searchbox": { name: "Search Input Styling", value: { - "border-color" : "#212f3d", - "color" : "#566573" + "border-color": "#212f3d", + "color": "#566573" } }, "emailbox": { From 60c3424a9dab33e0751a28d7b9b2cde3d85773eb Mon Sep 17 00:00:00 2001 From: sumedh123 Date: Mon, 13 Feb 2017 22:54:08 +0530 Subject: [PATCH 4/5] New Components : update html5Elements.js to fix travis CI build fail --- scss/variables/html5Elements.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/variables/html5Elements.js b/scss/variables/html5Elements.js index d483416..2befc33 100644 --- a/scss/variables/html5Elements.js +++ b/scss/variables/html5Elements.js @@ -1,4 +1,4 @@ -(function( root, factory ) { +( function( root, factory ) { if ( typeof define === "function" && define.amd ) { define( [ "./chassis" ], factory ); } else if ( typeof exports === "object" ) { From 6348d7398906ebeb0edb1d661712afff02d02b9a Mon Sep 17 00:00:00 2001 From: sumedh123 Date: Wed, 15 Feb 2017 16:14:53 +0530 Subject: [PATCH 5/5] New Component : update id selector to class --- demos/form-elements.html | 2 +- scss/atoms/html5-form-elements/_form-base-styling.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/demos/form-elements.html b/demos/form-elements.html index c74a0b9..ad5f8a4 100644 --- a/demos/form-elements.html +++ b/demos/form-elements.html @@ -10,7 +10,7 @@ -
+


diff --git a/scss/atoms/html5-form-elements/_form-base-styling.scss b/scss/atoms/html5-form-elements/_form-base-styling.scss index bbf38ea..01b5dd6 100644 --- a/scss/atoms/html5-form-elements/_form-base-styling.scss +++ b/scss/atoms/html5-form-elements/_form-base-styling.scss @@ -8,7 +8,7 @@ "dist/chassis", "mixin"; -#wrapper { +.wrapper { display: flex; flex-direction: column; justify-content: center;