mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Range Slider - creating component
This commit is contained in:
parent
c0e68b4ef6
commit
0b332cbeb6
@ -7,6 +7,7 @@ const ReactRouter = require('react-router');
|
||||
const Navigation = require('./navigation.js');
|
||||
const Home = require('../home');
|
||||
const Item = require('../item/');
|
||||
// const Item = require('../../../src/components/range-slider');
|
||||
|
||||
const {
|
||||
Base,
|
||||
|
35
ui/src/components/range-slider/index.js
Normal file
35
ui/src/components/range-slider/index.js
Normal file
@ -0,0 +1,35 @@
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const RangeSlider = ({
|
||||
className,
|
||||
style
|
||||
}) => {
|
||||
|
||||
const slider = classNames(
|
||||
className,
|
||||
styles.input
|
||||
);
|
||||
|
||||
// TODO: Get rid of inline styles
|
||||
style = {
|
||||
...style,
|
||||
display: 'block'
|
||||
};
|
||||
|
||||
return (
|
||||
<input
|
||||
className={slider}
|
||||
style={style}
|
||||
type="range"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
RangeSlider.propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
||||
module.exports = RangeSlider;
|
37
ui/src/components/range-slider/readme.md
Normal file
37
ui/src/components/range-slider/readme.md
Normal file
@ -0,0 +1,37 @@
|
||||
# `<RangeSlider>`
|
||||
|
||||
## demo
|
||||
|
||||
```embed
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Base = require('../base');
|
||||
const Container = require('../container');
|
||||
const Row = require('../row');
|
||||
const Column = require('../column');
|
||||
const RangeSlider = require('./index.js');
|
||||
const styles = require('./style.css');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Base>
|
||||
<Row>
|
||||
<Column xs={6}>
|
||||
<RangeSlider />
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const RangeSlider = require('ui/range-slider');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<RangeSlider />
|
||||
);
|
||||
}
|
||||
```
|
103
ui/src/components/range-slider/style.css
Normal file
103
ui/src/components/range-slider/style.css
Normal file
@ -0,0 +1,103 @@
|
||||
~colors: "../../shared/constants.js";
|
||||
~boxes: "../../shared/constants.js";
|
||||
|
||||
:root {
|
||||
--primary-background: ~colors.brandPrimary;
|
||||
--box-shaddow: ~boxes.bottomShaddow;
|
||||
--box-border: ~boxes.border.unchecked;
|
||||
}
|
||||
|
||||
.input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
|
||||
// Try and figure out why display none is being set in doc.css
|
||||
display: block;
|
||||
visibility: visible;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&::-webkit-slider-runnable-track {
|
||||
animate: 0.2s;
|
||||
background: var(--primary-background);
|
||||
border: var(--box-border);
|
||||
border-radius: 25px;
|
||||
box-shadow: var(--box-shaddow);
|
||||
cursor: pointer;
|
||||
height: 12.8px;
|
||||
width: 100%;
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
background: #ffffff;
|
||||
border: solid 1px #d8d8d8;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--box-shaddow);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin-top: -3.6px;
|
||||
width: 36px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
background: var(--primary-background);
|
||||
}
|
||||
&::-moz-range-track {
|
||||
animate: 0.2s;
|
||||
background: var(--primary-background);
|
||||
border: var(--box-border);
|
||||
border-radius: 25px;
|
||||
box-shadow: var(--box-shaddow);
|
||||
cursor: pointer;
|
||||
height: 12.8px;
|
||||
width: 100%;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
background: #65001c;
|
||||
box-shadow: var(--box-shaddow);
|
||||
border: 0px solid #000000;
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
width: 39px;
|
||||
}
|
||||
&::-ms-track {
|
||||
animate: 0.2s;
|
||||
background: transparent;
|
||||
borded: transparent;
|
||||
border-width: 39px 0;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
height: 12.8px;
|
||||
width: 100%;
|
||||
}
|
||||
&::-ms-fill-lower {
|
||||
background: var(--primary-background);
|
||||
border: var(--box-border);
|
||||
border-radius: 50px;
|
||||
box-shadow: var(--box-shaddow);
|
||||
}
|
||||
&::-ms-fill-upper {
|
||||
background: #e6e6e6;
|
||||
border: var(--box-border);
|
||||
border-radius: 50px;
|
||||
box-shadow: var(--box-shaddow);
|
||||
}
|
||||
&::-ms-thumb {
|
||||
background: #65001c;
|
||||
border: 0px solid #000000;
|
||||
border-radius: 7px;
|
||||
box-shadow: var(--box-shaddow);
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
width: 39px;
|
||||
}
|
||||
&:focus::-ms-fill-lower {
|
||||
background: var(--primary-background);
|
||||
}
|
||||
&:focus::-ms-fill-upper {
|
||||
background: #e6e6e6;
|
||||
}
|
||||
}
|
@ -14,6 +14,7 @@ module.exports = {
|
||||
'Radio Group': require('./components/radio-group/readme.md'),
|
||||
Column: require('./components/column/readme.md'),
|
||||
Button: require('./components/button/readme.md'),
|
||||
'Range Slider': require('./components/range-slider/readme.md'),
|
||||
Toggle: require('./components/toggle/readme.md'),
|
||||
Checkbox: require('./components/checkbox/readme.md'),
|
||||
Tab: require('./components/tab/readme.md'),
|
||||
|
@ -10,6 +10,7 @@ module.exports = {
|
||||
Tabs: require('./components/tabs'),
|
||||
Toggle: require('./components/toggle'),
|
||||
Input: require('./components/input'),
|
||||
'Range Slider': require('./components/range-slider/'),
|
||||
Radio: require('./components/radio'),
|
||||
RadioGroup: require('./components/radio-group'),
|
||||
Widget: require('./components/widget')
|
||||
|
@ -67,7 +67,7 @@ const sizes = {
|
||||
};
|
||||
|
||||
const boxes = {
|
||||
borderRadius: 4,
|
||||
borderRadius: '4px',
|
||||
bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
|
||||
insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
|
||||
border: {
|
||||
|
@ -24,7 +24,9 @@ const plugins = {
|
||||
require('postcss-cssnext')()
|
||||
]
|
||||
},
|
||||
'embed-markdown-loader': {}
|
||||
'embed-markdown-loader': {
|
||||
mode: 'plain'
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user