Basic input using material design
Javi Jimenez Villar
parent
5aacd7c30a
commit
704a52757b
|
|
@ -0,0 +1,35 @@
|
|||
###
|
||||
@todo
|
||||
###
|
||||
|
||||
module.exports = React.createClass
|
||||
|
||||
# -- States & Properties
|
||||
propTypes:
|
||||
label : React.PropTypes.string
|
||||
value : React.PropTypes.string
|
||||
type : React.PropTypes.string
|
||||
disabled : React.PropTypes.boolean
|
||||
onChange : React.PropTypes.function
|
||||
|
||||
getDefaultProps: ->
|
||||
type : "text"
|
||||
disabled : false
|
||||
|
||||
# -- Events
|
||||
onChange: (event) ->
|
||||
console.log "onChange"
|
||||
|
||||
# -- Render
|
||||
render: ->
|
||||
<div data-component="input">
|
||||
<input
|
||||
type={@props.type}
|
||||
value={@props.value}
|
||||
placeholder={@props.hint}
|
||||
disabled={@props.disabled}
|
||||
required={@props.required} />
|
||||
<span className="bar"></span>
|
||||
{ <label>{@props.label}</label> if @props.label }
|
||||
{ <span className="error">{@props.error}</span> if @props.error }
|
||||
</div>
|
||||
|
|
@ -7,6 +7,7 @@ THEME = #00bcd4
|
|||
|
||||
WHITE = #ffffff
|
||||
PRIMARY = rgb(255, 64, 129)
|
||||
CANCEL = #f44336
|
||||
|
||||
// -- Fonts
|
||||
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
|
||||
|
|
|
|||
|
|
@ -1,38 +1,65 @@
|
|||
input[type="email"], input[type="search"], input[type="text"], input[type="tel"],
|
||||
input[type="url"], input[type="password"], textarea, select
|
||||
width : 100%
|
||||
padding : (SPACE / 2)
|
||||
font-size : FONT_SIZE_NORMAL
|
||||
border : none
|
||||
border-bottom : solid (SPACE / 10)
|
||||
box-shadow : none
|
||||
box-sizing : border-box
|
||||
transition all ANIMATION_DURATION ANIMATION_EASE
|
||||
& :focus
|
||||
outline : 0
|
||||
[data-component="input"]
|
||||
position : relative
|
||||
margin-bottom : SPACE
|
||||
|
||||
-webkit-appearance : none
|
||||
-moz-appearance : none
|
||||
appearance : none
|
||||
outline : none
|
||||
-webkit-tap-highlight-color : rgba(255, 255, 255, 0)
|
||||
-webkit-touch-callout : none
|
||||
input, label
|
||||
font-size : FONT_SIZE_NORMAL
|
||||
font-weight : FONT_WEIGHT_NORMAL
|
||||
|
||||
// -- class ------------------------------------------------------------------
|
||||
&.transparent
|
||||
font-size : FONT_SIZE_BIG
|
||||
font-weight : FONT_WEIGHT_BOLD
|
||||
background-color : transparent
|
||||
color : WHITE
|
||||
border-bottom-color : alpha(WHITE, 50%)
|
||||
&:hover, &:focus, &:active
|
||||
border-bottom-color : WHITE
|
||||
&::-webkit-input-placeholder
|
||||
color : alpha(WHITE, 50%)
|
||||
input
|
||||
display : block
|
||||
padding : (SPACE / 2) 0
|
||||
width : 100%
|
||||
color : COLOR
|
||||
border : none
|
||||
border-bottom : 1px solid lighten(COLOR, 75%)
|
||||
// -- Attributes
|
||||
&:focus
|
||||
outline : none
|
||||
~ .bar:before, ~ .bar:after
|
||||
width : 50%
|
||||
&:focus ~ label, &:valid ~ label
|
||||
top : -(SPACE / 2)
|
||||
font-size : FONT_SIZE_TINY
|
||||
color : THEME
|
||||
&:disabled
|
||||
border-bottom-style : dotted
|
||||
&:invalid
|
||||
border-bottom-color : CANCEL
|
||||
~ .bar:before, ~ .bar:after
|
||||
background-color : CANCEL
|
||||
|
||||
&.white
|
||||
border-bottom-color : alpha(BACKGROUND, 25%)
|
||||
opacity : 0.75
|
||||
&:hover, &:focus, &:active
|
||||
border-bottom-color : THEME
|
||||
opacity : 1
|
||||
label
|
||||
position : absolute
|
||||
left : 0
|
||||
top : (SPACE / 2)
|
||||
color : lighten(COLOR, 75%)
|
||||
pointer-events : none
|
||||
transition-property top, font-size, color
|
||||
transition-duration ANIMATION_DURATION
|
||||
transition-timing-function ANIMATION_EASE
|
||||
|
||||
.bar
|
||||
position : relative
|
||||
display : block
|
||||
width : 100%
|
||||
&:before, &:after
|
||||
content : ''
|
||||
position : absolute
|
||||
height : 2px
|
||||
width : 0
|
||||
bottom : 0
|
||||
background-color : THEME
|
||||
transition-property width, background-color
|
||||
transition-duration ANIMATION_DURATION
|
||||
transition-timing-function ANIMATION_EASE
|
||||
&:before
|
||||
left : 50%
|
||||
&:after
|
||||
right : 50%
|
||||
|
||||
.error
|
||||
position : absolute
|
||||
bottom : -(SPACE)
|
||||
font-size : FONT_SIZE_TINY
|
||||
color : CANCEL
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,df
|
|||
*, *:before, *:after
|
||||
margin: 0
|
||||
padding: 0
|
||||
box-sizing(border-box)
|
||||
box-sizing: border-box
|
||||
|
||||
html
|
||||
position: absolute
|
||||
|
|
|
|||
Loading…
Reference in New Issue