Basic input using material design

Author: soyjavi

source/components/input.cjsx

@@ -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>

source/styles/__constants.styl

@@ -7,6 +7,7 @@ THEME                       = #00bcd4
 
 WHITE                       = #ffffff
 PRIMARY                     = rgb(255, 64, 129)
+CANCEL                      = #f44336
 
 // -- Fonts
 FONT_FAMILY                 = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"

source/styles/components/input.styl

@@ -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

source/styles/normalize.styl

@@ -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