diff --git a/src/client/components/types/number.raw.scss b/src/client/components/types/number.raw.scss new file mode 100644 index 0000000..aa670aa --- /dev/null +++ b/src/client/components/types/number.raw.scss @@ -0,0 +1,20 @@ +:scope { + display: flex; +} + +input { + max-width: 5em; +} + +.controls { + display: flex; + flex-direction: column; +} + +button { + border-left: none; + + &:first-child { + border-bottom: none; + } +} diff --git a/src/client/components/types/number.type-renderer.jsx b/src/client/components/types/number.type-renderer.jsx index 003a9d7..cd2a21c 100644 --- a/src/client/components/types/number.type-renderer.jsx +++ b/src/client/components/types/number.type-renderer.jsx @@ -1,8 +1,14 @@ +import {compose} from '@avocado/core'; +import contempo from 'contempo'; import PropTypes from 'prop-types'; import React from 'react'; import propertyPropTypes from './property-prop-types'; +const decorate = compose( + contempo(require('./number.raw.scss')), +); + const Number = ({ options, value, @@ -17,7 +23,19 @@ const Number = ({ ))} ) - : + : ( + <> + (e.preventDefault(), false)} + type="text" + value={value} + /> +
+ + +
+ + ) } ); @@ -29,5 +47,5 @@ Number.propTypes = { export default { type: 'number', - component: Number, + component: decorate(Number), }; diff --git a/src/client/index.scss b/src/client/index.scss index 787ad04..4cd2b39 100644 --- a/src/client/index.scss +++ b/src/client/index.scss @@ -119,6 +119,12 @@ fieldset { width: 100%; } +button { + background: #222222; + border: 1px solid rgba(255, 255, 255, 0.1); + color: #ffffff; +} + button, input[type="checkbox"], input[type="checkbox"] + label { cursor: pointer; }