diff options
author | Tayane Fernandes <tayane.rmf@gmail.com> | 2017-02-07 18:51:08 -0200 |
---|---|---|
committer | Tayane Fernandes <tayane.rmf@gmail.com> | 2017-02-07 18:51:08 -0200 |
commit | 31b0bcaa673794024a71065be76681150ad4b9d6 (patch) | |
tree | 1895bf9990c05814ec009c615c206c8fc91f4064 /web-ui/src/common | |
parent | a47f32a7b0728c402787ebe914a0953638734820 (diff) |
[#922] Extract input field to a component
with @anikarni
Diffstat (limited to 'web-ui/src/common')
-rw-r--r-- | web-ui/src/common/input_field/input-field.scss | 77 | ||||
-rw-r--r-- | web-ui/src/common/input_field/input_field.js | 29 | ||||
-rw-r--r-- | web-ui/src/common/submit_button/submit-button.scss (renamed from web-ui/src/common/submit-button.scss) | 0 | ||||
-rw-r--r-- | web-ui/src/common/submit_button/submit_button.js (renamed from web-ui/src/common/submit_button.js) | 0 |
4 files changed, 106 insertions, 0 deletions
diff --git a/web-ui/src/common/input_field/input-field.scss b/web-ui/src/common/input_field/input-field.scss new file mode 100644 index 00000000..ad5dda13 --- /dev/null +++ b/web-ui/src/common/input_field/input-field.scss @@ -0,0 +1,77 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + */ + +@import "~scss/base/colors"; + +.input-field-group { + position:relative; + margin: 1.5em 0; + width: 100%; +} + +.input-field-label { + font-size: 0.9em; + margin-bottom: 10px; + display: inline-block; + color:#999; + position:absolute; + pointer-events:none; + left: 6px; + top:10px; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; +} + +.input-field { + display: block; + border: none; + border-bottom: solid 1px $dark_blue; + width: 100%; + height: auto; + padding: 0.3em 0px; + + &:focus { + outline:none; + border-width: 2px; + } +} + +.input-field:focus ~ .input-field-label, .input-field:valid ~ .input-field-label { + top:-12px; + left: 0; + font-size:0.7em; + color: $dark_blue; +} + +@media only screen and (min-width : 500px) { + .input-field-group { + flex-basis: 70%; + -webkit-align-self: center; + align-self: center; + } +} + +@media only screen and (min-width : 960px) { + .input-field-group { + width: 300px; + -webkit-align-self: flex-start; + align-self: flex-start; + margin-top: 3em; + font-size: 1em; + } +} diff --git a/web-ui/src/common/input_field/input_field.js b/web-ui/src/common/input_field/input_field.js new file mode 100644 index 00000000..43899419 --- /dev/null +++ b/web-ui/src/common/input_field/input_field.js @@ -0,0 +1,29 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + */ + +import React from 'react' + +import './input-field.scss' + +const InputField = ({ label, name }) => ( + <div className='input-field-group'> + <input type='text' name={name} className='input-field' required /> + <label className='input-field-label' htmlFor={name}>{label}</label> + </div> +) + +export default InputField diff --git a/web-ui/src/common/submit-button.scss b/web-ui/src/common/submit_button/submit-button.scss index 86a24e5a..86a24e5a 100644 --- a/web-ui/src/common/submit-button.scss +++ b/web-ui/src/common/submit_button/submit-button.scss diff --git a/web-ui/src/common/submit_button.js b/web-ui/src/common/submit_button/submit_button.js index 89cfc55b..89cfc55b 100644 --- a/web-ui/src/common/submit_button.js +++ b/web-ui/src/common/submit_button/submit_button.js |