Migrate list to sass
Javi Velasco
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 PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||
import style from './style';
|
||||
|
||||
|
|
@ -11,7 +10,7 @@ export default React.createClass({
|
|||
propTypes: {
|
||||
className: React.PropTypes.string,
|
||||
dataSource: React.PropTypes.array,
|
||||
ItemFactory: React.PropTypes.func,
|
||||
template: React.PropTypes.func,
|
||||
onClick: React.PropTypes.func,
|
||||
type: React.PropTypes.string
|
||||
},
|
||||
|
|
@ -38,7 +37,7 @@ export default React.createClass({
|
|||
const items = this.props.dataSource.map((data, index) => {
|
||||
return (
|
||||
<li key={index} onClick={this.onClick.bind(null, data, index)}>
|
||||
{this.props.itemFactory(data, index)}
|
||||
{this.props.template(data, index)}
|
||||
</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 Tabs from './components/tabs';
|
||||
|
||||
// import FontIcon from './components/font_icon';
|
||||
// import Form from './components/form';
|
||||
|
||||
const Test = React.createClass({
|
||||
displayName: 'App',
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue