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

Dialog

old
Javi Jimenez Villar 2015-07-29 10:04:14 +07:00
parent f7a3079b15
commit d991efc0be
2 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/dialog/index.cjsx
View File

@ -1,4 +1,4 @@
require './style' localCSS = require './style'
Button = require '../button' Button = require '../button'
Navigation = require '../navigation' Navigation = require '../navigation'
@ -14,17 +14,18 @@ module.exports = React.createClass
getDefaultProps: -> getDefaultProps: ->
actions : [] actions : []
className : "normal" className : 'normal'
getInitialState: -> getInitialState: ->
active : @props.active active : @props.active
# -- Render # -- Render
render: -> render: ->
className = @props.className className = "#{localCSS.root} #{@props.className}"
className += " active" if @state.active className += " #{@props.type}" if @props.type
<div data-component-dialog={@props.type} data-flex="vertical center" className={className}> className += ' active' if @state.active
<div> <div data-react-toolbox='dialog' data-flex='vertical center' className={className}>
<div className={localCSS.container}>
{<h1>{@props.title}</h1>} {<h1>{@props.title}</h1>}
{@props.children} {@props.children}
{<Navigation actions={@props.actions}/> if @props.actions.length > 0} {<Navigation actions={@props.actions}/> if @props.actions.length > 0}

63
components/dialog/style.styl
View File

@ -1,6 +1,24 @@
@import "../constants.styl" @import "../constants.styl"
[data-component-dialog] :local(.container)
margin : SPACE
padding : SPACE (SPACE * 1.5)
background-color : WHITE
border-radius : (SPACE / 5)
box-shadow : ZDEPTH_SHADOW_5
transition-property : opacity, transform
transition-duration : ANIMATION_DURATION
transition-timing-function : ANIMATION_EASE
transition-delay : ANIMATION_DELAY
> h1
margin-bottom : SPACE
> nav
margin-top : SPACE
text-align : right
> .raised
margin-left : SPACE
:local(.root)
z-index : 3 z-index : 3
position : fixed position : fixed
left : 0 left : 0
@ -8,44 +26,25 @@
width : 100vw width : 100vw
height : 100vh height : 100vh
background-color : rgba(0,0,0,0.5) background-color : rgba(0,0,0,0.5)
transition-property opacity transition-property : opacity
transition-duration (ANIMATION_DURATION / 2) transition-duration : (ANIMATION_DURATION / 2)
transition-timing-function ANIMATION_EASE transition-timing-function : ANIMATION_EASE
// -- Children // -- Overrides
> div &.small > :local(.container)
margin : SPACE
padding : SPACE (SPACE * 1.5)
background-color : WHITE
border-radius : (SPACE / 5)
box-shadow ZDEPTH_SHADOW_5
transition-property opacity, transform
transition-duration ANIMATION_DURATION
transition-timing-function ANIMATION_EASE
transition-delay ANIMATION_DELAY
> h1
margin-bottom : SPACE
> nav
margin-top : SPACE
text-align : right
> *:not(.transparent)
margin-left : SPACE
// -- Styles
&.small > div
width : 33vw width : 33vw
&.normal > div &.normal > :local(.container)
width : 50vw width : 50vw
&.large > div &.large > :local(.container)
width : 96vw width : 96vw
&:not(.active) &:not(.active)
pointer-events : none pointer-events : none
opacity : 0 opacity : 0
transition-delay (ANIMATION_DELAY * 2) transition-delay : (ANIMATION_DELAY * 2)
> div > :local(.container)
opacity : 0 opacity : 0
transform translateY(-(UNIT)) transform : translateY(-(UNIT))
&.active &.active
opacity : 1 opacity : 1
> div > :local(.container)
opacity : 1 opacity : 1
transform translateY(0%) transform : translateY(0%)