[Work in progress] A Reactjs-based web app to help with ricing: designing beautiful unix desktop environments.
git clone https://mcol.xyz/code/unix.sexy
Log | Files | Refs

commit 8939f6c87c4156cb86c6058294cb1b6123ce37b8
parent c7926cd1a7e0715562d7b1418532c15fe7cddbef
Author: mcol <mcol@posteo.net>
Date:   Sat, 27 Jun 2020 13:37:36 +0100

split optbox css between it and colour

Diffstat:
Msrc/components/colour/index.css | 22----------------------
Msrc/components/colour/index.js | 1+
Msrc/components/optbox/index.css | 8+-------
Msrc/components/optbox/index.js | 5++++-
4 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/components/colour/index.css b/src/components/colour/index.css @@ -1,25 +1,3 @@ -.optbox { - border: 2px solid #eee; - width: 300px; - float: left; - height: 100%; - margin: 2px; -} - -.optbox h3 { - font-size: 100%; - text-align: center; - margin: 0; -} - -.optbox > div { - width: 100%; -} - -.optbox input { - width: 60px; -} - span.rc-color-picker-trigger { border: 2px solid #ddd; display: initial; diff --git a/src/components/colour/index.js b/src/components/colour/index.js @@ -14,6 +14,7 @@ export default function Colour(props) { <> <input value={props.value} onChange={e => dispatch(props.callback(fixColour(e.target.value)))} + style={{width: "60px"}} /> <ColorPicker color={props.value} diff --git a/src/components/optbox/index.css b/src/components/optbox/index.css @@ -17,11 +17,5 @@ } .optbox input { - width: 60px; -} - -span.rc-color-picker-trigger { - border: 2px solid #ddd; - display: initial; - padding: 5px 14px; + width: 40px; } diff --git a/src/components/optbox/index.js b/src/components/optbox/index.js @@ -5,7 +5,10 @@ import './index.css'; export default function OptBox(props) { return ( - <div className={`optbox ${props.className}`}> + <div + className={`optbox ${props.className}`} + style={{width: props.width}} + > <h3>{props.label}</h3> {props.children} </div>