vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

switch

old
Javi Jimenez Villar 2015-07-29 10:38:36 +07:00
parent ca53e73eeb
commit 4d35a66920
2 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/switch/index.cjsx
View File

@ -1,5 +1,5 @@
require './style'
Ripple = require "../ripple"
localCSS = require './style'
Ripple = require '../ripple'
module.exports = React.createClass
@ -12,7 +12,7 @@ module.exports = React.createClass
value : React.PropTypes.bool
getDefaultProps: ->
className : ""
className : ''
getInitialState: ->
value : @props.value
@ -32,13 +32,13 @@ module.exports = React.createClass
# -- Render
render: ->
className = @props.className
className += " checked" if @state.value
className += " disabled" if @props.disabled
<div data-component-switch className={className} onClick={@onClick}>
className = "#{localCSS.root} #{@props.className}"
className += ' checked' if @state.value
className += ' disabled' if @props.disabled
<div data-react-toolbox='switch' className={className} onClick={@onClick}>
<span></span>
{ <label>{@props.label}</label> if @props.label }
<Ripple origin={@state.ripple} />
<Ripple className={localCSS.ripple} origin={@state.ripple} />
</div>
# -- Extends

32
components/switch/style.styl
View File

@ -1,15 +1,25 @@
@import "../constants.styl"
@import '../constants'
[data-component-switch]
SIZE = (SPACE / 1.25)
:local(.ripple)
z-index : -1
overflow : hidden
max-width : (SIZE * 2.7)
max-height : (SIZE * 2.7)
top : (SIZE / 2)
left : (SIZE * 2)
background-color : alpha(TEXT, 10%)
opacity : 0
animation-duration : (1.0 * ANIMATION_DURATION)
:local(.root)
position : relative
margin-bottom : SPACE
height : SIZE = (SPACE / 1.25)
height : SIZE
width : WIDTH = (2.5 * SIZE)
background-color : DIVIDER
border-radius : SPACE
transition background-color ANIMATION_DURATION ANIMATION_EASE
// -- Children
> *
pointer-events : none
> span
@ -28,16 +38,6 @@
margin-left : WIDTH + (SPACE / 2)
font-size : FONT_SIZE_SMALL
color : FORM_TEXT
> [data-component-ripple]
z-index : -1
overflow : hidden
max-width : (SIZE * 2.7)
max-height : (SIZE * 2.7)
top : (SIZE / 2)
left : (SIZE * 2)
background-color : alpha(TEXT, 10%)
opacity : 0
animation-duration (1.0 * ANIMATION_DURATION)
// -- Style
&:not(.disabled)
@ -55,6 +55,6 @@
background-color : PRIMARY
right : 0
box-shadow : ZDEPTH_SHADOW_2
> [data-component-ripple]
> :local(.ripple)
left : 0
background-color : alpha(PRIMARY, 15%)