diff --git a/demos/form-elements.html b/demos/form-elements.html new file mode 100644 index 0000000..ad5f8a4 --- /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..01b5dd6 --- /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..2befc33 --- /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; +} ) );