diff --git a/web/app/components/input/__button/input__button.scss b/web/app/components/input/__button/input__button.scss new file mode 100644 index 00000000..37ae9fca --- /dev/null +++ b/web/app/components/input/__button/input__button.scss @@ -0,0 +1,23 @@ +@import '../input.vars'; + +.input__button { + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + box-sizing: border-box; + width: $buttonWidth; + height: 100%; + padding: 0 10px; + font-size: 16px; + border: 0; + background: #00aaaa; + border-radius: 0 $borderRadius $borderRadius 0; + color: #fff; + cursor: pointer; + + &:hover { + background: #00ffff; + } +} diff --git a/web/app/components/input/__field/input__field.scss b/web/app/components/input/__field/input__field.scss new file mode 100644 index 00000000..9290a1e8 --- /dev/null +++ b/web/app/components/input/__field/input__field.scss @@ -0,0 +1,32 @@ +@import '../input.vars'; + +.input__field { + $lineHeight: 1.4; + $fontSize: 16px; + $paddingVrt: 10px; + $height: $fontSize * $lineHeight + $paddingVrt * 2; + + box-sizing: border-box; + width: 100%; + height: $height; + min-height: $height; + padding: $paddingVrt ($buttonWidth + 8px) $paddingVrt 15px; + font-family: 'PT Sans', Helvetica, Arial, sans-serif; + font-size: $fontSize; + line-height: $lineHeight; + box-shadow: 0 0 0 1px #eee; + border: 0; + border-radius: $borderRadius; + resize: none; + + &:focus { + box-shadow: 0 0 0 1px #aaa; + outline: none; + } + + &:valid { + + .input__button { + display: block; + } + } +} diff --git a/web/app/components/input/index.js b/web/app/components/input/index.js index 820718c5..4e017dfa 100644 --- a/web/app/components/input/index.js +++ b/web/app/components/input/index.js @@ -1,3 +1,6 @@ export { default } from './input'; require('./input.scss'); + +require('./__button/input__button.scss'); +require('./__field/input__field.scss'); diff --git a/web/app/components/input/input.jsx b/web/app/components/input/input.jsx index 5207de00..94c665ad 100644 --- a/web/app/components/input/input.jsx +++ b/web/app/components/input/input.jsx @@ -8,18 +8,25 @@ export default class Input extends Component { } autoResize() { - this.rootNode.style.height = ''; - this.setState({ height: this.rootNode.scrollHeight }); + this.fieldNode.style.height = ''; + this.setState({ height: this.fieldNode.scrollHeight }); } render(props, { height }) { return ( - +