Migrate list to sass
parent
c5adb5340b
commit
a866b7a19b
|
@ -1,59 +0,0 @@
|
||||||
// -- Colors
|
|
||||||
|
|
||||||
PRIMARY = #E91E63
|
|
||||||
PRIMARY_DARK = darken(PRIMARY, 25%)
|
|
||||||
PRIMARY_LIGHT = lighten(PRIMARY, 25%)
|
|
||||||
ACCENT = #03A9F4
|
|
||||||
|
|
||||||
TEXT = #212121
|
|
||||||
TEXT_ACCENT = #727272
|
|
||||||
|
|
||||||
DIVIDER = lighten(#B6B6B6, 75%)
|
|
||||||
BACKGROUND = #ffffff
|
|
||||||
WHITE = #ffffff
|
|
||||||
SUCCESS = #4CAF50
|
|
||||||
CANCEL = #F44336
|
|
||||||
WARNING = #FFC107
|
|
||||||
|
|
||||||
// -- Fonts
|
|
||||||
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
|
|
||||||
FONT_SIZE = 16px
|
|
||||||
FONT_SIZE_TINY = 80%
|
|
||||||
FONT_SIZE_SMALL = 90%
|
|
||||||
FONT_SIZE_NORMAL = 100%
|
|
||||||
FONT_SIZE_BIG = 120%
|
|
||||||
FONT_WEIGHT_THIN = 300
|
|
||||||
FONT_WEIGHT_NORMAL = 400
|
|
||||||
FONT_WEIGHT_BOLD = 700
|
|
||||||
|
|
||||||
// -- Sizes
|
|
||||||
UNIT = 4rem
|
|
||||||
SPACE = (UNIT * 0.29)
|
|
||||||
OFFSET = (SPACE * 1.75)
|
|
||||||
MENU_WIDTH = (3.85 * UNIT)
|
|
||||||
HEADER_HEIGHT = (1.65 * UNIT)
|
|
||||||
INPUT_HEIGHT = (2 * SPACE)
|
|
||||||
BUTTON_HEIGHT = (2.5 * SPACE)
|
|
||||||
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
|
|
||||||
BUTTON_CIRCLE_MINI_HEIGHT = (2 * SPACE)
|
|
||||||
LOADING_HEIGHT = (1.5 * UNIT)
|
|
||||||
PROGRESS_BAR_HEIGHT = (SPACE / 4)
|
|
||||||
|
|
||||||
// -- Shadows
|
|
||||||
ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
|
|
||||||
ZDEPTH_SHADOW_2 = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
|
|
||||||
ZDEPTH_SHADOW_3 = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
|
|
||||||
ZDEPTH_SHADOW_4 = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
|
|
||||||
ZDEPTH_SHADOW_5 = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)
|
|
||||||
|
|
||||||
// -- Animations
|
|
||||||
ANIMATION_DURATION = 450ms
|
|
||||||
ANIMATION_EASE = cubic-bezier(.55,0,.1,1)
|
|
||||||
ANIMATION_DELAY = (ANIMATION_DURATION / 5)
|
|
||||||
|
|
||||||
// -- Z Indexes
|
|
||||||
Z_INDEX_HIGHER = 200
|
|
||||||
Z_INDEX_HIGH = 100
|
|
||||||
Z_INDEX_NORMAL = 1
|
|
||||||
Z_INDEX_LOW = -100
|
|
||||||
Z_INDEX_LOWER = -200
|
|
|
@ -1,5 +1,4 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
|
@ -11,7 +10,7 @@ export default React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
dataSource: React.PropTypes.array,
|
dataSource: React.PropTypes.array,
|
||||||
ItemFactory: React.PropTypes.func,
|
template: React.PropTypes.func,
|
||||||
onClick: React.PropTypes.func,
|
onClick: React.PropTypes.func,
|
||||||
type: React.PropTypes.string
|
type: React.PropTypes.string
|
||||||
},
|
},
|
||||||
|
@ -38,7 +37,7 @@ export default React.createClass({
|
||||||
const items = this.props.dataSource.map((data, index) => {
|
const items = this.props.dataSource.map((data, index) => {
|
||||||
return (
|
return (
|
||||||
<li key={index} onClick={this.onClick.bind(null, data, index)}>
|
<li key={index} onClick={this.onClick.bind(null, data, index)}>
|
||||||
{this.props.itemFactory(data, index)}
|
{this.props.template(data, index)}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
@import "../variables";
|
||||||
|
|
||||||
|
$list-color: unquote("rgb(#{$color-black})") !default;
|
||||||
|
$list-background: unquote("rgb(#{$color-white})") !default;
|
||||||
|
|
||||||
|
.root {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
&, a {
|
||||||
|
color: $list-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
> li {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: $list-background;
|
||||||
|
box-shadow: $zdepth-shadow-1;
|
||||||
|
transition-timing-function: $animation-curve-default;
|
||||||
|
transition-duration: $animation-duration;
|
||||||
|
transition-property: box-shadow;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: $zdepth-shadow-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,15 +0,0 @@
|
||||||
@import '../constants'
|
|
||||||
|
|
||||||
:local(.root)
|
|
||||||
list-style : none
|
|
||||||
&, a
|
|
||||||
color : TEXT
|
|
||||||
> li
|
|
||||||
overflow : hidden
|
|
||||||
background-color : WHITE
|
|
||||||
box-shadow : ZDEPTH_SHADOW_1
|
|
||||||
transition-property : box-shadow
|
|
||||||
transition-duration : ANIMATION_DURATION
|
|
||||||
transition-timing-function : ANIMATION_EASE
|
|
||||||
&:hover
|
|
||||||
box-shadow : ZDEPTH_SHADOW_2
|
|
|
@ -0,0 +1,52 @@
|
||||||
|
import React from 'react';
|
||||||
|
import List from '../../components/list';
|
||||||
|
|
||||||
|
export default React.createClass({
|
||||||
|
displayName: 'ListTest',
|
||||||
|
|
||||||
|
getInitialState () {
|
||||||
|
return {
|
||||||
|
countries: [
|
||||||
|
{ value: 'ES-es', label: 'Spain', img: 'http://' },
|
||||||
|
{ value: 'TH-th', label: 'Thailand', img: 'http://' },
|
||||||
|
{ value: 'EN-gb', label: 'England', img: 'http://' },
|
||||||
|
{ value: 'EN-en', label: 'USA', img: 'http://' },
|
||||||
|
{ value: 'FR-fr', label: 'France', img: 'http://' }
|
||||||
|
],
|
||||||
|
selected: 'TH-th'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange (dropdown) {
|
||||||
|
console.log('[DROPDOWN]', dropdown.getValue());
|
||||||
|
},
|
||||||
|
|
||||||
|
customDropdownItem (data) {
|
||||||
|
const style = {
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
backgroundColor: '#ccc',
|
||||||
|
marginRight: 8
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div data-flex="horizontal grow" data-flex-content="center">
|
||||||
|
<img src={data.img} data-flex-grow="min" style={style} />
|
||||||
|
<div data-flex-grow="max" data-flex="vertical" >
|
||||||
|
<strong>{data.label}</strong>
|
||||||
|
<small>{data.value}</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<h5>List</h5>
|
||||||
|
<p>lorem ipsum...</p>
|
||||||
|
<List dataSource={this.state.countries} value={this.state.selected} template={this.customDropdownItem} onChange={this.onChange}/>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
|
@ -16,9 +16,6 @@ import Slider from './components/slider';
|
||||||
import Switch from './components/switch';
|
import Switch from './components/switch';
|
||||||
import Tabs from './components/tabs';
|
import Tabs from './components/tabs';
|
||||||
|
|
||||||
// import FontIcon from './components/font_icon';
|
|
||||||
// import Form from './components/form';
|
|
||||||
|
|
||||||
const Test = React.createClass({
|
const Test = React.createClass({
|
||||||
displayName: 'App',
|
displayName: 'App',
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue