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

63
components/dialog/style.styl
View File

@ -1,6 +1,24 @@
@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
position : fixed
left : 0
@ -8,44 +26,25 @@
width : 100vw
height : 100vh
background-color : rgba(0,0,0,0.5)
transition-property opacity
transition-duration (ANIMATION_DURATION / 2)
transition-timing-function ANIMATION_EASE
// -- Children
> div
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
transition-property : opacity
transition-duration : (ANIMATION_DURATION / 2)
transition-timing-function : ANIMATION_EASE
// -- Overrides
&.small > :local(.container)
width : 33vw
&.normal > div
&.normal > :local(.container)
width : 50vw
&.large > div
&.large > :local(.container)
width : 96vw
&:not(.active)
pointer-events : none
opacity : 0
transition-delay (ANIMATION_DELAY * 2)
> div
transition-delay : (ANIMATION_DELAY * 2)
> :local(.container)
opacity : 0
transform translateY(-(UNIT))
transform : translateY(-(UNIT))
&.active
opacity : 1
> div
> :local(.container)
opacity : 1
transform translateY(0%)
transform : translateY(0%)