1
0
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:
Alex Windett 2016-10-31 17:23:16 +00:00
parent c0e68b4ef6
commit 0b332cbeb6
8 changed files with 182 additions and 2 deletions

View File

@ -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,

View 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;

View 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 />
);
}
```

View 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;
}
}

View File

@ -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'),

View File

@ -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')

View File

@ -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: {

View File

@ -24,7 +24,9 @@ const plugins = {
require('postcss-cssnext')()
]
},
'embed-markdown-loader': {}
'embed-markdown-loader': {
mode: 'plain'
}
}
})
};