Importing css in <style>
parent
2198f1a2d3
commit
1582fb6918
|
@ -2,18 +2,12 @@
|
|||
@todo
|
||||
###
|
||||
|
||||
|
||||
css = require "./style/button.styl"
|
||||
# -- Components
|
||||
FontIcon = require "./font_icon"
|
||||
Ripple = require "./ripple"
|
||||
# -- Mixins
|
||||
# StyleMixin = require "./mixins/style"
|
||||
Style = require './style/button'
|
||||
FontIcon = require './font_icon'
|
||||
Ripple = require './ripple'
|
||||
|
||||
module.exports = React.createClass
|
||||
|
||||
# mixins: [StyleMixin]
|
||||
|
||||
# -- States & Properties
|
||||
propTypes:
|
||||
type : React.PropTypes.string
|
||||
|
@ -29,6 +23,10 @@ module.exports = React.createClass
|
|||
getInitialState: ->
|
||||
ripple : undefined
|
||||
|
||||
# -- Lifecycle
|
||||
componentWillReceiveProps: ->
|
||||
@setState ripple: undefined
|
||||
|
||||
# -- Events
|
||||
onClick: (event) ->
|
||||
event.preventDefault()
|
||||
|
@ -39,6 +37,7 @@ module.exports = React.createClass
|
|||
|
||||
# -- Render
|
||||
render: ->
|
||||
console.log "ripple", @state.ripple
|
||||
<button data-component-button={@props.type}
|
||||
onClick={@onClick}
|
||||
className={@props.style}
|
||||
|
|
|
@ -2,18 +2,20 @@
|
|||
@todo
|
||||
###
|
||||
|
||||
Button = require "./button"
|
||||
Input = require "./input"
|
||||
|
||||
module.exports = React.createClass
|
||||
|
||||
# -- States & Properties
|
||||
propTypes:
|
||||
attributes : React.PropTypes.array.required
|
||||
attributes : React.PropTypes.array
|
||||
storage : React.PropTypes.bool
|
||||
# -- Events
|
||||
onSubmit : React.PropTypes.func
|
||||
onError : React.PropTypes.func
|
||||
onValid : React.PropTypes.func
|
||||
onChange : React.PropTypes.func
|
||||
|
||||
getDefaultProps: ->
|
||||
storage : false
|
||||
|
@ -31,10 +33,16 @@ module.exports = React.createClass
|
|||
value = @getValue()
|
||||
for attr in @props.attributes when attr.required and value[attr.ref]?.trim() is ""
|
||||
is_valid = false
|
||||
@refs[attr.ref].setError?()
|
||||
@refs[attr.ref].setError? "Required field"
|
||||
break
|
||||
@props[if is_valid then "onValid" else "onError"]? event, @
|
||||
|
||||
@props.onChange? event, @
|
||||
if is_valid
|
||||
@refs.submit?.getDOMNode().removeAttribute "disabled"
|
||||
@props.onValid? event, @
|
||||
else
|
||||
@refs.submit?.getDOMNode().setAttribute "disabled", true
|
||||
@props.onError? event, @
|
||||
|
||||
# -- Render
|
||||
render: ->
|
||||
|
@ -43,14 +51,17 @@ module.exports = React.createClass
|
|||
onChange={@onChange}>
|
||||
{
|
||||
for attribute, index in @props.attributes
|
||||
<Input {...attribute} />
|
||||
if attribute.type is "submit"
|
||||
<Button {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
|
||||
else
|
||||
<Input {...attribute} />
|
||||
}
|
||||
</form>
|
||||
|
||||
# -- Extends
|
||||
getValue: ->
|
||||
value = {}
|
||||
value[ref] = el.getValue() for ref, el of @refs
|
||||
value[ref] = el.getValue() for ref, el of @refs when el.getValue?
|
||||
value
|
||||
|
||||
setValue: (data) ->
|
||||
|
|
|
@ -2,29 +2,28 @@
|
|||
@todo
|
||||
###
|
||||
|
||||
require "./style/ripple"
|
||||
|
||||
module.exports = React.createClass
|
||||
|
||||
# -- States & Properties
|
||||
propTypes:
|
||||
origin : React.PropTypes.object
|
||||
colour : React.PropTypes.string
|
||||
origin : React.PropTypes.object
|
||||
|
||||
getDefaultProps: ->
|
||||
origin : undefined
|
||||
colour : "#ffffff"
|
||||
getInitialState: ->
|
||||
className : undefined
|
||||
|
||||
# -- Lifecycle
|
||||
componentWillReceiveProps: (next_props) ->
|
||||
@setState className: "active" if next_props.origin?
|
||||
|
||||
componentDidMount: ->
|
||||
el = @getDOMNode()
|
||||
for key in ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"]
|
||||
el.addEventListener key, =>
|
||||
el.classList.remove "active"
|
||||
, false
|
||||
|
||||
componentDidUpdate: ->
|
||||
@getDOMNode().classList.add "active"
|
||||
el.addEventListener key, (=> @setState className: undefined), false
|
||||
|
||||
# -- Render
|
||||
render: ->
|
||||
<div data-component-ripple
|
||||
className={@state.className}
|
||||
style={left: @props.origin?.left, top: @props.origin?.top} />
|
||||
|
|
|
@ -0,0 +1,253 @@
|
|||
@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,700')
|
||||
|
||||
// -- Colors
|
||||
COLOR = #222222
|
||||
BACKGROUND = #f5f5f5
|
||||
THEME = #cccccc
|
||||
WHITE = #ffffff
|
||||
PRIMARY = #e91e63
|
||||
SECONDARY = #00bcd4
|
||||
// THEME = #ef6c00
|
||||
CANCEL = red
|
||||
|
||||
// -- 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)
|
||||
BUTTON_HEIGHT = (2.5 * SPACE)
|
||||
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
|
||||
LOADING_HEIGHT = (1.5 * UNIT)
|
||||
|
||||
// -- 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)
|
||||
|
||||
|
||||
// normalize v3.0.2 | MIT License | git.io/normalize
|
||||
|
||||
html
|
||||
font-family sans-serif
|
||||
-ms-text-size-adjust 100%
|
||||
-webkit-text-size-adjust 100%
|
||||
|
||||
body
|
||||
margin 0
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
|
||||
nav, section, summary
|
||||
display block
|
||||
|
||||
audio, canvas, progress, video
|
||||
display inline-block
|
||||
vertical-align baseline
|
||||
|
||||
audio
|
||||
&:not([controls])
|
||||
display none
|
||||
height 0
|
||||
|
||||
[hidden], template
|
||||
display none
|
||||
|
||||
a
|
||||
background-color transparent
|
||||
&:active, &:hover
|
||||
outline 0
|
||||
|
||||
abbr[title]
|
||||
border-bottom 1px dotted
|
||||
|
||||
b, strong
|
||||
font-weight bold
|
||||
|
||||
dfn
|
||||
font-style italic
|
||||
|
||||
h1
|
||||
font-size 2em
|
||||
margin 0.67em 0
|
||||
|
||||
mark
|
||||
background #ff0
|
||||
color #000
|
||||
|
||||
small
|
||||
font-size 80%
|
||||
|
||||
sub, sup
|
||||
font-size 75%
|
||||
line-height 0
|
||||
position relative
|
||||
vertical-align baseline
|
||||
|
||||
sup
|
||||
top -0.5em
|
||||
|
||||
sub
|
||||
bottom -0.25em
|
||||
|
||||
img
|
||||
border: 0
|
||||
|
||||
svg
|
||||
&:not(:root)
|
||||
overflow hidden
|
||||
|
||||
figure
|
||||
border: 0
|
||||
|
||||
hr
|
||||
-moz-box-sizing content-box
|
||||
box-sizing content-box
|
||||
height 0
|
||||
|
||||
pre
|
||||
overflow auto
|
||||
|
||||
code, kbd, pre, samp
|
||||
font-family monospace, monospace
|
||||
font-size 1em
|
||||
|
||||
button, input, optgroup, select, textarea
|
||||
color inherit
|
||||
font inherit
|
||||
margin 0
|
||||
|
||||
button
|
||||
overflow visible
|
||||
|
||||
button, select
|
||||
text-transform none
|
||||
|
||||
button, html input[type="button"], input[type="reset"], input[type="submit"]
|
||||
-webkit-appearance button
|
||||
cursor pointer
|
||||
|
||||
button[disabled], html input[disabled]
|
||||
cursor default
|
||||
|
||||
button::-moz-focus-inner, input::-moz-focus-inner
|
||||
border 0
|
||||
padding 0
|
||||
|
||||
input
|
||||
line-height normal
|
||||
|
||||
input[type="checkbox"], input[type="radio"]
|
||||
box-sizing border-box
|
||||
padding 0
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button
|
||||
height auto
|
||||
|
||||
input[type="search"]
|
||||
-webkit-appearance textfield
|
||||
-moz-box-sizing content-box
|
||||
-webkit-box-sizing content-box
|
||||
box-sizing content-box
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration
|
||||
-webkit-appearance none
|
||||
|
||||
fieldset
|
||||
border 1px solid #c0c0c0
|
||||
margin 0 2px
|
||||
padding 0.35em 0.625em 0.75em
|
||||
|
||||
legend
|
||||
border 0
|
||||
padding 0
|
||||
|
||||
textarea
|
||||
overflow auto
|
||||
|
||||
optgroup
|
||||
font-weight bold
|
||||
|
||||
table
|
||||
border-collapse collapse
|
||||
border-spacing 0
|
||||
|
||||
td, th
|
||||
padding 0
|
||||
|
||||
|
||||
// -- App ----------------------------------------------------------------------
|
||||
a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
|
||||
border: 0
|
||||
margin: 0
|
||||
outline: 0
|
||||
padding: 0
|
||||
|
||||
*, *:before, *:after
|
||||
margin: 0
|
||||
padding: 0
|
||||
box-sizing: border-box
|
||||
|
||||
html
|
||||
position: absolute
|
||||
height: 100%
|
||||
width: 100%
|
||||
margin: 0
|
||||
padding: 0
|
||||
overflow: hidden
|
||||
|
||||
body
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: 0
|
||||
padding: 0
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: moz-none
|
||||
user-select: none
|
||||
overflow: hidden
|
||||
|
||||
*
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
|
||||
|
||||
h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small
|
||||
-webkit-font-smoothing: RENDER = antialiased
|
||||
font-smoothing: RENDER
|
||||
-webkit-text-size-adjust: 100%
|
||||
-ms-text-size-adjust: 100%
|
||||
text-size-adjust: 100%
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0)
|
||||
|
||||
::-webkit-scrollbar
|
||||
width: 0px
|
||||
height: 0px
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]), button
|
||||
-webkit-appearance: none
|
||||
-moz-appearance: none
|
||||
appearance: none
|
||||
-webkit-touch-callout: none
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
|
||||
outline: none
|
|
@ -1,3 +1,64 @@
|
|||
button
|
||||
font-size: 16px
|
||||
font-weight: bold
|
||||
@import '__constants.styl'
|
||||
|
||||
[data-component-button]
|
||||
z-index : 1
|
||||
display : inline-block
|
||||
position : relative
|
||||
overflow : hidden
|
||||
font-weight : normal
|
||||
text-align : center
|
||||
text-decoration : none
|
||||
white-space : nowrap
|
||||
border : none
|
||||
transition-property background-color, box-shadow
|
||||
transition-duration ANIMATION_DURATION
|
||||
transition-timing-function ANIMATION_EASE
|
||||
|
||||
// -- Style
|
||||
&:not([disabled])
|
||||
cursor : pointer
|
||||
box-shadow ZDEPTH_SHADOW_1
|
||||
&:hover /*, &:active, &:focus */
|
||||
outline : 0
|
||||
box-shadow ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
|
||||
&:not(.primary):not(.secondary)
|
||||
color : COLOR
|
||||
background-color : WHITE
|
||||
&.primary, &.secondary
|
||||
color : WHITE
|
||||
&.primary
|
||||
background-color : PRIMARY
|
||||
&.secondary
|
||||
background-color : SECONDARY
|
||||
|
||||
&[disabled]
|
||||
background-color : darken(BACKGROUND, 7.5%)
|
||||
color : darken(BACKGROUND, 35%)
|
||||
|
||||
// -- Layout
|
||||
& ~ &:not(:last-child)
|
||||
margin-left : SPACE
|
||||
> *
|
||||
pointer-events : none
|
||||
|
||||
[data-component-button="square"]
|
||||
margin-bottom : SPACE
|
||||
padding : (SPACE / 2) (SPACE / 1.25)
|
||||
font-size : FONT_SIZE_SMALL
|
||||
text-transform : uppercase
|
||||
border-radius : (SPACE / 8)
|
||||
> *
|
||||
vertical-align : bottom
|
||||
> .icon
|
||||
font-size : FONT_SIZE_BIG
|
||||
margin-right : (SPACE / 2)
|
||||
&.anchor
|
||||
width : 100%
|
||||
|
||||
[data-component-button="circle"]
|
||||
width : BUTTON_CIRCLE_HEIGHT
|
||||
height : BUTTON_CIRCLE_HEIGHT
|
||||
font-size : (BUTTON_CIRCLE_HEIGHT / 2.25)
|
||||
border-radius : 50%
|
||||
> .icon
|
||||
line-height : BUTTON_CIRCLE_HEIGHT
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
@import '__constants.styl'
|
||||
|
||||
[data-component-ripple]
|
||||
position : absolute
|
||||
background-color : alpha(WHITE, 0.65)
|
||||
transform translateX(-50%) translateY(-50%)
|
||||
border-radius : 50%
|
||||
// -- Classes
|
||||
&.active, &:hover
|
||||
animation-name ripple
|
||||
animation-iteration-count 1
|
||||
animation-timing-function ANIMATION_EASE
|
||||
animation-duration (2 * ANIMATION_DURATION)
|
||||
opacity : 0.1
|
||||
|
||||
@keyframes ripple
|
||||
0%
|
||||
width : 0
|
||||
height : 0
|
||||
opacity : 1
|
||||
100%
|
||||
width : SIZE = (4 * UNIT)
|
||||
height : SIZE
|
||||
opacity : 0
|
|
@ -1,10 +1,7 @@
|
|||
"use strict"
|
||||
|
||||
# -- Components
|
||||
Input = require "../components/input"
|
||||
Form = require "../components/form"
|
||||
Button = require "../components/button"
|
||||
FontIcon = require "../components/font_icon"
|
||||
|
||||
Test = React.createClass
|
||||
getInitialState: ->
|
||||
|
@ -38,21 +35,19 @@ Test = React.createClass
|
|||
]
|
||||
|
||||
<app>
|
||||
<h1>Hello World !</h1>
|
||||
<Form attributes={attributes}
|
||||
onError={@onFormError}
|
||||
onValid={@onFormValid}/>
|
||||
# <Button caption="Login" disabled={not @state.submitable} />
|
||||
# <Button caption="Primary" style="primary" icon="access_alarm" />
|
||||
# <Button caption="Secondary" style="secondary" onClick={@onButtonClick}/>
|
||||
# <Button caption="Disabled" disabled={true} onClick={@onButtonClick}/>
|
||||
#
|
||||
# <Button type="circle" icon="access_alarm" disabled={not @state.submitable} />
|
||||
# <Button type="circle" icon="explore" style="primary" />
|
||||
# <Button type="circle" icon="zoom_in" style="secondary" />
|
||||
# <Button type="circle" icon="input" disabled={true} />
|
||||
#
|
||||
<FontIcon value="access_alarm" />
|
||||
<h1>React-Kit</h1>
|
||||
<h2>New way for create</h2>
|
||||
|
||||
<h3>Buttons</h3>
|
||||
<Button caption="Login" disabled={not @state.submitable} />
|
||||
<Button caption="Primary" style="primary" icon="access_alarm" />
|
||||
<Button caption="Secondary" style="secondary" onClick={@onButtonClick}/>
|
||||
<Button caption="Disabled" disabled={true} onClick={@onButtonClick}/>
|
||||
|
||||
<Button type="circle" icon="access_alarm" disabled={not @state.submitable} />
|
||||
<Button type="circle" icon="explore" style="primary" />
|
||||
<Button type="circle" icon="zoom_in" style="secondary" />
|
||||
<Button type="circle" icon="input" disabled={true} />
|
||||
</app>
|
||||
|
||||
React.render <Test/>, document.body
|
|
@ -6,11 +6,11 @@ node_modules = __dirname + '/node_modules'
|
|||
module.exports =
|
||||
cache : true
|
||||
|
||||
resolve : extensions: ['', '.cjsx', '.coffee', '.js', '.json', 'styl']
|
||||
resolve : extensions: ['', '.cjsx', '.coffee', '.js', '.json', '.styl']
|
||||
|
||||
context : __dirname + '/spec'
|
||||
|
||||
entry : ['./test.cjsx']
|
||||
entry : ['./index.cjsx']
|
||||
|
||||
output :
|
||||
path : if process.env.NODE_ENV is 'production' then './dist' else './build'
|
||||
|
@ -28,12 +28,12 @@ module.exports =
|
|||
inline : true
|
||||
|
||||
module :
|
||||
noParse: [node_modules + '/react/dist/*.js']
|
||||
noParse : [node_modules + '/react/dist/*.js']
|
||||
|
||||
loaders : [
|
||||
test : /\.cjsx$/, loader: 'coffee-jsx-loader'
|
||||
,
|
||||
test : /\.coffee$/, loader: 'coffee-jsx-loader'
|
||||
,
|
||||
test : /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'
|
||||
test : /\.styl$/, loader: 'style-loader!css-loader!stylus-loader?importLoaders=1&minimize!'
|
||||
]
|
||||
|
|
Loading…
Reference in New Issue