New components <Loading />, <Link />, <List />

components/link.cjsx

@@ -0,0 +1,31 @@
+###
+@todo
+###
+
+Style = require './style/link'
+FontIcon = require "./font_icon"
+
+module.exports = React.createClass
+
+  # -- States & Properties
+  propTypes:
+    route       : React.PropTypes.array
+    icon        : React.PropTypes.string
+    caption     : React.PropTypes.string
+    style       : React.PropTypes.string
+    onClick     : React.PropTypes.func
+
+  # -- Events
+  onClick: (event) ->
+    @props.onClick? event, @
+
+  # -- Render
+  render: ->
+    <a  data-component-link=""
+        href={"##{@props.route}"}
+        className={@props.style}
+        onClick={@onClick}
+        data-flex="horizontal center">
+      { <FontIcon value={@props.icon} /> if @props.icon }
+      { <abbr>{@props.caption}</abbr> if @props.caption }
+    </a>

components/list.cjsx

@@ -0,0 +1,33 @@
+###
+@todo
+###
+
+Style = require './style/list'
+
+module.exports = React.createClass
+
+  # -- States & Properties
+  propTypes:
+    type        : React.PropTypes.string
+    dataSource  : React.PropTypes.Array
+    ItemFactory : React.PropTypes.func
+    onClick     : React.PropTypes.func
+
+  getDefaultProps: ->
+    type        : "default"
+    dataSource  : []
+
+  # -- Events
+  onClick: (event) ->
+
+
+  # -- Render
+  render: ->
+    <ul data-component-list={@props.type}>
+    {
+      for item, index in @props.dataSource
+        <li key={index} onClick={@props.onClick.bind null, item}>
+          {@props.itemFactory @props.dataSource[index]}
+        </li>
+    }
+    </ul>

components/loading.cjsx

@@ -0,0 +1,20 @@
+###
+@todo
+###
+
+Style = require './style/loading'
+
+module.exports = React.createClass
+
+  # -- States & Properties
+  propTypes:
+    type  : React.PropTypes.string
+
+  getDefaultProps: ->
+    type  : "normal"
+
+  # -- Render
+  render: ->
+    <div data-component-loading={@props.type} data-flex="vertical center">
+      <div></div><div></div><div></div>
+    </div>

components/style/link.styl

@@ -0,0 +1,22 @@
+@import "__constants.styl"
+
+[data-component-link]
+  position                        : relative
+  overflow                        : hidden
+  transition                        opacity ANIMATION_DURATION ANIMATION_EASE
+  // -- Styles
+  &:not(.active)
+    font-weight                   : FONT_WEIGHT_THIN
+    opacity                       : 0.5
+  &:hover, &:active, &.active
+    opacity                       : 1
+  &.active
+    font-weight                   : FONT_WEIGHT_NORMAL
+  // -- Children
+  > *
+    vertical-align                : middle
+  > abbr
+    text-transform                : Capitalize
+  > .icon
+    margin-right                  : (SPACE / 2)
+    font-size                     : FONT_SIZE_BIG

components/style/list.styl

@@ -0,0 +1,16 @@
+@import "__constants.styl"
+
+[data-component-list]
+  list-style                      : none
+  &, a
+    color                         : COLOR
+  > li
+    overflow                      : hidden
+    background-color              : WHITE
+    box-shadow                    : ZDEPTH_SHADOW_1
+    transition-property             box-shadow
+    transition-duration             ANIMATION_DURATION
+    transition-timing-function      ANIMATION_EASE
+    // -- Classes
+    &:hover
+      box-shadow                  : ZDEPTH_SHADOW_2

components/style/loading.styl

@@ -0,0 +1,41 @@
+@import "__constants.styl"
+
+[data-component-loading]
+  z-index                           : 2
+  > div
+    &::after
+      content                       : ""
+      position                      : absolute
+      transform                       scale(0.0)
+    SPEED = (3 * ANIMATION_DURATION)
+    &::after
+      border-radius                 : 50%
+      animation                       LOADING SPEED infinite
+    &:nth-child(1)::after
+      animation-delay                 (SPEED / 2.5)
+    &:nth-child(2)::after
+      animation-delay                 (SPEED / 5)
+
+  // -- Classes
+  &[data-component-loading="fullscreen"]
+    height                          : 100%
+    width                           : 100%
+    > div
+      width                         : SIZE = LOADING_HEIGHT
+      height                        : SIZE
+      &::after
+        content                     : ""
+        position                    : absolute
+        width                       : SIZE
+        height                      : SIZE
+        background-color            : THEME
+        transform                     scale(0.0)
+      &:nth-child(n+1)
+        margin-top                  : -(SIZE)
+
+@keyframes LOADING
+  0%
+    transform scale(0.0)
+  100%
+    transform scale(1.0)
+    opacity: 0.1