import { style , classes , keyframes } from 'typestyle' ; import * as React from 'react' ; import { verticallySpaced , horizontallySpaced } from 'csstips' ; export const buttonClass = style ( { fontFamily : 'helvetica' , cursor : 'pointer' , height : 'auto' , padding : "12px 30px 11px" , border : `1px solid #333` , borderRadius : '3px' , color : `white` , backgroundColor : '#333' , fontSize : '15px' , textDecoration : "none" , lineHeight : "1em" , outline : 'none' , transition : 'color .2s, background-color .2s' , display : 'inline-block' , $nest : { '&:hover' : { backgroundColor : '#666' , } , '&:active' : { backgroundColor : '#666' , } , '&:focus' : { outline : 'thin dotted' , outlineColor : `#333` } } } ) ; export const Button = ( props ) => < button { ... props } type = { props . type || 'button' } className = { classes ( buttonClass , props . className ) } / > ; export const Alert = ( props ) => < div style = { { padding : '10px' , backgroundColor : '#ffa3a3' , color : '#883b3b' } } > { props . children } < /div>; export const AlertSuccess = ( props ) => < div style = { { padding : '10px' , backgroundColor : '#f0ffef' , color : '#43883b' } } > { props . children } < /div>; export const Vertical = ( { children , className } ) => < div className = { classes ( style ( verticallySpaced ( 10 ) ) , className ) } children = { children } / > ; export const Horizontal = ( { children } ) => < div className = { style ( horizontallySpaced ( 10 ) ) } children = { children } / > ; export const fadeIn = style ( { animationName : keyframes ( { from : { opacity : 0 } , to : { opacity : 1 } , } ) , animationDuration : '.5s' , } ) ;