diff --git a/.csscomb.json b/.csscomb.json
new file mode 100644
index 00000000..88b1ef1a
--- /dev/null
+++ b/.csscomb.json
@@ -0,0 +1,308 @@
+{
+  "always-semicolon": true,
+  "block-indent": 2,
+  "color-case": "lower",
+  "color-shorthand": true,
+  "element-case": "lower",
+  "eof-newline": true,
+  "leading-zero": false,
+  "remove-empty-rulesets": true,
+  "space-after-colon": 1,
+  "space-after-combinator": 1,
+  "space-before-selector-delimiter": 0,
+  "space-between-declarations": "\n",
+  "space-after-opening-brace": "\n",
+  "space-before-closing-brace": "\n",
+  "space-before-colon": 0,
+  "space-before-combinator": 1,
+  "space-before-opening-brace": 1,
+  "strip-spaces": true,
+  "unitless-zero": true,
+  "vendor-prefix-align": true,
+  "sort-order": [
+    [
+      "$variable",
+      "$extend",
+      "$include",
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "-webkit-box-sizing",
+      "-moz-box-sizing",
+      "box-sizing",
+      "display",
+      "float",
+      "width",
+      "min-width",
+      "max-width",
+      "height",
+      "min-height",
+      "max-height",
+      "flex",
+      "flex-direction",
+      "flex-flow",
+      "flex-order",
+      "flex-pack",
+      "flex-align",
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "margin",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "-webkit-overflow-scrolling",
+      "-ms-overflow-x",
+      "-ms-overflow-y",
+      "-ms-overflow-style",
+      "clip",
+      "clear",
+      "font",
+      "font-family",
+      "font-size",
+      "font-style",
+      "font-weight",
+      "font-variant",
+      "font-size-adjust",
+      "font-stretch",
+      "font-effect",
+      "font-emphasize",
+      "font-emphasize-position",
+      "font-emphasize-style",
+      "font-smooth",
+      "-webkit-hyphens",
+      "-moz-hyphens",
+      "hyphens",
+      "line-height",
+      "color",
+      "text-align",
+      "-webkit-text-align-last",
+      "-moz-text-align-last",
+      "-ms-text-align-last",
+      "text-align-last",
+      "text-emphasis",
+      "text-emphasis-color",
+      "text-emphasis-style",
+      "text-emphasis-position",
+      "text-decoration",
+      "text-indent",
+      "text-justify",
+      "text-outline",
+      "-ms-text-overflow",
+      "text-overflow",
+      "text-overflow-ellipsis",
+      "text-overflow-mode",
+      "text-shadow",
+      "text-transform",
+      "text-wrap",
+      "-webkit-text-size-adjust",
+      "-ms-text-size-adjust",
+      "letter-spacing",
+      "-ms-word-break",
+      "word-break",
+      "word-spacing",
+      "-ms-word-wrap",
+      "word-wrap",
+      "-moz-tab-size",
+      "-o-tab-size",
+      "tab-size",
+      "white-space",
+      "vertical-align",
+      "list-style",
+      "list-style-position",
+      "list-style-type",
+      "list-style-image",
+      "pointer-events",
+      "-ms-touch-action",
+      "touch-action",
+      "cursor",
+      "visibility",
+      "zoom",
+      "table-layout",
+      "empty-cells",
+      "caption-side",
+      "border-spacing",
+      "border-collapse",
+      "content",
+      "quotes",
+      "counter-reset",
+      "counter-increment",
+      "resize",
+      "-webkit-user-select",
+      "-moz-user-select",
+      "-ms-user-select",
+      "-o-user-select",
+      "user-select",
+      "nav-index",
+      "nav-up",
+      "nav-right",
+      "nav-down",
+      "nav-left",
+      "background",
+      "background-color",
+      "background-image",
+      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
+      "filter:progid:DXImageTransform.Microsoft.gradient",
+      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+      "filter",
+      "background-repeat",
+      "background-attachment",
+      "background-position",
+      "background-position-x",
+      "background-position-y",
+      "-webkit-background-clip",
+      "-moz-background-clip",
+      "background-clip",
+      "background-origin",
+      "-webkit-background-size",
+      "-moz-background-size",
+      "-o-background-size",
+      "background-size",
+      "border",
+      "border-color",
+      "border-style",
+      "border-width",
+      "border-top",
+      "border-top-color",
+      "border-top-style",
+      "border-top-width",
+      "border-right",
+      "border-right-color",
+      "border-right-style",
+      "border-right-width",
+      "border-bottom",
+      "border-bottom-color",
+      "border-bottom-style",
+      "border-bottom-width",
+      "border-left",
+      "border-left-color",
+      "border-left-style",
+      "border-left-width",
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "-webkit-border-image",
+      "-moz-border-image",
+      "-o-border-image",
+      "border-image",
+      "-webkit-border-image-source",
+      "-moz-border-image-source",
+      "-o-border-image-source",
+      "border-image-source",
+      "-webkit-border-image-slice",
+      "-moz-border-image-slice",
+      "-o-border-image-slice",
+      "border-image-slice",
+      "-webkit-border-image-width",
+      "-moz-border-image-width",
+      "-o-border-image-width",
+      "border-image-width",
+      "-webkit-border-image-outset",
+      "-moz-border-image-outset",
+      "-o-border-image-outset",
+      "border-image-outset",
+      "-webkit-border-image-repeat",
+      "-moz-border-image-repeat",
+      "-o-border-image-repeat",
+      "border-image-repeat",
+      "outline",
+      "outline-width",
+      "outline-style",
+      "outline-color",
+      "outline-offset",
+      "-webkit-box-shadow",
+      "-moz-box-shadow",
+      "box-shadow",
+      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
+      "opacity",
+      "-ms-interpolation-mode",
+      "-webkit-transition",
+      "-moz-transition",
+      "-ms-transition",
+      "-o-transition",
+      "transition",
+      "-webkit-transition-delay",
+      "-moz-transition-delay",
+      "-ms-transition-delay",
+      "-o-transition-delay",
+      "transition-delay",
+      "-webkit-transition-timing-function",
+      "-moz-transition-timing-function",
+      "-ms-transition-timing-function",
+      "-o-transition-timing-function",
+      "transition-timing-function",
+      "-webkit-transition-duration",
+      "-moz-transition-duration",
+      "-ms-transition-duration",
+      "-o-transition-duration",
+      "transition-duration",
+      "-webkit-transition-property",
+      "-moz-transition-property",
+      "-ms-transition-property",
+      "-o-transition-property",
+      "transition-property",
+      "-webkit-transform",
+      "-moz-transform",
+      "-ms-transform",
+      "-o-transform",
+      "transform",
+      "-webkit-transform-origin",
+      "-moz-transform-origin",
+      "-ms-transform-origin",
+      "-o-transform-origin",
+      "transform-origin",
+      "-webkit-animation",
+      "-moz-animation",
+      "-ms-animation",
+      "-o-animation",
+      "animation",
+      "-webkit-animation-name",
+      "-moz-animation-name",
+      "-ms-animation-name",
+      "-o-animation-name",
+      "animation-name",
+      "-webkit-animation-duration",
+      "-moz-animation-duration",
+      "-ms-animation-duration",
+      "-o-animation-duration",
+      "animation-duration",
+      "-webkit-animation-play-state",
+      "-moz-animation-play-state",
+      "-ms-animation-play-state",
+      "-o-animation-play-state",
+      "animation-play-state",
+      "-webkit-animation-timing-function",
+      "-moz-animation-timing-function",
+      "-ms-animation-timing-function",
+      "-o-animation-timing-function",
+      "animation-timing-function",
+      "-webkit-animation-delay",
+      "-moz-animation-delay",
+      "-ms-animation-delay",
+      "-o-animation-delay",
+      "animation-delay",
+      "-webkit-animation-iteration-count",
+      "-moz-animation-iteration-count",
+      "-ms-animation-iteration-count",
+      "-o-animation-iteration-count",
+      "animation-iteration-count",
+      "-webkit-animation-direction",
+      "-moz-animation-direction",
+      "-ms-animation-direction",
+      "-o-animation-direction",
+      "animation-direction"
+    ]
+  ]
+}
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..5d126348
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.eslintrc b/.eslintrc
index fdaf2a6e..07a8a70e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -55,7 +55,7 @@
     "max-statements": [0, 10],
     "new-parens": [2],
     "new-cap": [2, {
-      "capIsNewExceptions": ["ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
+      "capIsNewExceptions": ["CSSModules", "ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
     }],
     "newline-after-var": [0],
     "no-alert": [2],
diff --git a/.scss-lint.yml b/.scss-lint.yml
new file mode 100644
index 00000000..52e8fec0
--- /dev/null
+++ b/.scss-lint.yml
@@ -0,0 +1,458 @@
+scss_files: "./components/**/*.scss"
+
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BorderZero:
+    enabled: true
+
+  ColorKeyword:
+    enabled: true
+
+  ColorVariable:
+    enabled: false
+
+  Comment:
+    enabled: true
+    exclude: []
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: false
+
+  DuplicateProperty:
+    enabled: true
+    exclude: []
+
+  ElsePlacement:
+    enabled: true
+    style: same_line # or 'new_line'
+
+  EmptyLineBetweenBlocks:
+    enabled: false
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short # or 'long'
+
+  HexNotation:
+    enabled: true
+    style: lowercase # or 'uppercase'
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportantRule:
+    enabled: false
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    character: space # or 'tab'
+    width: 2
+
+  LeadingZero:
+    enabled: false
+    style: exclude_zero # or 'include_zero'
+
+  MergeableSelector:
+    enabled: false
+    force_nesting: true
+
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: true
+    convention: hyphenated_lowercase # or 'BEM', or a regex pattern
+
+  NestingDepth:
+    enabled: false
+
+  PlaceholderInExtend:
+    enabled: false
+
+  PropertySortOrder:
+    enabled: true
+    ignore_unspecified: false
+    severity: warning
+    exclude: []
+    order: [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "-webkit-box-sizing",
+      "-moz-box-sizing",
+      "box-sizing",
+      "display",
+      "float",
+      "width",
+      "min-width",
+      "max-width",
+      "height",
+      "min-height",
+      "max-height",
+      "flex",
+      "flex-direction",
+      "flex-flow",
+      "flex-order",
+      "flex-pack",
+      "flex-align",
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "margin",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "-webkit-overflow-scrolling",
+      "-ms-overflow-x",
+      "-ms-overflow-y",
+      "-ms-overflow-style",
+      "clip",
+      "clear",
+      "font",
+      "font-family",
+      "font-size",
+      "font-style",
+      "font-weight",
+      "font-variant",
+      "font-size-adjust",
+      "font-stretch",
+      "font-effect",
+      "font-emphasize",
+      "font-emphasize-position",
+      "font-emphasize-style",
+      "font-smooth",
+      "-webkit-hyphens",
+      "-moz-hyphens",
+      "hyphens",
+      "line-height",
+      "color",
+      "text-align",
+      "-webkit-text-align-last",
+      "-moz-text-align-last",
+      "-ms-text-align-last",
+      "text-align-last",
+      "text-emphasis",
+      "text-emphasis-color",
+      "text-emphasis-style",
+      "text-emphasis-position",
+      "text-decoration",
+      "text-indent",
+      "text-justify",
+      "text-outline",
+      "-ms-text-overflow",
+      "text-overflow",
+      "text-overflow-ellipsis",
+      "text-overflow-mode",
+      "text-shadow",
+      "text-transform",
+      "text-wrap",
+      "-webkit-text-size-adjust",
+      "-ms-text-size-adjust",
+      "letter-spacing",
+      "-ms-word-break",
+      "word-break",
+      "word-spacing",
+      "-ms-word-wrap",
+      "word-wrap",
+      "-moz-tab-size",
+      "-o-tab-size",
+      "tab-size",
+      "white-space",
+      "vertical-align",
+      "list-style",
+      "list-style-position",
+      "list-style-type",
+      "list-style-image",
+      "pointer-events",
+      "-ms-touch-action",
+      "touch-action",
+      "cursor",
+      "visibility",
+      "zoom",
+      "table-layout",
+      "empty-cells",
+      "caption-side",
+      "border-spacing",
+      "border-collapse",
+      "content",
+      "quotes",
+      "counter-reset",
+      "counter-increment",
+      "resize",
+      "-webkit-user-select",
+      "-moz-user-select",
+      "-ms-user-select",
+      "-o-user-select",
+      "user-select",
+      "nav-index",
+      "nav-up",
+      "nav-right",
+      "nav-down",
+      "nav-left",
+      "background",
+      "background-color",
+      "background-image",
+      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
+      "filter:progid:DXImageTransform.Microsoft.gradient",
+      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+      "filter",
+      "background-repeat",
+      "background-attachment",
+      "background-position",
+      "background-position-x",
+      "background-position-y",
+      "-webkit-background-clip",
+      "-moz-background-clip",
+      "background-clip",
+      "background-origin",
+      "-webkit-background-size",
+      "-moz-background-size",
+      "-o-background-size",
+      "background-size",
+      "border",
+      "border-color",
+      "border-style",
+      "border-width",
+      "border-top",
+      "border-top-color",
+      "border-top-style",
+      "border-top-width",
+      "border-right",
+      "border-right-color",
+      "border-right-style",
+      "border-right-width",
+      "border-bottom",
+      "border-bottom-color",
+      "border-bottom-style",
+      "border-bottom-width",
+      "border-left",
+      "border-left-color",
+      "border-left-style",
+      "border-left-width",
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "-webkit-border-image",
+      "-moz-border-image",
+      "-o-border-image",
+      "border-image",
+      "-webkit-border-image-source",
+      "-moz-border-image-source",
+      "-o-border-image-source",
+      "border-image-source",
+      "-webkit-border-image-slice",
+      "-moz-border-image-slice",
+      "-o-border-image-slice",
+      "border-image-slice",
+      "-webkit-border-image-width",
+      "-moz-border-image-width",
+      "-o-border-image-width",
+      "border-image-width",
+      "-webkit-border-image-outset",
+      "-moz-border-image-outset",
+      "-o-border-image-outset",
+      "border-image-outset",
+      "-webkit-border-image-repeat",
+      "-moz-border-image-repeat",
+      "-o-border-image-repeat",
+      "border-image-repeat",
+      "outline",
+      "outline-width",
+      "outline-style",
+      "outline-color",
+      "outline-offset",
+      "-webkit-box-shadow",
+      "-moz-box-shadow",
+      "box-shadow",
+      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
+      "opacity",
+      "-ms-interpolation-mode",
+      "-webkit-transition",
+      "-moz-transition",
+      "-ms-transition",
+      "-o-transition",
+      "transition",
+      "-webkit-transition-delay",
+      "-moz-transition-delay",
+      "-ms-transition-delay",
+      "-o-transition-delay",
+      "transition-delay",
+      "-webkit-transition-timing-function",
+      "-moz-transition-timing-function",
+      "-ms-transition-timing-function",
+      "-o-transition-timing-function",
+      "transition-timing-function",
+      "-webkit-transition-duration",
+      "-moz-transition-duration",
+      "-ms-transition-duration",
+      "-o-transition-duration",
+      "transition-duration",
+      "-webkit-transition-property",
+      "-moz-transition-property",
+      "-ms-transition-property",
+      "-o-transition-property",
+      "transition-property",
+      "-webkit-transform",
+      "-moz-transform",
+      "-ms-transform",
+      "-o-transform",
+      "transform",
+      "-webkit-transform-origin",
+      "-moz-transform-origin",
+      "-ms-transform-origin",
+      "-o-transform-origin",
+      "transform-origin",
+      "-webkit-animation",
+      "-moz-animation",
+      "-ms-animation",
+      "-o-animation",
+      "animation",
+      "-webkit-animation-name",
+      "-moz-animation-name",
+      "-ms-animation-name",
+      "-o-animation-name",
+      "animation-name",
+      "-webkit-animation-duration",
+      "-moz-animation-duration",
+      "-ms-animation-duration",
+      "-o-animation-duration",
+      "animation-duration",
+      "-webkit-animation-play-state",
+      "-moz-animation-play-state",
+      "-ms-animation-play-state",
+      "-o-animation-play-state",
+      "animation-play-state",
+      "-webkit-animation-timing-function",
+      "-moz-animation-timing-function",
+      "-ms-animation-timing-function",
+      "-o-animation-timing-function",
+      "animation-timing-function",
+      "-webkit-animation-delay",
+      "-moz-animation-delay",
+      "-ms-animation-delay",
+      "-o-animation-delay",
+      "animation-delay",
+      "-webkit-animation-iteration-count",
+      "-moz-animation-iteration-count",
+      "-ms-animation-iteration-count",
+      "-o-animation-iteration-count",
+      "animation-iteration-count",
+      "-webkit-animation-direction",
+      "-moz-animation-direction",
+      "-ms-animation-direction",
+      "-o-animation-direction",
+      "animation-direction"
+    ]
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: [composes]
+
+  QualifyingElement:
+    enabled: false
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: false
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase # or 'BEM', or 'snake_case', or 'camel_case', or a regex pattern
+
+  Shorthand:
+    enabled: true
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  SingleLinePerSelector:
+    enabled: false
+
+  SpaceAfterComma:
+    enabled: false
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space
+    allow_single_line_padding: true
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: double_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingZero:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VendorPrefixes:
+    enabled: true
+    identifier_list: base
+    include: []
+    exclude: []
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false
diff --git a/components/animations/index.js b/components/animations/index.js
new file mode 100644
index 00000000..ccaa2b15
--- /dev/null
+++ b/components/animations/index.js
@@ -0,0 +1,4 @@
+module.exports = {
+  SlideLeft: require('./slide-left'),
+  SlideRight: require('./slide-right')
+};
diff --git a/components/animations/slide-left.scss b/components/animations/slide-left.scss
new file mode 100644
index 00000000..f6df6ec0
--- /dev/null
+++ b/components/animations/slide-left.scss
@@ -0,0 +1,28 @@
+@import "../variables";
+
+.enter, .leave {
+  position: absolute;
+  transition-timing-function: ease-in-out;
+  transition-duration: .35s;
+  transition-property: transform, opacity;
+}
+
+.enter {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+
+  &.enterActive {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
diff --git a/components/animations/slide-right.scss b/components/animations/slide-right.scss
new file mode 100644
index 00000000..5402c845
--- /dev/null
+++ b/components/animations/slide-right.scss
@@ -0,0 +1,28 @@
+@import "../variables";
+
+.enter, .leave {
+  position: absolute;
+  transition-timing-function: ease-in-out;
+  transition-duration: .35s;
+  transition-property: transform, opacity;
+}
+
+.enter {
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
+
+  &.enterActive {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+}
diff --git a/components/autocomplete/autocomplete.md b/components/autocomplete/autocomplete.md
index 8794065f..6be2dd8a 100644
--- a/components/autocomplete/autocomplete.md
+++ b/components/autocomplete/autocomplete.md
@@ -26,7 +26,6 @@ var data = [
 | **multiple**      | Bool          | true            | If true, component can hold multiple values.|
 | **onChange**      | Function      |                 | Callback function that is fired when the components's value changes.|
 | **required**      | Boolean       |                 | If true, component needs has a value.|
-| **type**          | String        | "text"          | Type of the component, overwrite this property if you need set a different stylesheet.|
 | **value**         | String        |                 | Default value using JSON data.|
 
 ## Methods
diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx
index 1503c3d0..fc811f5e 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/index.jsx
@@ -1,12 +1,12 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import utils from '../utils';
 import Input from '../input';
+import style from './style';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Autocomplete',
 
@@ -19,7 +19,6 @@ export default React.createClass({
     multiple: React.PropTypes.bool,
     onChange: React.PropTypes.func,
     required: React.PropTypes.bool,
-    type: React.PropTypes.string,
     value: React.PropTypes.any
   },
 
@@ -27,8 +26,7 @@ export default React.createClass({
     return {
       className: '',
       dataSource: {},
-      multiple: true,
-      type: 'text'
+      multiple: true
     };
   },
 
@@ -37,12 +35,17 @@ export default React.createClass({
       dataSource: this._indexDataSource(this.props.dataSource),
       focus: false,
       query: '',
-      values: new Map()
+      up: false,
+      values: new Map(),
+      width: undefined
     };
   },
 
   componentDidMount () {
     if (this.props.value) this.setValue(this.props.value);
+    this.setState({
+      width: ReactDOM.findDOMNode(this).getBoundingClientRect().width
+    });
   },
 
   componentWillReceiveProps (props) {
@@ -77,8 +80,15 @@ export default React.createClass({
   },
 
   handleFocus () {
-    this.refs.suggestions.getDOMNode().scrollTop = 0;
-    this.setState({active: '', focus: true});
+    let client = event.target.getBoundingClientRect();
+    let screen_height = window.innerHeight || document.documentElement.offsetHeight;
+
+    this.refs.suggestions.scrollTop = 0;
+    this.setState({
+      active: '',
+      up: client.top > ((screen_height / 2) + client.height),
+      focus: true
+    });
   },
 
   handleBlur () {
@@ -162,40 +172,54 @@ export default React.createClass({
   renderSelected () {
     if (this.props.multiple) {
       return (
-        <ul className={css.values} data-flex='horizontal wrap' onClick={this.handleUnselect}>
+        <ul data-flex='horizontal wrap' onClick={this.handleUnselect}>
           {[...this.state.values].map(([key, value]) => {
-            return (<li key={key} id={key}>{value}</li>);
+            return (<li className={style.value} key={key} id={key}>{value}</li>);
           })}
         </ul>
       );
     }
   },
 
+  renderSuggestions () {
+    return [...this._getSuggestions()].map(([key, value]) => {
+      let className = style.suggestion;
+      if (this.state.active === key) className += ` ${style.active}`;
+      return <li id={key} key={key} className={className}>{value}</li>;
+    });
+  },
+
   render () {
-    let className = `${css.root} ${this.props.className}`;
-    if (this.props.type) className += ` ${this.props.type}`;
-    if (this.state.focus) className += ' focus';
+    let className = style.root;
+    if (this.props.className) className += ` ${this.props.className}`;
+    if (this.state.focus) className += ` ${style.focus}`;
+
+    let suggestionsClassName = style.suggestions;
+    if (this.state.up) suggestionsClassName += ` ${style.up}`;
+    let suggestionsStyle = {width: this.state.width};
 
     return (
       <div data-react-toolbox='autocomplete' className={className}>
-        {this.props.label ? (<label>{this.props.label}</label>) : ''}
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : ''}
         {this.renderSelected()}
-        <Input {...this.props} ref='input' label='' value=''
-               onBlur={this.handleBlur}
-               onChange={this.handleQueryChange}
-               onFocus={this.handleFocus}
-               onKeyUp={this.handleKeyPress} />
-        <ul ref='suggestions'
-            className={css.suggestions}
-            onMouseDown={this.handleSelect}
-            onMouseOver={this.handleHover}>
-          {[...this._getSuggestions()].map(([key, value]) => {
-            return (
-              <li id={key} key={key} className={this.state.active === key ? 'active' : ''}>
-                {value}
-              </li>
-            );
-          })}
+        <Input
+          ref='input'
+          {...this.props}
+          label=''
+          value=''
+          className={style.input}
+          onBlur={this.handleBlur}
+          onChange={this.handleQueryChange}
+          onFocus={this.handleFocus}
+          onKeyUp={this.handleKeyPress} />
+        <ul
+          ref='suggestions'
+          className={suggestionsClassName}
+          onMouseDown={this.handleSelect}
+          onMouseOver={this.handleHover}
+          style={suggestionsStyle}
+        >
+          {this.renderSuggestions()}
         </ul>
       </div>
     );
diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
new file mode 100644
index 00000000..92356338
--- /dev/null
+++ b/components/autocomplete/style.scss
@@ -0,0 +1,75 @@
+@import "../variables";
+@import "../mixins";
+
+$autocomplete-color-primary: unquote("rgb(#{$color-primary})");
+$autocomplete-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
+$autocomplete-color-white: unquote("rgb(#{$color-white})");
+$autocomplete-suggestion-color-active: unquote("rgb(#{$palette-grey-200})");
+
+.root {
+  position: relative;
+
+  &.focus {
+    .label {
+      color: $autocomplete-color-primary;
+    }
+
+    .suggestions {
+      max-height: $items-overflow-max-height;
+      visibility: visible;
+      box-shadow: $zdepth-shadow-1;
+    }
+  }
+}
+
+.label {
+  font-size: $font-size-tiny;
+  color: $color-text-secondary;
+  transition: color $animation-duration $animation-curve-default;
+}
+
+.value {
+  display: inline-block;
+  padding: $unit * .5 $unit * .75;
+  margin: $unit * .25 $unit * .5 $unit * .25 0;
+  font-size: $font-size-tiny;
+  color: $autocomplete-color-primary-contrast;
+  cursor: pointer;
+  background-color: $autocomplete-color-primary;
+  border-radius: 3px;
+}
+
+.suggestions {
+  position: absolute;
+  z-index: 2;
+  max-height: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  visibility: hidden;
+  background-color: $autocomplete-color-white;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: max-height, box-shadow;
+
+  &:not(.up) {
+    bottom: auto;
+  }
+
+  &.up {
+    top: auto;
+    bottom: 0;
+  }
+}
+
+.suggestion {
+  padding: $unit;
+  cursor: pointer;
+
+  &.active {
+    background-color: $autocomplete-suggestion-color-active;
+  }
+}
+
+.input {
+  padding-bottom: 0;
+}
diff --git a/components/autocomplete/style.styl b/components/autocomplete/style.styl
deleted file mode 100644
index ff8d88af..00000000
--- a/components/autocomplete/style.styl
+++ /dev/null
@@ -1,47 +0,0 @@
-@import '../constants'
-
-:local(.values)
-  > *
-    display                                   : inline-block
-    margin                                    : 0 (SPACE / 2) (SPACE / 2) 0
-    padding                                   : (SPACE / 4) (SPACE / 2)
-    font-size                                 : FONT_SIZE_SMALL
-    color                                     : WHITE
-    background-color                          : PRIMARY
-    border-radius                             : (SPACE / 8)
-    cursor                                    : pointer
-
-:local(.suggestions)
-  z-index                                     : 2
-  position                                    : absolute
-  width                                       : 100%
-  height                                      : 0
-  max-height                                  : 50vh
-  overflow-x                                  : hidden
-  overflow-y                                  : scroll
-  margin-top                                  : -(SPACE)
-  background-color                            : WHITE
-  opacity                                     : 0
-  transform                                   : translateY(-(INPUT_HEIGHT / 2))
-  transition-property                         : height, box-shadow, opacity, transform
-  transition-duration                         : ANIMATION_DURATION
-  transition-timing-function                  : ANIMATION_EASE
-  > *
-    cursor                                    : pointer
-    padding                                   : (SPACE / 2)
-    &.active
-      color                                   : WHITE
-      background-color                        : PRIMARY_LIGHT
-
-:local(.root)
-  position                                    : relative
-  > label
-    font-size                                 : FONT_SIZE_TINY
-    color                                     : PRIMARY
-  // -- Overrides
-  &.focus
-    > :local(.suggestions)
-      height                                  : auto
-      opacity                                 : 1
-      transform                               : translateY(0%)
-      box-shadow                              : ZDEPTH_SHADOW_1
diff --git a/components/button/index.jsx b/components/button/index.jsx
index 232fab30..77a54f62 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -1,12 +1,12 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import FontIcon from '../font_icon';
 import Ripple from '../ripple';
+import style from './style.scss';
+import events from '../utils/events';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Button',
 
@@ -14,6 +14,8 @@ export default React.createClass({
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     icon: React.PropTypes.string,
+    primary: React.PropTypes.bool,
+    accent: React.PropTypes.bool,
     label: React.PropTypes.string,
     loading: React.PropTypes.bool,
     ripple: React.PropTypes.bool,
@@ -32,26 +34,29 @@ export default React.createClass({
     return { loading: this.props.loading };
   },
 
-  handleClick (event) {
-    if (this.props.onClick) this.props.onClick(event, this);
+  handleMouseDown (event) {
+    events.pauseEvent(event);
+    this.refs.ripple.start(event);
   },
 
   render () {
-    let className = this.props.className;
-    if (this.props.type) className += ` ${this.props.type}`;
-    if (this.state.focused) className += ' focused';
+    let className = style[this.props.type];
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
       <button
-        className={css.root + ' ' + className}
-        data-flex='horizontal center'
         data-react-toolbox='button'
+        {...this.props}
+        type=''
+        label=''
+        data-toolbox='button'
+        className={className}
         disabled={this.props.disabled || this.state.loading}
-        onClick={this.handleClick}
+        onMouseDown={this.handleMouseDown}
       >
-        { this.props.icon ? <FontIcon value={this.props.icon}/> : null }
-        { this.props.label ? <abbr>{this.props.label}</abbr> : null }
-        { this.props.ripple ? <Ripple loading={this.props.loading}/> : null }
+        { this.props.ripple ? <Ripple ref='ripple' loading={this.props.loading}/> : null }
+        { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon}/> : null }
+        { this.props.label ? <abbr className={style.label}>{this.props.label}</abbr> : null }
       </button>
     );
   },
diff --git a/components/button/style.scss b/components/button/style.scss
new file mode 100644
index 00000000..7780b564
--- /dev/null
+++ b/components/button/style.scss
@@ -0,0 +1,185 @@
+@import "../variables";
+@import "../mixins";
+
+$button-default-text-color: unquote("rgb(#{$color-black})") !default;
+$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
+$button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
+$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+$button-primary-color: unquote("rgb(#{$color-primary})") !default;
+$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
+$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
+$button-accent-color: unquote("rgb(#{$color-accent})") !default;
+$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
+$button-accent-color-active: unquote("rgba(#{$color-accent}, 0.40)") !default;
+$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
+$button-height: $unit * 3.6;
+$button-floating-height: $unit * 5.6;
+$button-floating-height-mini: $unit * 4;
+
+%button {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  height: $button-height;
+  flex-direction: row;
+  overflow: hidden;
+  color: $button-default-text-color;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 0;
+  outline: none;
+  transition: box-shadow .2s $animation-curve-fast-out-linear-in,
+                background-color .2s $animation-curve-default,
+                color .2s $animation-curve-default;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}
+
+%squared {
+  min-width: 9 * $unit;
+  padding: 0 $unit * 1.2;
+  border-radius: $border-radius;
+
+  .icon {
+    margin-right: $unit * .6;
+    font-size: 120%;
+    vertical-align: middle;
+  }
+}
+
+%disabled {
+  color: $button-disabled-text-color;
+  pointer-events: none;
+  cursor: auto;
+}
+
+//-- Local styles
+.label {
+  @include typo-button();
+  line-height: $button-height;
+}
+
+.flat {
+  @extend %button;
+  @extend %squared;
+  background: transparent;
+
+  &:hover {
+    background: $button-flat-color-hover;
+  }
+
+  &:focus:not(:active) {
+    background: $button-flat-color-hover;
+  }
+
+  &[disabled] {
+    @extend %disabled;
+  }
+}
+
+.raised {
+  @extend %button;
+  @extend %squared;
+  @include shadow-2dp();
+  background: $button-solid-background-color;
+
+  &:active {
+    @include shadow-4dp();
+  }
+
+  &:focus:not(:active) {
+    @include focus-shadow();
+  }
+
+  &[disabled] {
+    @extend %disabled;
+    @include shadow-2dp();
+    background-color: $button-solid-disabled-background-color;
+  }
+}
+
+.floating {
+  @extend %button;
+  width: $button-floating-height;
+  height: $button-floating-height;
+  font-size: $unit * 2.4;
+  background: $button-solid-background-color;
+  border-radius: 50%;
+  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
+
+  &:active {
+    @include shadow-4dp();
+  }
+
+  &:focus:not(:active) {
+    @include focus-shadow();
+  }
+
+  &[disabled] {
+    @extend %disabled;
+    @include shadow-2dp();
+    background-color: $button-solid-disabled-background-color;
+  }
+
+  .icon {
+    line-height: $button-floating-height;
+  }
+}
+
+:global(.primary):not([disabled]) {
+  &.raised, &.floating {
+    color: $button-primary-color-contrast;
+    background: $button-primary-color;
+  }
+
+  &.flat {
+    color: $button-primary-color;
+
+    &:hover {
+      background: $button-primary-color-hover;
+    }
+
+    &:focus:not(:active) {
+      background: $button-primary-color-hover;
+    }
+  }
+}
+
+:global(.accent):not([disabled]) {
+  &.raised, &.floating {
+    color: $button-accent-color-contrast;
+    background-color: $button-accent-color;
+  }
+
+  &.flat {
+    color: $button-accent-color;
+
+    &:hover {
+      background: $button-accent-color-hover;
+    }
+
+    &:focus:not(:active) {
+      background: $button-accent-color-hover;
+    }
+  }
+}
+
+:global(.mini) {
+  &.floating {
+    width: $button-floating-height-mini;
+    height: $button-floating-height-mini;
+    font-size: ($button-floating-height-mini / 2.25);
+
+    .icon {
+      line-height: $button-floating-height-mini;
+    }
+  }
+}
diff --git a/components/button/style.styl b/components/button/style.styl
deleted file mode 100644
index 91fa44d1..00000000
--- a/components/button/style.styl
+++ /dev/null
@@ -1,85 +0,0 @@
-@import '../constants'
-
-:local(.root)
-  z-index                       : 1
-  display                       : inline-block
-  position                      : relative
-  overflow                      : hidden
-  font-weight                   : 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
-
-  &.raised, &.flat
-    padding                       : (SPACE / 2) (SPACE / 1.25)
-    font-size                     : FONT_SIZE_SMALL
-    text-transform                : uppercase
-    border-radius                 : (SPACE / 8)
-    > *
-      vertical-align              : middle
-    > [data-react-toolbox='icon']
-      font-size                   : FONT_SIZE_BIG
-      margin-right                : (SPACE / 2)
-    > abbr
-      font-weight                 : FONT_WEIGHT_BOLD
-    &.anchor
-      width                       : 100%
-
-  &.flat
-    background-color          : transparent
-    &:not(.primary):not(.accent)
-      > [data-react-toolbox='ripple']
-        background-color      : alpha(TEXT, 12.5%)
-    &.primary
-      color                   : PRIMARY
-      > [data-react-toolbox='ripple']
-        background-color      : alpha(PRIMARY, 12.5%)
-    &.accent
-      color                   : ACCENT
-      > [data-react-toolbox='ripple']
-        background-color      : alpha(ACCENT, 12.5%)
-
-  &.floating
-    width                         : BUTTON_CIRCLE_HEIGHT
-    height                        : BUTTON_CIRCLE_HEIGHT
-    font-size                     : (BUTTON_CIRCLE_HEIGHT / 2.25)
-    border-radius                 : 50%
-    > [data-react-toolbox='icon']
-      line-height                 : BUTTON_CIRCLE_HEIGHT
-
-    &.mini
-      width                         : BUTTON_CIRCLE_MINI_HEIGHT
-      height                        : BUTTON_CIRCLE_MINI_HEIGHT
-      > [data-react-toolbox='icon']
-        line-height                 : BUTTON_CIRCLE_MINI_HEIGHT
-
-  // Overrides
-  &[disabled]
-    color                     : darken(DIVIDER, 25%)
-    background-color          : DIVIDER
-    pointer-events            : none
-
-  &:not([disabled])
-    cursor                      : pointer
-    &:hover, &:active, &:focus
-      outline                   : 0
-    &:not(.flat)
-      box-shadow                  ZDEPTH_SHADOW_1
-      &:not(.primary):not(.accent)
-        color                   : TEXT
-        background-color        : WHITE
-      &:active
-        box-shadow              : ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
-      &.primary, &.accent
-        color                   : WHITE
-      &.primary
-        background-color        : PRIMARY
-      &.accent
-        background-color        : ACCENT
-
-    &:not(.primary):not(.accent) > [data-react-toolbox='ripple']
-      background-color          : DIVIDER
diff --git a/components/calendar/day.jsx b/components/calendar/day.jsx
index 58c4c9e7..0609e87e 100644
--- a/components/calendar/day.jsx
+++ b/components/calendar/day.jsx
@@ -1,11 +1,10 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style';
 import time from '../utils/time';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Day',
 
@@ -33,7 +32,7 @@ export default React.createClass({
 
   render () {
     return (
-      <div className={this.isSelected() ? `${css.day} active` : css.day} style={this.dayStyle()}>
+      <div className={this.isSelected() ? `${style.day} ${style.active}` : style.day} style={this.dayStyle()}>
           <span onClick={this.props.onClick}>{this.props.day}</span>
       </div>
     );
diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx
index a6ad79b2..df4b0f8b 100644
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@@ -1,15 +1,15 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
-import utils from '../utils';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import CSSTransitionGroup from 'react-addons-css-transition-group';
+import { SlideLeft, SlideRight } from '../animations';
 import FontIcon from '../font_icon';
+import Ripple from '../ripple';
 import Month from './month';
-
-const { CSSTransitionGroup: CTG } = React.addons;
+import style from './style';
+import utils from '../utils';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Calendar',
 
@@ -40,26 +40,27 @@ export default React.createClass({
     }
   },
 
-  onDayClick (event) {
-    let newDate = utils.time.setDay(this.state.viewDate, parseInt(event.target.textContent));
+  onDayClick (day) {
+    let newDate = utils.time.setDay(this.state.viewDate, day);
     this.setState({selectedDate: newDate});
     if (this.props.onChange) this.props.onChange(newDate);
   },
 
-  onYearClick (event) {
-    let newDate = utils.time.setYear(this.state.selectedDate, parseInt(event.target.textContent));
+  onYearClick (year) {
+    let newDate = utils.time.setYear(this.state.selectedDate, year);
     this.setState({selectedDate: newDate, viewDate: newDate});
     if (this.props.onChange) this.props.onChange(newDate);
   },
 
   scrollToActive () {
-    this.refs.years.getDOMNode().scrollTop =
-      this.refs.activeYear.getDOMNode().offsetTop -
-      this.refs.years.getDOMNode().offsetHeight / 2 +
-      this.refs.activeYear.getDOMNode().offsetHeight / 2;
+    this.refs.years.scrollTop =
+      this.refs.activeYear.offsetTop -
+      this.refs.years.offsetHeight / 2 +
+      this.refs.activeYear.offsetHeight / 2;
   },
 
   incrementViewMonth () {
+    this.refs.rippleRight.start(event);
     this.setState({
       direction: 'right',
       viewDate: utils.time.addMonths(this.state.viewDate, 1)
@@ -67,6 +68,7 @@ export default React.createClass({
   },
 
   decrementViewMonth () {
+    this.refs.rippleLeft.start(event);
     this.setState({
       direction: 'left',
       viewDate: utils.time.addMonths(this.state.viewDate, -1)
@@ -75,9 +77,9 @@ export default React.createClass({
 
   renderYear (year) {
     let props = {
-      className: year === this.state.viewDate.getFullYear() ? 'active' : '',
-      key: `year-${year}`,
-      onClick: this.onYearClick
+      className: year === this.state.viewDate.getFullYear() ? style.active : '',
+      key: year,
+      onClick: this.onYearClick.bind(this, year)
     };
 
     if (year === this.state.viewDate.getFullYear()) {
@@ -89,31 +91,36 @@ export default React.createClass({
 
   renderYears () {
     return (
-      <ul ref="years" className={css.years}>
+      <ul ref="years" className={style.years}>
         { utils.range(1900, 2100).map(i => { return this.renderYear(i); })}
       </ul>
     );
   },
 
   renderMonths () {
+    let animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
     return (
-      <div className={this.state.direction}>
-        <FontIcon className={css.prev} value='chevron_left' onClick={this.decrementViewMonth}/>
-        <FontIcon className={css.next} value='chevron_right' onClick={this.incrementViewMonth}/>
-        <CTG transitionName='slide-horizontal'>
+      <div data-react-toolbox='calendar'>
+        <FontIcon className={style.prev} value='chevron-left' onMouseDown={this.decrementViewMonth}>
+          <Ripple ref='rippleLeft' className={style.ripple} spread={1.2} centered />
+        </FontIcon>
+        <FontIcon className={style.next} value='chevron-right' onMouseDown={this.incrementViewMonth}>
+          <Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
+        </FontIcon>
+        <CSSTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
           <Month
             key={this.state.viewDate.getMonth()}
             viewDate={this.state.viewDate}
             selectedDate={this.state.selectedDate}
             onDayClick={this.onDayClick} />
-        </CTG>
+        </CSSTransitionGroup>
       </div>
     );
   },
 
   render () {
     return (
-      <div className={css.root}>
+      <div className={style.root}>
         { this.props.display === 'months' ? this.renderMonths() : this.renderYears() }
       </div>
     );
diff --git a/components/calendar/month.jsx b/components/calendar/month.jsx
index b39ee232..fb8c5b0e 100644
--- a/components/calendar/month.jsx
+++ b/components/calendar/month.jsx
@@ -1,12 +1,11 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
-import utils from '../utils';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import Day from './day';
+import style from './style';
+import utils from '../utils';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Month',
 
@@ -16,36 +15,38 @@ export default React.createClass({
     viewDate: React.PropTypes.object
   },
 
+  handleDayClick (day) {
+    if (this.props.onDayClick) this.props.onDayClick(day);
+  },
+
   renderWeeks () {
     return utils.range(0, 7).map(i => {
-      return (
-        <span key={`dw${i}`}>
-          { utils.time.getFullDayOfWeek(i).charAt(0) }
-        </span>
-      );
+      return <span key={i}>{ utils.time.getFullDayOfWeek(i).charAt(0) }</span>;
     });
   },
 
   renderDays () {
     return utils.range(1, utils.time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
       return (
-        <Day key={`d${i}`}
+        <Day
+          key={i}
           day={i}
-          onClick={this.props.onDayClick}
+          onClick={this.handleDayClick.bind(this, i)}
           selectedDate={this.props.selectedDate}
-          viewDate={this.props.viewDate} />
+          viewDate={this.props.viewDate}
+        />
       );
     });
   },
 
   render () {
     return (
-      <div>
-        <span className={css.title}>
+      <div className={style.month}>
+        <span className={style.title}>
           { utils.time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear() }
         </span>
-        <div className={css.week}>{ this.renderWeeks() }</div>
-        <div className={css.days}>{ this.renderDays() }</div>
+        <div className={style.week}>{ this.renderWeeks() }</div>
+        <div className={style.days}>{ this.renderDays() }</div>
       </div>
     );
   }
diff --git a/components/calendar/style.scss b/components/calendar/style.scss
new file mode 100644
index 00000000..27b2dc80
--- /dev/null
+++ b/components/calendar/style.scss
@@ -0,0 +1,114 @@
+@import "../variables";
+
+$calendar-primary: $color-primary;
+$calendar-primary-contrast: $color-primary-contrast;
+$calendar-primary-color: unquote("rgb(#{$calendar-primary})") !default;
+$calendar-primary-contrast-color: unquote("rgb(#{$calendar-primary-contrast})") !default;
+$calendar-primary-hover-color: unquote("rgba(#{$calendar-primary}, 0.21)") !default;
+$calendar-arrows-color: unquote("rgb(#{$palette-grey-600})") !default;
+$calendar-row-height: 3 * $unit;
+$calendar-day-padding: .2 * $unit;
+$calendar-total-height: $calendar-row-height * 8 + $calendar-day-padding * 12;
+
+.root {
+  position: relative;
+  height: $calendar-total-height;
+  font-size: 1.4 * $unit;
+  line-height: $calendar-row-height;
+  text-align: center;
+  background: $calendar-primary-contrast-color;
+
+  .prev, .next {
+    position: absolute;
+    top: 0;
+    z-index: $z-index-high;
+    width: $calendar-row-height;
+    height: $calendar-row-height;
+    font-size: 2 * $unit;
+    line-height: $calendar-row-height;
+    color: $calendar-arrows-color;
+    text-align: center;
+    cursor: pointer;
+    opacity: .7;
+  }
+
+  .prev {
+    left: 0;
+  }
+
+  .next {
+    right: 0;
+  }
+}
+
+.title {
+  font-weight: 500;
+}
+
+.years {
+  height: 100%;
+  overflow: scroll;
+  font-size: 1.8 * $unit;
+
+  > li {
+    line-height: 2.4;
+    cursor: pointer;
+
+    &.active {
+      font-size: 2.4 * $unit;
+      color: $calendar-primary-color;
+    }
+  }
+}
+
+.week {
+  display: flex;
+  height: $calendar-row-height;
+  font-size: 1.3 * $unit;
+  line-height: $calendar-row-height;
+  opacity: .5;
+  flex-wrap: wrap;
+
+  > span {
+    flex: 0 0 (100% / 7);
+  }
+}
+
+.days {
+  display: flex;
+  font-size: 13px;
+  flex-wrap: wrap;
+}
+
+:local(.day) {
+  flex: 0 0 (100% / 7);
+  padding: $calendar-day-padding;
+
+  > span {
+    display: inline-block;
+    width: $calendar-row-height;
+    height: $calendar-row-height;
+    line-height: $calendar-row-height;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
+  &:hover:not(.active) > span {
+    color: $calendar-primary-contrast-color;
+    background: $calendar-primary-hover-color;
+  }
+
+  &.active > span {
+    color: $calendar-primary-contrast-color;
+    background: $calendar-primary-color;
+  }
+}
+
+.month {
+  background-color: $calendar-primary-contrast-color;
+}
+
+.ripple {
+  opacity: .5;
+  transition-duration: 450ms;
+}
diff --git a/components/calendar/style.styl b/components/calendar/style.styl
deleted file mode 100644
index f74ee088..00000000
--- a/components/calendar/style.styl
+++ /dev/null
@@ -1,118 +0,0 @@
-@import '../constants'
-
-// -- Calendar sizes
-ROW_HEIGHT   = 40px
-DAY_PADDING  = 2px
-TOTAL_HEIGHT = ROW_HEIGHT * 8 + DAY_PADDING * 12
-
-:local(.root)
-  background        : WHITE
-  height            : TOTAL_HEIGHT
-  font-size         : 14px
-  overflow          : hidden
-  position          : relative
-  line-height       : ROW_HEIGHT
-  text-align        : center
-
-:local(.prev), :local(.next)
-  color             : lighten(TEXT, 15%)
-  cursor            : pointer
-  font-size         : 26px
-  height            : ROW_HEIGHT
-  line-height       : ROW_HEIGHT
-  opacity           : .7
-  position          : absolute
-  text-align        : center
-  top               : 0
-  width             : ROW_HEIGHT
-  z-index           : Z_INDEX_HIGH
-
-:local(.title)
-  font-weight       : 500
-
-:local(.prev)
-  left              : 0
-
-:local(.next)
-  right             : 0
-
-:local(.week)
-  display           : flex
-  flex-wrap         : wrap
-  font-size         : 13px
-  height            : ROW_HEIGHT
-  line-height       : ROW_HEIGHT
-  opacity           : .5
-
-  > span
-    flex            : 0 0 (100/7)%
-
-:local(.days)
-  display           : flex
-  flex-wrap         : wrap
-  font-size         : 13px
-
-:local(.day)
-  flex              : 0 0 (100/7)%
-  padding           : DAY_PADDING
-
-  > span
-    border-radius   : 50%
-    cursor          : pointer
-    display         : inline-block
-    height          : ROW_HEIGHT
-    line-height     : ROW_HEIGHT
-    width           : ROW_HEIGHT
-
-  &:hover:not(.active) > span
-    background      : lighten(ACCENT, 65%)
-    color           : WHITE
-
-  &.active > span
-    background      : ACCENT
-    color           : WHITE
-
-// -- Transitions
-:local(.root) .slide-horizontal-enter, :local(.root) .slide-horizontal-leave
-  transition        : all .5s
-
-:local(.root) .right
-  .slide-horizontal-enter
-    position        : absolute
-    transform       : translateX(100%)
-    opacity         : 0
-
-  .slide-horizontal-leave, .slide-horizontal-enter-active
-    transform       : translateX(0)
-    opacity         : 1
-
-  .slide-horizontal-leave-active
-    transform       : translateX(-100%)
-    opacity         : 0
-
-:local(.root) .left
-  .slide-horizontal-enter
-    position        : absolute
-    transform       : translateX(-100%)
-    opacity         : 0
-
-  .slide-horizontal-leave, .slide-horizontal-enter-active
-    transform       : translateX(0)
-    opacity         : 1
-
-  .slide-horizontal-leave-active
-    transform       : translateX(100%)
-    opacity         : 0
-
-:local(.years)
-  font-size         : 18px
-  height            : 100%
-  overflow          : scroll
-
-  > li
-    cursor          : pointer
-    line-height     : 2.4
-
-    &.active
-      color         : ACCENT
-      font-size     : 24px
diff --git a/components/card/index.jsx b/components/card/index.jsx
index 5f6ec4e5..44436f6f 100644
--- a/components/card/index.jsx
+++ b/components/card/index.jsx
@@ -1,12 +1,11 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import style from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import Navigation from '../navigation';
 import Ripple from '../ripple';
+import style from './style.scss';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Card',
 
@@ -15,7 +14,6 @@ export default React.createClass({
     color: React.PropTypes.string,
     image: React.PropTypes.string,
     text: React.PropTypes.string,
-    legend: React.PropTypes.string,
     loading: React.PropTypes.bool,
     onClick: React.PropTypes.func,
     title: React.PropTypes.string,
@@ -36,42 +34,66 @@ export default React.createClass({
     };
   },
 
-  onClick (event) {
+  handleMouseDown (event) {
     if (this.props.onClick) {
       event.preventDefault();
+      this.refs.ripple.start(event);
       this.props.onClick(event, this);
     }
   },
 
-  renderHeading () {
-    let headingStyle = {};
-    if (this.props.image) headingStyle.backgroundImage = `url(${this.props.image})`;
-    if (this.props.color) headingStyle.backgroundColor = this.props.color;
+  renderTitle () {
+    let styleFigure = {}, styleOverflow = {};
+    if (this.props.image) styleFigure.backgroundImage = `url(${this.props.image})`;
+    if (this.props.color) {
+      styleFigure.backgroundColor = this.props.color;
+      styleOverflow.backgroundColor = this.props.color;
+    }
+
     if (this.props.title || this.props.image) {
       return (
-        <figure className={style.figure} style={headingStyle}>
+        <figure className={style.figure} style={styleFigure}>
           { this.props.subtitle ? <small>{this.props.subtitle}</small> : null }
-          { this.props.title ? <h2>{this.props.title}</h2> : null }
+          { this.props.title ? <h5>{this.props.title}</h5> : null }
+          { this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null }
         </figure>
       );
     }
   },
 
+  renderActions () {
+    if (this.props.actions) {
+      return (
+        <Navigation className={style.navigation} actions={this.props.actions} />
+      );
+    }
+  },
+
   render () {
     let className = `${style.root} ${this.props.className}`;
-    if (this.props.type) className += ` ${this.props.type}`;
-    if (this.props.onClick) className += ' touch';
-    if (this.props.image) className += ' image';
-    if (this.props.color) className += ' color';
-    if (this.state.loading) className += ' loading';
+    if (this.props.type) className += ` ${style[this.props.type]}`;
+    if (this.props.onClick) className += ` ${style.touch}`;
+    if (this.props.image || this.props.color) className += ` ${style.contrast}`;
+    if (this.props.color) className += ` ${style.color}`;
+    if (this.state.loading) className += ` ${style.loading}`;
 
     return (
-      <div data-react-toolbox='card' className={className} onMouseDown={this.onClick}>
-        { this.renderHeading() }
-        { this.props.text ? <p>{this.props.text}</p> : null }
-        { this.props.legend ? <small>{this.props.legend}</small> : null}
-        { this.props.actions ? <Navigation className={style.navigation} actions={this.props.actions} /> : null }
-        { <Ripple ref="ripple" className={style.ripple} loading={this.state.loading} /> }
+      <div
+        data-react-toolbox='card'
+        data-flex='vertical grow'
+        data-react-toolbox='card'
+        className={className}
+        onMouseDown={this.handleMouseDown}
+      >
+        { this.renderTitle() }
+        { this.props.text ? <p className={style.text}>{this.props.text}</p> : null }
+        { this.renderActions() }
+        <Ripple
+          ref='ripple'
+          className={style.ripple}
+          loading={this.state.loading}
+          spread={2.5}
+        />
       </div>
     );
   },
diff --git a/components/card/style.scss b/components/card/style.scss
new file mode 100644
index 00000000..62a13ace
--- /dev/null
+++ b/components/card/style.scss
@@ -0,0 +1,129 @@
+@import "../variables";
+@import "../mixins";
+
+$card-color-white: unquote("rgb(#{$color-white})") !default;
+$card-title-height: 17.6 * $unit;
+$card-width-normal: 32 * $unit;
+$card-width-large: 51.2 * $unit;
+$card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");
+
+.figure {
+  position: relative;
+  display: flex;
+  min-height: $card-title-height;
+  flex-direction: column;
+  background-position: center center;
+  background-size: cover;
+  justify-content: flex-end;
+
+  > *:not(.overflow) {
+    z-index: 1;
+    font-weight: $font-weight-normal;
+  }
+
+  > .overflow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    opacity: .75;
+  }
+}
+
+.text {
+  font-size: $font-size-small;
+  line-height: 1.8 * $unit;
+  color: $color-text-secondary;
+}
+
+.navigation {
+  $offset: ($offset / 2);
+  padding: $offset;
+
+  > * {
+    min-width: 0;
+    padding-right: $offset;
+    padding-left: $offset;
+  }
+}
+
+.ripple {
+  background-color: $color-text-secondary;
+}
+
+.root {
+  @include shadow-2dp();
+  position: relative;
+  display: flex;
+  width: $card-width-normal;
+  flex-direction: column;
+  overflow: hidden;
+  vertical-align: top;
+  background: $color-background;
+
+  // -- Children
+  > *:not(.navigation) {
+    padding: $offset;
+  }
+
+  &:not(.color) > *:not(.figure), > *:not(:last-child) {
+    box-shadow: 0 1px $color-divider;
+  }
+}
+
+.touch {
+  cursor: pointer;
+}
+
+.contrast {
+  .figure {
+    color: $card-color-white;
+    text-shadow: 0;
+  }
+
+  .ripple {
+    background-color: $card-color-white;
+  }
+}
+
+.loading {
+  pointer-events: none;
+  cursor: none;
+  filter: grayscale(100%);
+
+  .ripple {
+    @include ripple-loading(cardloading, 2 * $card-width-normal, 2 * $card-width-normal);
+    width: 2 * $card-width-normal;
+    height: 2 * $card-width-normal;
+    animation-name: cardloading;
+  }
+}
+
+.image {
+  &, .figure {
+    height: $card-width-normal;
+  }
+
+  .figure {
+    padding: 0;
+
+    > h5 {
+      padding: $offset;
+      font-size: $font-size-small;
+      font-weight: $font-weight-bold;
+      background-color: $card-text-overlay;
+    }
+  }
+}
+
+.event {
+  .figure {
+    justify-content: flex-start;
+  }
+}
+
+.wide {
+  width: $card-width-large;
+}
diff --git a/components/card/style.styl b/components/card/style.styl
deleted file mode 100644
index cf3a4f53..00000000
--- a/components/card/style.styl
+++ /dev/null
@@ -1,70 +0,0 @@
-@import '../constants'
-
-SIZE                              = (5 * UNIT)
-OFFSET                            = (SPACE / 1.25)
-
-:local(.navigation)
-  padding                         : OFFSET = (OFFSET / 2)
-  > *
-    padding-left                  : OFFSET
-    padding-right                 : OFFSET
-    box-shadow                    : none !important
-    &:hover
-      background-color            : rgba(0,0,0,0.1) !important
-
-:local(.figure)
-  display-flex()
-  flex-direction                  : column
-  justify-content                 : flex-end
-  flex-grow                       : 2
-  min-height                      : (SIZE / 2)
-  background-size                 : cover
-  > *
-    font-weight                   : FONT_WEIGHT_NORMAL
-
-:local(.root)
-  display-flex()
-  flex-direction                    column
-  position                        : relative
-  overflow                        : hidden
-  width                           : SIZE
-  box-shadow                      : ZDEPTH_SHADOW_1
-  background                      : WHITE
-
-  // -- Children
-  > *:not(:local(.ripple)):not(:local(.navigation))
-    padding                       : OFFSET
-  &:not(.color):not(.image) > :local(.ripple)
-    background-color              : red
-  &:not(.color) > *:not(figure), > *:not(:last-child)
-    box-shadow                    : 0 1px darken(BACKGROUND, 5%)
-  > :local(.figure)
-
-  // -- Overrides
-  &.touch
-    cursor                        : pointer
-    &:hover, &:active
-      box-shadow                  : ZDEPTH_SHADOW_2
-  &.image > :local(.figure)
-    text-shadow                   : ZDEPTH_SHADOW_1
-  &.image, &.color
-    > :local(.figure)
-      color                       : WHITE
-  &.loading
-    cursor                        : none
-    pointer-events                : none
-    -webkit-filter                : grayscale(100%)
-    &, &:hover
-      box-shadow                  : 0 0 0 1px DIVIDER
-    :local(.ripple)
-      width                       : SIZE = (SIZE * 2)
-      height                      : SIZE
-  &.small > :local(.figure)
-    min-height                    : 0px
-  &.square
-    height                        : SIZE
-  &.wide
-    width                         : (SIZE * 2)
-
-:local(.ripple)
-  background-color: #888
diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx
new file mode 100644
index 00000000..06565535
--- /dev/null
+++ b/components/checkbox/index.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import Ripple from '../ripple';
+import style from './style';
+import events from '../utils/events';
+
+export default React.createClass({
+  mixins: [PureRenderMixin],
+
+  displayName: 'Checkbox',
+
+  propTypes: {
+    checked: React.PropTypes.bool,
+    className: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    label: React.PropTypes.string,
+    name: React.PropTypes.string,
+    onBlur: React.PropTypes.func,
+    onChange: React.PropTypes.func,
+    onFocus: React.PropTypes.func
+  },
+
+  getDefaultProps () {
+    return {
+      checked: false,
+      className: '',
+      disabled: false
+    };
+  },
+
+  getInitialState () {
+    return { checked: this.props.checked };
+  },
+
+  handleChange (event) {
+    this.setState({checked: !this.state.checked}, () => {
+      if (this.props.onChange) this.props.onChange(event, this);
+    });
+  },
+
+  handleClick (event) {
+    events.pauseEvent(event);
+    if (!this.props.disabled) this.handleChange(event);
+  },
+
+  handleMouseDown (event) {
+    if (!this.props.disabled) this.refs.ripple.start(event);
+  },
+
+  handleInputClick (event) {
+    events.pauseEvent(event);
+  },
+
+  render () {
+    let fieldClassName = style.field;
+    let checkboxClassName = style.check;
+    if (this.props.disabled) fieldClassName += ` ${style.disabled}`;
+    if (this.props.className) fieldClassName += ` ${this.props.className}`;
+    if (this.state.checked) checkboxClassName += ` ${style.checked}`;
+
+    return (
+      <label
+        data-react-toolbox='checkbox'
+        className={fieldClassName}
+        onClick={this.handleClick}
+      >
+        <input
+          {...this.props}
+          ref='input'
+          type='checkbox'
+          checked={this.state.checked}
+          className={style.input}
+          onChange={this.handleChange}
+          onClick={this.handleInputClick}
+        />
+        <span role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
+          <Ripple ref='ripple' role='ripple' className={style.ripple} spread={3} centered />
+        </span>
+        { this.props.label ? <span className={style.text}>{this.props.label}</span> : null }
+      </label>
+    );
+  },
+
+  blur () {
+    this.refs.input.blur();
+  },
+
+  focus () {
+    this.refs.input.focus();
+  },
+
+  getValue () {
+    return this.state.checked;
+  },
+
+  setValue (value) {
+    this.setState({checked: value});
+  }
+});
diff --git a/components/checkbox/style.scss b/components/checkbox/style.scss
new file mode 100644
index 00000000..d09ff58a
--- /dev/null
+++ b/components/checkbox/style.scss
@@ -0,0 +1,135 @@
+@import "../variables";
+
+$checkbox-total-height: 1.8 * $unit;
+$checkbox-size: 1.8 * $unit;
+$checkbox-transition-duration: .2s;
+$checkbox-focus-size: $checkbox-size * 2.3;
+$checkbox-color: unquote("rgb(#{$color-primary})") !default;
+$checkbox-text-color: unquote("rgb(#{$color-black})") !default;
+$checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$check-focus-color: unquote("rgba(#{$color-black}, 0.1)") !default;
+$checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+
+.field {
+  position: relative;
+  display: block;
+  height: $checkbox-size;
+  margin-bottom: 1.5 * $unit;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.text {
+  display: inline-block;
+  padding-left: $unit;
+  font-size: 1.4 * $unit;
+  line-height: $checkbox-size;
+  color: $checkbox-text-color;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.input {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+
+  &:focus:not(&:active) + .check {
+    &:before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: $z-index-low;
+      width: $checkbox-focus-size;
+      height: $checkbox-focus-size;
+      margin-top: - $checkbox-focus-size / 2;
+      margin-left: - $checkbox-focus-size / 2;
+      pointer-events: none;
+      content: "";
+      background-color: $check-focus-color;
+      border-radius: 50%;
+    }
+
+    &.checked:before {
+      background-color: $checked-focus-color;
+    }
+  }
+}
+
+.check {
+  position: relative;
+  display: inline-block;
+  width: $checkbox-size;
+  height: $checkbox-size;
+  vertical-align: top;
+  cursor: pointer;
+  border-color: $checkbox-text-color;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 2px;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $checkbox-transition-duration;
+  transition-property: background-color;
+
+  &.checked {
+    background-color: $checkbox-color;
+    border-color: $checkbox-color;
+
+    &:after {
+      position: absolute;
+      top: -.1 * $unit;
+      left: .4 * $unit;
+      width: .7 * $unit;
+      height: 1.2 * $unit;
+      content: "";
+      border-color: #fff;
+      border-style: solid;
+      border-top: 0;
+      border-right-width: 2px;
+      border-bottom-width: 2px;
+      border-left: 0;
+      transform: rotate(45deg);
+      animation: checkmark-expand 140ms ease-out forwards;
+    }
+  }
+}
+
+.ripple {
+  background-color: $checkbox-color;
+  opacity: .3;
+  transition-duration: 650ms;
+}
+
+.disabled {
+  > .text {
+    color: $checkbox-disabled-color;
+  }
+
+  > .check {
+    cursor: auto;
+    border-color: $checkbox-disabled-color;
+
+    &.checked {
+      cursor: auto;
+      background-color: $checkbox-disabled-color;
+      border-color: transparent;
+    }
+  }
+}
+
+@keyframes checkmark-expand {
+  0% {
+    top: .9 * $unit;
+    left: .6 * $unit;
+    width: 0;
+    height: 0;
+  }
+
+  100% {
+    top: -.1 * $unit;
+    left: .4 * $unit;
+    width: .7 * $unit;
+    height: 1.2 * $unit;
+  }
+}
diff --git a/components/clock/face.jsx b/components/clock/face.jsx
index 1a0dd720..fce97630 100644
--- a/components/clock/face.jsx
+++ b/components/clock/face.jsx
@@ -1,10 +1,9 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Face',
 
@@ -33,10 +32,14 @@ export default React.createClass({
   },
 
   renderNumber (number, idx) {
+    let className = style.number;
+    if (number === this.props.active) className += ` ${style.active}`;
     return (
-      <span className={css.number + (number === this.props.active ? ' active' : '')}
-            style={this.numberStyle(this.props.radius - this.props.spacing, idx + 1)}
-            key={number}>
+      <span
+        className={className}
+        style={this.numberStyle(this.props.radius - this.props.spacing, idx + 1)}
+        key={number}
+      >
         { this.props.twoDigits ? ('0' + number).slice(-2) : number }
       </span>
     );
@@ -44,11 +47,13 @@ export default React.createClass({
 
   render () {
     return (
-      <div ref="root"
-           className={css.face}
-           onTouchStart={this.props.onTouchStart}
-           onMouseDown={this.props.onMouseDown}
-           style={this.faceStyle()}>
+      <div
+        ref="root"
+        className={style.face}
+        onTouchStart={this.props.onTouchStart}
+        onMouseDown={this.props.onMouseDown}
+        style={this.faceStyle()}
+      >
         { this.props.numbers.map(this.renderNumber)}
       </div>
     );
diff --git a/components/clock/hand.jsx b/components/clock/hand.jsx
index 23dcdf12..f1ceaef7 100644
--- a/components/clock/hand.jsx
+++ b/components/clock/hand.jsx
@@ -1,11 +1,10 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style';
 import utils from '../utils';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Hand',
 
@@ -30,7 +29,7 @@ export default React.createClass({
   },
 
   componentDidMount () {
-    this.setState({knobWidth: this.refs.knob.getDOMNode().offsetWidth});
+    this.setState({knobWidth: this.refs.knob.offsetWidth});
   },
 
   getMouseEventMap () {
@@ -100,14 +99,15 @@ export default React.createClass({
   },
 
   render () {
-    let style = utils.prefixer({
+    const className = `${style.hand} ${this.props.className}`;
+    let handStyle = utils.prefixer({
       height: this.props.length - this.state.knobWidth / 2,
       transform: `rotate(${this.props.angle}deg)`
     });
 
     return (
-      <div className={css.hand + ' ' + this.props.className} style={style}>
-        <div ref='knob' className={css.knob}></div>
+      <div className={className} style={handStyle}>
+        <div ref='knob' className={style.knob}></div>
       </div>
     );
   }
diff --git a/components/clock/hours.jsx b/components/clock/hours.jsx
index e95d62a0..552e26d8 100644
--- a/components/clock/hours.jsx
+++ b/components/clock/hours.jsx
@@ -1,16 +1,16 @@
-/* global React */
-
-import { addons } from 'react/addons';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import utils from '../utils';
 import Face from './face';
 import Hand from './hand';
 
 const outerNumbers = [0, ...utils.range(13, 24)];
 const innerNumbers = [12, ...utils.range(1, 12)];
+const innerSpacing = 1.7;
 const step = 360 / 12;
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Hours',
 
@@ -28,10 +28,13 @@ export default React.createClass({
   },
 
   onHandMove (degrees, radius) {
-    let currentInner = radius < this.props.radius - this.props.spacing * 2;
-    this.props.onChange(this.valueFromDegrees(degrees));
+    let currentInner = radius < this.props.radius - this.props.spacing * innerSpacing;
     if (this.props.format === '24hr' && this.state.inner !== currentInner) {
-      this.setState({inner: currentInner});
+      this.setState({inner: currentInner}, () => {
+        this.props.onChange(this.valueFromDegrees(degrees));
+      });
+    } else {
+      this.props.onChange(this.valueFromDegrees(degrees));
     }
   },
 
@@ -60,7 +63,8 @@ export default React.createClass({
           numbers={innerNumbers}
           spacing={this.props.spacing}
           radius={innerRadius}
-          active={this.props.selected} />
+          active={this.props.selected}
+        />
       );
     }
   },
@@ -78,15 +82,17 @@ export default React.createClass({
             spacing={spacing}
             radius={radius}
             twoDigits={is24hr}
-            active={is24hr ? selected : (selected % 12 || 12)} />
-          { this.renderInnerFace(radius - spacing * 2) }
+            active={is24hr ? selected : (selected % 12 || 12)}
+          />
+          { this.renderInnerFace(radius - spacing * innerSpacing) }
           <Hand ref='hand'
             angle={selected * step}
-            length={(this.state.inner ? radius - spacing * 2 : radius) - spacing}
+            length={(this.state.inner ? radius - spacing * innerSpacing : radius) - spacing}
             onMove={this.onHandMove}
             onMoved={onHandMoved}
             origin={center}
-            step={step} />
+            step={step}
+          />
       </div>
     );
   }
diff --git a/components/clock/index.jsx b/components/clock/index.jsx
index d7669784..c27f87f4 100644
--- a/components/clock/index.jsx
+++ b/components/clock/index.jsx
@@ -1,13 +1,12 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style';
 import time from '../utils/time';
 import Hours from './hours';
 import Minutes from './minutes';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Clock',
 
@@ -80,7 +79,7 @@ export default React.createClass({
   },
 
   calculateShape () {
-    let { top, left, width } = this.refs.wrapper.getDOMNode().getBoundingClientRect();
+    let { top, left, width } = this.refs.wrapper.getBoundingClientRect();
     this.setState({
       center: { x: left + width / 2, y: top + width / 2 },
       radius: width / 2
@@ -95,7 +94,8 @@ export default React.createClass({
         onChange={this.onHourChange}
         radius={this.state.radius}
         selected={this.state.time.getHours()}
-        spacing={this.state.radius * 0.16} />
+        spacing={this.state.radius * 0.18}
+      />
     );
   },
 
@@ -106,14 +106,15 @@ export default React.createClass({
         onChange={this.onMinuteChange}
         radius={this.state.radius}
         selected={this.state.time.getMinutes()}
-        spacing={this.state.radius * 0.16} />
+        spacing={this.state.radius * 0.18}
+      />
     );
   },
 
   render () {
     return (
-      <div className={css.root}>
-        <div ref="wrapper" className={css.wrapper} style={{height: this.state.radius * 2}}>
+      <div data-react-toolbox='clock' className={style.root}>
+        <div ref="wrapper" className={style.wrapper} style={{height: this.state.radius * 2}}>
           { this.props.display === 'hours' ? this.renderHours() : '' }
           { this.props.display === 'minutes' ? this.renderMinutes() : '' }
         </div>
diff --git a/components/clock/minutes.jsx b/components/clock/minutes.jsx
index 00128be1..27191c7c 100644
--- a/components/clock/minutes.jsx
+++ b/components/clock/minutes.jsx
@@ -1,7 +1,7 @@
-/* global React */
-
-import { addons } from 'react/addons';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import utils from '../utils';
+import style from './style';
 import Face from './face';
 import Hand from './hand';
 
@@ -9,7 +9,7 @@ const minutes = utils.range(0, 60, 5);
 const step = 360 / 60;
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Minutes',
 
@@ -47,14 +47,16 @@ export default React.createClass({
           spacing={this.props.spacing}
           radius={this.props.radius}
           twoDigits={true}
-          active={this.props.selected} />
+          active={this.props.selected}
+        />
         <Hand ref='hand'
-          className={minutes.indexOf(this.props.selected) === -1 ? 'smallKnob' : ''}
+          className={minutes.indexOf(this.props.selected) === -1 ? style.small : ''}
           angle={this.props.selected * step}
           length={this.props.radius - this.props.spacing}
           onMove={this.onHandMove}
           origin={this.props.center}
-          step={step} />
+          step={step}
+        />
       </div>
     );
   }
diff --git a/components/clock/style.scss b/components/clock/style.scss
new file mode 100644
index 00000000..76dee8e5
--- /dev/null
+++ b/components/clock/style.scss
@@ -0,0 +1,113 @@
+@import "../variables";
+
+$clock-primary: $color-primary;
+$clock-primary-contrast: $color-primary-contrast;
+$clock-primary-dark: $color-primary-dark;
+$clock-primary-color: unquote("rgb(#{$clock-primary})") !default;
+$clock-primary-hover-color: unquote("rgba(#{$clock-primary}, 0.20)") !default;
+$clock-primary-contrast-color: unquote("rgb(#{$clock-primary-contrast})") !default;
+$clock-primary-dark-color: unquote("rgb(#{$clock-primary-dark})") !default;
+$clock-number-size: 2 * $unit;
+$clock-hand-width: .4 * $unit;
+$clock-hand-dot-size: 1 * $unit;
+$clock-knob-size: 3.4 * $unit;
+$clock-knob-small-size: 1.2 * $unit;
+
+.root {
+  padding: 1.5 * $unit 2 * $unit;
+}
+
+.wrapper {
+  position: relative;
+  background-color: $color-divider;
+  border-radius: 50%;
+}
+
+.face {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: $z-index-high;
+  cursor: pointer;
+  border-radius: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.number {
+  position: relative;
+  width: $clock-number-size;
+  height: $clock-number-size;
+  margin-top: - $clock-number-size / 2;
+  margin-left: - $clock-number-size / 2;
+  text-align: center;
+  pointer-events: none;
+  user-select: none;
+
+  &.active {
+    color: $clock-primary-contrast-color;
+  }
+}
+
+.hand {
+  position: absolute;
+  bottom: 50%;
+  left: 50%;
+  display: block;
+  width: $clock-hand-width;
+  margin-left: - $clock-hand-width / 2;
+  background-color: $clock-primary-color;
+  transform-origin: 50% 100%;
+
+  &:before {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: $clock-hand-dot-size;
+    height: $clock-hand-dot-size;
+    margin-bottom: - $clock-hand-dot-size / 2;
+    margin-left: - $clock-hand-dot-size / 2;
+    content: "";
+    background-color: $clock-primary-color;
+    border-radius: 50%;
+  }
+
+  &.small > .knob {
+    background-color: $clock-primary-hover-color;
+
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: $clock-knob-small-size;
+      height: $clock-knob-small-size;
+      margin-top: - $clock-knob-small-size / 2;
+      margin-left: - $clock-knob-small-size / 2;
+      content: "";
+      background: $clock-primary-color;
+      border-radius: 50%;
+    }
+
+    &:before {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: $clock-hand-width;
+      height: $clock-knob-size - $clock-knob-small-size;
+      margin-left: - $clock-hand-width / 2;
+      content: "";
+      background: $clock-primary-color;
+    }
+  }
+}
+
+.knob {
+  position: absolute;
+  top: - $clock-knob-size;
+  left: 50%;
+  width: $clock-knob-size;
+  height: $clock-knob-size;
+  margin-left: - $clock-knob-size / 2;
+  cursor: pointer;
+  background-color: $clock-primary-color;
+  border-radius: 50%;
+}
diff --git a/components/clock/style.styl b/components/clock/style.styl
deleted file mode 100644
index c30841f9..00000000
--- a/components/clock/style.styl
+++ /dev/null
@@ -1,98 +0,0 @@
-@import '../constants'
-
-NUMBER_SIZE     = 20px
-HAND_WIDTH      = 4px
-HAND_DOT_SIZE   = 10px
-KNOB_SIZE       = 34px
-SMALL_KNOB_SIZE = 12px
-
-:local(.root)
-  padding             : 15px
-
-:local(.wrapper)
-  background-color    : DIVIDER
-  border-radius       : 50%
-  position            : relative
-
-:local(.face)
-  border-radius       : 50%
-  cursor              : pointer
-  position            : relative
-  z-index             : Z_INDEX_HIGH
-
-:local(.number)
-  height              : NUMBER_SIZE
-  margin-left         : -(NUMBER_SIZE/2)
-  margin-top          : -(NUMBER_SIZE/2)
-  pointer-events      : none
-  position            : relative
-  text-align          : center
-  user-select         : none
-  width               : NUMBER_SIZE
-
-  &.active
-    color             : WHITE
-
-:local(.face)
-  position            : absolute
-  top                 : 50%
-  left                : 50%
-  transform           : translateX(-50%) translateY(-50%)
-
-:local(.hand)
-  background-color    : ACCENT
-  bottom              : 50%
-  display             : block
-  left                : 50%
-  margin-left         : -(HAND_WIDTH/2)
-  position            : absolute
-  transform-origin    : 50% 100%
-  width               : HAND_WIDTH
-
-  &:before
-    background-color  : ACCENT
-    border-radius     : 50%
-    bottom            : 0
-    content           : ''
-    height            : HAND_DOT_SIZE
-    left              : 50%
-    margin-bottom     : -(HAND_DOT_SIZE/2)
-    margin-left       : -(HAND_DOT_SIZE/2)
-    position          : absolute
-    width             : HAND_DOT_SIZE
-
-  &.smallKnob :local(.knob)
-    background-color: lighten(ACCENT, 70%)
-
-    &:after
-      background      : ACCENT
-      border-radius   : 50%
-      content         : ''
-      height          : SMALL_KNOB_SIZE
-      left            : 50%
-      margin-left     : -(SMALL_KNOB_SIZE/2)
-      margin-top      : -(SMALL_KNOB_SIZE/2)
-      position        : absolute
-      top             : 50%
-      width           : SMALL_KNOB_SIZE
-
-    &:before
-      background      : ACCENT
-      bottom          : 0
-      content         : ''
-      height          : KNOB_SIZE - SMALL_KNOB_SIZE
-      left            : 50%
-      margin-left     : -(HAND_WIDTH/2)
-      position        : absolute
-      width           : HAND_WIDTH
-
-:local(.knob)
-  background-color    : ACCENT
-  border-radius       : 50%
-  cursor              : pointer
-  height              : KNOB_SIZE
-  left                : 50%
-  margin-left         : -(KNOB_SIZE/2)
-  position            : absolute
-  top                 : -(KNOB_SIZE)
-  width               : KNOB_SIZE
diff --git a/components/colors.scss b/components/colors.scss
new file mode 100644
index 00000000..26539ea9
--- /dev/null
+++ b/components/colors.scss
@@ -0,0 +1,163 @@
+//-- Color definitions taken from Material Design Lite
+$palette-indigo:
+"232,234,246"
+"197,202,233"
+"159,168,218"
+"121,134,203"
+"92,107,192"
+"63,81,181"
+"57,73,171"
+"48,63,159"
+"40,53,147"
+"26,35,126"
+"140,158,255"
+"83,109,254"
+"61,90,254"
+"48,79,254";
+
+$palette-indigo-50: nth($palette-indigo, 1);
+$palette-indigo-100: nth($palette-indigo, 2);
+$palette-indigo-200: nth($palette-indigo, 3);
+$palette-indigo-300: nth($palette-indigo, 4);
+$palette-indigo-400: nth($palette-indigo, 5);
+$palette-indigo-500: nth($palette-indigo, 6);
+$palette-indigo-600: nth($palette-indigo, 7);
+$palette-indigo-700: nth($palette-indigo, 8);
+$palette-indigo-800: nth($palette-indigo, 9);
+$palette-indigo-900: nth($palette-indigo, 10);
+$palette-indigo-a100: nth($palette-indigo, 11);
+$palette-indigo-a200: nth($palette-indigo, 12);
+$palette-indigo-a400: nth($palette-indigo, 13);
+$palette-indigo-a700: nth($palette-indigo, 14);
+
+$palette-pink:
+"252,228,236"
+"248,187,208"
+"244,143,177"
+"240,98,146"
+"236,64,122"
+"233,30,99"
+"216,27,96"
+"194,24,91"
+"173,20,87"
+"136,14,79"
+"255,128,171"
+"255,64,129"
+"245,0,87"
+"197,17,98";
+
+$palette-pink-50: nth($palette-pink, 1);
+$palette-pink-100: nth($palette-pink, 2);
+$palette-pink-200: nth($palette-pink, 3);
+$palette-pink-300: nth($palette-pink, 4);
+$palette-pink-400: nth($palette-pink, 5);
+$palette-pink-500: nth($palette-pink, 6);
+$palette-pink-600: nth($palette-pink, 7);
+$palette-pink-700: nth($palette-pink, 8);
+$palette-pink-800: nth($palette-pink, 9);
+$palette-pink-900: nth($palette-pink, 10);
+$palette-pink-a100: nth($palette-pink, 11);
+$palette-pink-a200: nth($palette-pink, 12);
+$palette-pink-a400: nth($palette-pink, 13);
+$palette-pink-a700: nth($palette-pink, 14);
+
+$palette-grey:
+"250,250,250"
+"245,245,245"
+"238,238,238"
+"224,224,224"
+"189,189,189"
+"158,158,158"
+"117,117,117"
+"97,97,97"
+"66,66,66"
+"33,33,33";
+
+$palette-grey-50: nth($palette-grey, 1);
+$palette-grey-100: nth($palette-grey, 2);
+$palette-grey-200: nth($palette-grey, 3);
+$palette-grey-300: nth($palette-grey, 4);
+$palette-grey-400: nth($palette-grey, 5);
+$palette-grey-500: nth($palette-grey, 6);
+$palette-grey-600: nth($palette-grey, 7);
+$palette-grey-700: nth($palette-grey, 8);
+$palette-grey-800: nth($palette-grey, 9);
+$palette-grey-900: nth($palette-grey, 10);
+
+$palette-blue:
+"227,242,253"
+"187,222,251"
+"144,202,249"
+"100,181,246"
+"66,165,245"
+"33,150,243"
+"30,136,229"
+"25,118,210"
+"21,101,192"
+"13,71,161"
+"130,177,255"
+"68,138,255"
+"41,121,255"
+"41,98,255";
+
+$palette-blue-50: nth($palette-blue, 1);
+$palette-blue-100: nth($palette-blue, 2);
+$palette-blue-200: nth($palette-blue, 3);
+$palette-blue-300: nth($palette-blue, 4);
+$palette-blue-400: nth($palette-blue, 5);
+$palette-blue-500: nth($palette-blue, 6);
+$palette-blue-600: nth($palette-blue, 7);
+$palette-blue-700: nth($palette-blue, 8);
+$palette-blue-800: nth($palette-blue, 9);
+$palette-blue-900: nth($palette-blue, 10);
+$palette-blue-a100: nth($palette-blue, 11);
+$palette-blue-a200: nth($palette-blue, 12);
+$palette-blue-a400: nth($palette-blue, 13);
+$palette-blue-a700: nth($palette-blue, 14);
+
+$palette-light-blue:
+"225,245,254"
+"179,229,252"
+"129,212,250"
+"79,195,247"
+"41,182,246"
+"3,169,244"
+"3,155,229"
+"2,136,209"
+"2,119,189"
+"1,87,155"
+"128,216,255"
+"64,196,255"
+"0,176,255"
+"0,145,234";
+
+$palette-blue-grey:
+"236,239,241"
+"207,216,220"
+"176,190,197"
+"144,164,174"
+"120,144,156"
+"96,125,139"
+"84,110,122"
+"69,90,100"
+"55,71,79"
+"38,50,56";
+
+$palette-blue-grey-50: nth($palette-blue-grey, 1);
+$palette-blue-grey-100: nth($palette-blue-grey, 2);
+$palette-blue-grey-200: nth($palette-blue-grey, 3);
+$palette-blue-grey-300: nth($palette-blue-grey, 4);
+$palette-blue-grey-400: nth($palette-blue-grey, 5);
+$palette-blue-grey-500: nth($palette-blue-grey, 6);
+$palette-blue-grey-600: nth($palette-blue-grey, 7);
+$palette-blue-grey-700: nth($palette-blue-grey, 8);
+$palette-blue-grey-800: nth($palette-blue-grey, 9);
+$palette-blue-grey-900: nth($palette-blue-grey, 10);
+
+$color-black: "0,0,0";
+$color-white: "255,255,255";
+
+//-- The two possible colors for overlayed text.
+$styleguide-generate-template: false !default;
+$color-dark-contrast: $color-white !default;
+$color-light-contrast: $color-black !default;
diff --git a/components/commons.scss b/components/commons.scss
new file mode 100644
index 00000000..c108995d
--- /dev/null
+++ b/components/commons.scss
@@ -0,0 +1,200 @@
+@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
+@import "normalize.css";
+@import "./mixins";
+
+//-- App
+html {
+  font-size: 62.5%;
+}
+
+body {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  font-family: Roboto, sans-serif;
+  font-size: 1.6rem;
+  user-select: none;
+  -webkit-touch-callout: none;
+  * {
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  }
+}
+
+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 {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small {
+  font-smoothing: antialiased;
+  text-size-adjust: 100%;
+}
+
+a {
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+input:not([type="checkbox"]):not([type="radio"]), button {
+  outline: none;
+  appearance: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+//-- App wrapper to allow overlays to block scroll
+[data-react-toolbox-app] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow-y: scroll;
+}
+
+// -- Material design font sizes
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+  @include typo-display-3($color-contrast: true);
+}
+
+h1 {
+  @include typo-display-3;
+}
+
+h2 {
+  @include typo-display-2;
+}
+
+h3 {
+  @include typo-display-1;
+}
+
+h4 {
+  @include typo-headline;
+}
+
+h5 {
+  @include typo-title;
+}
+
+h6 {
+  @include typo-subhead;
+}
+
+p {
+  @include typo-body-1;
+}
+
+//-- Flex
+[data-flex] {
+  display: flex;
+}
+
+body[data-flex] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+// -- Direction
+[data-flex^="horizontal"] {
+  flex-direction: row;
+}
+
+[data-flex^="vertical"] {
+  flex-direction: column;
+}
+
+
+// -- Size {
+[data-flex*="grow"] {
+  > *:not([data-column]):not([data-flex-grow]) {
+    flex-grow: 1;
+  }
+}
+
+[data-flex-grow="min"] {
+  flex-grow: 0;
+}
+
+[data-flex-grow="max"] {
+  flex-grow: 2;
+}
+
+// -- Container properties
+[data-flex*="wrap"] {
+  flex-wrap: wrap;
+}
+
+[data-flex*="center"] {
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+[data-flex-justify="start"] {
+  justify-content: flex-start;
+}
+
+[data-flex-justify="center"] {
+  justify-content: center;
+}
+
+[data-flex-justify="end"] {
+  justify-content: flex-end;
+}
+
+[data-flex-content="start"] {
+  align-content: flex-start;
+}
+
+[data-flex-content="center"] {
+  align-content: center;
+}
+
+[data-flex-content="end"] {
+  align-content: flex-end;
+}
+
+[data-flex-items="center"] {
+  align-items: center;
+}
+
+[data-flex-items="start"] {
+  align-items: flex-start;
+}
+
+[data-flex-items="end"] {
+  align-items: flex-end;
+}
+
+// -- Children properties
+[data-flex-order="first"] {
+  order: -1;
+}
+
+[data-flex-order="last"] {
+  order: 999999;
+}
diff --git a/components/commons.styl b/components/commons.styl
deleted file mode 100644
index b77b7a5e..00000000
--- a/components/commons.styl
+++ /dev/null
@@ -1,119 +0,0 @@
-@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,700')
-@import './vendor.styl'
-@import './normalize.styl'
-
-// -- App ----------------------------------------------------------------------
-body
-  position: absolute
-  height: 100%
-  width: 100%
-  margin: 0
-  padding: 0
-  font-family Roboto, sans-serif
-  -webkit-touch-callout: none
-  -webkit-user-select: none
-  -moz-user-select: moz-none
-  user-select: none
-  *
-    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
-
-[data-toolbox]
-  position: absolute
-  left: 0
-  top: 0
-  width: 100vw
-  height: 100vh
-  overflow-y: scroll
-
-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
-
-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
-
-// -- Data-Flex ----------------------------------------------------------------
-[data-flex]
-  display-flex()
-  body&
-    position                  : absolute
-    left                      : 0
-    top                       : 0
-    bottom                    : 0
-    width                     : 100%
-    overflow                  : hidden
-
-// -- Direction
-[data-flex^="horizontal"]
-  flex-direction row
-[data-flex^="vertical"]
-  flex-direction column
-
-// -- Size
-[data-flex*="grow"]
-  > *:not([data-column]):not([data-flex-grow])
-    flex-grow 1
-[data-flex-grow="min"]
-  flex-grow 0
-[data-flex-grow="max"]
-  flex-grow 2
-
-// -- Container properties
-[data-flex*="wrap"]
-  flex-wrap wrap
-[data-flex*="center"]
-  justify-content center
-  align-content center
-  align-items center
-[data-flex-justify="start"]
-  justify-content flex-start
-[data-flex-justify="center"]
-  justify-content center
-[data-flex-justify="end"]
-  justify-content flex-end
-[data-flex-content="start"]
-  align-content flex-start
-[data-flex-content="center"]
-  align-content center
-[data-flex-content="end"]
-  align-content flex-end
-[data-flex-items="center"]
-  align-items center
-[data-flex-items="start"]
-  align-items flex-start
-[data-flex-items="end"]
-  align-items flex-end
-
-// -- Children properties
-[data-flex-order="first"]
-  order: -1
-
-[data-flex-order="last"]
-  order: 999999
diff --git a/components/constants.styl b/components/constants.styl
deleted file mode 100644
index 5e16d289..00000000
--- a/components/constants.styl
+++ /dev/null
@@ -1,60 +0,0 @@
-@import './vendor.styl'
-
-// -- Colors
-PRIMARY                     = #E91E63
-PRIMARY_DARK                = darken(PRIMARY, 25%)
-PRIMARY_LIGHT               = lighten(PRIMARY, 25%)
-ACCENT                      = #03A9F4
-
-TEXT                        = #212121
-TEXT_ACCENT                 = #727272
-
-DIVIDER                     = lighten(#B6B6B6, 75%)
-BACKGROUND                  = #ffffff
-WHITE                       = #ffffff
-SUCCESS                     = #4CAF50
-CANCEL                      = #F44336
-WARNING                     = #FFC107
-
-// -- 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)
-INPUT_HEIGHT                = (2 * SPACE)
-BUTTON_HEIGHT               = (2.5 * SPACE)
-BUTTON_CIRCLE_HEIGHT        = (2.75 * SPACE)
-BUTTON_CIRCLE_MINI_HEIGHT   = (2 * SPACE)
-LOADING_HEIGHT              = (1.5 * UNIT)
-PROGRESS_BAR_HEIGHT         = (SPACE / 4)
-
-// -- 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)
-
-// -- Z Indexes
-Z_INDEX_HIGHER              =  200
-Z_INDEX_HIGH                =  100
-Z_INDEX_NORMAL              =  1
-Z_INDEX_LOW                 = -100
-Z_INDEX_LOWER               = -200
diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
index 91bbd25f..f1628443 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@@ -1,13 +1,12 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style';
 import time from '../utils/time';
 import Calendar from '../calendar';
 import Dialog from '../dialog';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'CalendarDialog',
 
@@ -27,8 +26,8 @@ export default React.createClass({
       date: this.props.initialDate,
       display: 'months',
       actions: [
-        { label: 'Cancel', type: 'flat accent', onClick: this.onDateCancel },
-        { label: 'Ok', type: 'flat accent', onClick: this.onDateSelected }
+        { label: 'Cancel', className: style.button, onClick: this.onDateCancel },
+        { label: 'Ok', className: style.button, onClick: this.onDateSelected }
       ]
     };
   },
@@ -59,28 +58,30 @@ export default React.createClass({
   },
 
   render () {
-    const className = `display-${this.state.display}`;
+    const display = `display-${this.state.display}`;
+    const headerClassName = `${style.header} ${style[display]}`;
+
     return (
-      <Dialog ref="dialog" className={className} type={css.dialog} actions={this.state.actions}>
-          <header className={css.header}>
-            <span className={css.headerWeekday}>
+      <Dialog ref="dialog" type="custom" className={style.dialog} actions={this.state.actions}>
+          <header className={headerClassName}>
+            <span className={style.weekday}>
               {time.getFullDayOfWeek(this.state.date.getDay())}
             </span>
             <div onClick={this.displayMonths}>
-              <span className={css.headerMonth}>{time.getShortMonth(this.state.date)}</span>
-              <span className={css.headerDay}>{this.state.date.getDate()}</span>
+              <span className={style.month}>{time.getShortMonth(this.state.date)}</span>
+              <span className={style.day}>{this.state.date.getDate()}</span>
             </div>
-            <span className={css.headerYear} onClick={this.displayYears}>
+            <span className={style.year} onClick={this.displayYears}>
               {this.state.date.getFullYear()}
             </span>
           </header>
 
-          <div className={css.calendarWrapper}>
+          <div className={style.wrapper}>
             <Calendar
               ref="calendar"
               display={this.state.display}
               onChange={this.onCalendarChange}
-              selectedDate={this.props.date} />
+              selectedDate={this.state.date} />
           </div>
       </Dialog>
     );
diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
index a0f59b5c..6a940bb7 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@@ -1,12 +1,13 @@
-/* global React */
-
-import { addons } from 'react/addons';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style';
 import time from '../utils/time';
+import events from '../utils/events';
 import CalendarDialog from './dialog';
 import Input from '../input';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'DatePicker',
 
@@ -27,7 +28,8 @@ export default React.createClass({
     };
   },
 
-  openCalendarDialog () {
+  openCalendarDialog (event) {
+    events.pauseEvent(event);
     this.refs.dialog.show();
   },
 
@@ -46,18 +48,21 @@ export default React.createClass({
 
   render () {
     return (
-      <div>
+      <div data-toolbox='date-picker'>
         <Input
-            ref="input"
-            type="text"
-            disabled={true}
-            onClick={this.openCalendarDialog}
-            placeholder="Pick up date"
-            value={this.state.value ? this.formatDate(this.state.value) : null} />
+          ref='input'
+          type='text'
+          readOnly={true}
+          className={style.input}
+          onMouseDown={this.openCalendarDialog}
+          placeholder='Pick up date'
+          value={this.state.value ? this.formatDate(this.state.value) : null}
+        />
         <CalendarDialog
-            ref="dialog"
-            initialDate={this.state.value}
-            onDateSelected={this.onDateSelected} />
+          ref='dialog'
+          initialDate={this.state.value}
+          onDateSelected={this.onDateSelected}
+        />
       </div>
     );
   }
diff --git a/components/date_picker/style.scss b/components/date_picker/style.scss
new file mode 100644
index 00000000..04f15372
--- /dev/null
+++ b/components/date_picker/style.scss
@@ -0,0 +1,88 @@
+@import "../variables";
+
+$datepicker-primary: $color-primary;
+$datepicker-primary-contrast: $color-primary-contrast;
+$datepicker-primary-dark: $color-primary-dark;
+$datepicker-primary-color: unquote("rgb(#{$datepicker-primary})") !default;
+$datepicker-primary-hover-color: unquote("rgba(#{$datepicker-primary}, 0.20)") !default;
+$datepicker-primary-contrast-color: unquote("rgb(#{$datepicker-primary-contrast})") !default;
+$datepicker-primary-dark-color: unquote("rgb(#{$datepicker-primary-dark})") !default;
+$datepicker-dialog-width: 30 * $unit;
+$datepicker-inactive-opacity: .6;
+
+.input > [role="input"] {
+  cursor: pointer;
+}
+
+.header {
+  padding-bottom: $unit;
+  color: $datepicker-primary-contrast-color;
+  text-align: center;
+  background-color: $datepicker-primary-color;
+}
+
+.weekday {
+  display: block;
+  width: 100%;
+  font-size: 1.4 * $unit;
+  line-height: 2 * $unit;
+  background-color: $datepicker-primary-dark-color;
+}
+
+.month {
+  display: block;
+  padding: $unit;
+  font-size: 1.8 * $unit;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.day {
+  display: block;
+  font-size: 5 * $unit;
+  line-height: 4 * $unit;
+  cursor: pointer;
+}
+
+.year {
+  display: inline-block;
+  margin-top: $unit;
+  font-size: 1.8 * $unit;
+  cursor: pointer;
+}
+
+.wrapper {
+  padding: $unit .5 * $unit 0;
+}
+
+.display-years {
+  .day, .month {
+    opacity: $datepicker-inactive-opacity;
+  }
+}
+
+.display-months {
+  .year {
+    opacity: $datepicker-inactive-opacity;
+  }
+}
+
+.dialog > [role="content"] {
+  width: $datepicker-dialog-width;
+
+  > [role="body"] {
+    padding: 0;
+  }
+
+  > [role="navigation"] > .button {
+    color: $datepicker-primary-color;
+
+    &:hover {
+      background: $datepicker-primary-hover-color;
+    }
+
+    &:focus:not(:active) {
+      background: $datepicker-primary-hover-color;
+    }
+  }
+}
diff --git a/components/date_picker/style.styl b/components/date_picker/style.styl
deleted file mode 100644
index 2c8598a8..00000000
--- a/components/date_picker/style.styl
+++ /dev/null
@@ -1,53 +0,0 @@
-@import '../constants'
-
-TOTAL_WIDTH         = 330px
-
-:local(.dialog)
-  padding           : 0
-  text-align        : center
-  width             : TOTAL_WIDTH
-
-  > nav
-    margin-top      : 0
-    padding-bottom  : 10px
-
-:local(.header)
-  background-color  : ACCENT
-  color             : white
-
-:local(.headerWeekday)
-  background-color  : darken(ACCENT, 20%)
-  display           : block
-  font-size         : 14px
-  line-height       : 1.8
-  width             : 100%
-
-:local(.headerMonth)
-  cursor            : pointer
-  display           : block
-  font-size         : 18px
-  padding           : 10px
-  text-transform    : uppercase
-
-:local(.headerDay)
-  cursor            : pointer
-  display           : block
-  font-size         : 50px
-  line-height       : 40px
-
-:local(.headerYear)
-  cursor            : pointer
-  display           : block
-  font-size         : 18px
-  padding           : 10px
-
-:local(.calendarWrapper)
-  padding           : 10px 5px
-
-:local(.dialog)
-  &.display-years
-    :local(.headerDay), :local(.headerMonth)
-      opacity       : .7
-
-  &.display-months :local(.headerYear)
-    opacity         : .7
diff --git a/components/dialog/index.jsx b/components/dialog/index.jsx
index c31329a0..904db032 100644
--- a/components/dialog/index.jsx
+++ b/components/dialog/index.jsx
@@ -1,9 +1,11 @@
-/* global React */
-
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import Button from '../button';
 import style from './style';
-import Navigation from '../navigation';
 
 export default React.createClass({
+  mixins: [PureRenderMixin],
+
   displayName: 'Dialog',
 
   propTypes: {
@@ -17,7 +19,7 @@ export default React.createClass({
   getDefaultProps () {
     return {
       actions: [],
-      className: 'normal'
+      type: 'normal'
     };
   },
 
@@ -25,18 +27,30 @@ export default React.createClass({
     return { active: this.props.active };
   },
 
+  renderActions () {
+    return this.props.actions.map((action, idx) => {
+      let className = style.button;
+      if (action.className) className += ` ${action.className}`;
+      return <Button key={idx} {...action} className={className} />;
+    });
+  },
+
   render () {
-    let rootClass = style.root;
-    let containerClass = `${style.container} ${this.props.className}`;
-    if (this.state.active) rootClass += ' active';
-    if (this.props.type) containerClass += ` ${this.props.type}`;
+    let className = `${style.root} ${style[this.props.type]}`;
+    if (this.state.active) className += ` ${style.active}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <div data-react-toolbox='dialog' data-flex='vertical center' className={rootClass}>
-        <div className={containerClass}>
-          { this.props.title ? <h1>{this.props.title}</h1> : null }
-          { this.props.children }
-          { this.props.actions.length > 0 ? <Navigation actions={this.props.actions}/> : null }
+      <div data-react-toolbox='dialog' className={className}>
+        <div role='overlay' className={style.overlay} />
+        <div role='content' className={style.content}>
+          <section role='body' className={style.body}>
+            { this.props.title ? <h6 className={style.title}>{this.props.title}</h6> : null }
+            { this.props.children }
+          </section>
+          <nav role='navigation' className={style.navigation}>
+            { this.renderActions() }
+          </nav>
         </div>
       </div>
     );
diff --git a/components/dialog/style.scss b/components/dialog/style.scss
new file mode 100644
index 00000000..26194205
--- /dev/null
+++ b/components/dialog/style.scss
@@ -0,0 +1,107 @@
+@import "../variables";
+@import "../mixins";
+
+$dialog-color-title: unquote("rgb(#{$color-black})") !default;
+$dialog-color-white: unquote("rgb(#{$color-white})") !default;
+$dialog-content-padding: 2.4 * $unit;
+$dialog-navigation-padding: .8 * $unit;
+$dialog-translate-y: 4 * $unit;
+
+.root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-high;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  pointer-events: none;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+
+  > .content {
+    opacity: 0;
+    transform: translateY(-$dialog-translate-y);
+  }
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $color-overlay;
+  opacity: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
+}
+
+.content {
+  display: flex;
+  max-width: 96vw;
+  max-height: 96vh;
+  flex-direction: column;
+  background-color: $dialog-color-white;
+  border-radius: $border-radius;
+  box-shadow: $zdepth-shadow-5;
+  transition-delay: $animation-delay;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity, transform;
+}
+
+.title {
+  @include typo-title();
+  margin-bottom: 1.6 * $unit;
+  color: $dialog-color-title;
+  flex-grow: 0;
+}
+
+.body {
+  padding: $dialog-content-padding;
+  overflow-y: scroll;
+  color: $color-text-secondary;
+  flex-grow: 2;
+}
+
+.navigation {
+  padding: $dialog-navigation-padding;
+  text-align: right;
+  flex-grow: 0;
+}
+
+.button {
+  min-width: 0;
+  padding-right: $dialog-navigation-padding;
+  padding-left: $dialog-navigation-padding;
+  margin-left: $dialog-navigation-padding;
+}
+
+.active {
+  pointer-events: all;
+
+  > .overlay {
+    opacity: $color-overlay-opacity;
+  }
+
+  > .content {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+.small > .content {
+  width: 30vw;
+}
+
+.normal > .content {
+  width: 50vw;
+}
+
+.large > .content {
+  width: 96vw;
+}
diff --git a/components/dialog/style.styl b/components/dialog/style.styl
deleted file mode 100644
index eb26141c..00000000
--- a/components/dialog/style.styl
+++ /dev/null
@@ -1,52 +0,0 @@
-@import '../constants'
-
-:local(.container)
-  margin                              : SPACE
-  padding                             : SPACE (SPACE * 1.5)
-  background-color                    : WHITE
-  border-radius                       : (SPACE / 5)
-  box-shadow                          : ZDEPTH_SHADOW_5
-  transition-property                 : opacity, transform
-  transition-duration                 : ANIMATION_DURATION
-  transition-timing-function          : ANIMATION_EASE
-  transition-delay                    : ANIMATION_DELAY
-  > h1
-    margin-bottom                     : SPACE
-  > nav
-    margin-top                        : SPACE
-    text-align                        : right
-    > .raised
-      margin-left                     : SPACE
-
-:local(.root)
-  z-index                             : 3
-  position                            : fixed
-  left                                : 0
-  top                                 : 0
-  width                               : 100vw
-  height                              : 100vh
-  background-color                    : rgba(0,0,0,0.5)
-  transition-property                 : opacity
-  transition-duration                 : (ANIMATION_DURATION / 2)
-  transition-timing-function          : ANIMATION_EASE
-
-  &:not(.active)
-    pointer-events                    : none
-    opacity                           : 0
-    transition-delay                  : (ANIMATION_DELAY * 2)
-    > :local(.container)
-      opacity                         : 0
-      transform                       : translateY(-(UNIT))
-  &.active
-    opacity                           : 1
-    > :local(.container)
-      opacity                         : 1
-      transform                       : translateY(0%)
-
-  // -- Overrides
-  :local(.container).small
-    width                             : 33vw
-  :local(.container).normal
-    width                             : 50vw
-  :local(.container).large
-    width                             : 96vw
diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx
index d0b91f33..a41a7c66 100644
--- a/components/drawer/index.jsx
+++ b/components/drawer/index.jsx
@@ -1,10 +1,9 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style.scss';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Drawer',
 
@@ -33,15 +32,14 @@ export default React.createClass({
   },
 
   render () {
-    let className = `${css.root} ${this.props.className}`;
-    if (this.props.type) className += ` ${this.props.type}`;
-    if (this.props.hideable) className += ' hideable';
-    if (this.state.active) className += ' active';
+    let className = `${style.drawer} ${style[this.props.type]}`;
+    if (this.state.active) className += ` ${style.active}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <div className={className}>
-        <div className={css.overlay} onClick={this.handleOverlayClick}></div>
-        <aside className={css.container}>
+      <div data-react-toolbox='drawer' className={className}>
+        <div className={style.overlay} onClick={this.handleOverlayClick}></div>
+        <aside className={style.content}>
           { this.props.children }
         </aside>
       </div>
diff --git a/components/drawer/style.scss b/components/drawer/style.scss
new file mode 100644
index 00000000..0cba6b05
--- /dev/null
+++ b/components/drawer/style.scss
@@ -0,0 +1,81 @@
+@import "../variables";
+@import "../mixins";
+
+$drawer-width: 24 * $unit;
+$drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
+$drawer-text-color: unquote("rgb(#{$palette-grey-800})") !default;
+$drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
+
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 2;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+}
+
+.active {
+  pointer-events: all;
+
+  > .content {
+    transition-delay: $animation-delay;
+    transform: translateX(0);
+  }
+
+  > .overlay {
+    opacity: $color-overlay-opacity;
+  }
+}
+
+.left {
+  > .content {
+    left: 0;
+    border-right: 1px solid $drawer-border-color;
+  }
+
+  &:not(.active) > .content {
+    transform: translateX(- $drawer-width);
+  }
+}
+
+.right {
+  > .content {
+    right: 0;
+    border-left: 1px solid $drawer-border-color;
+  }
+
+  &:not(.active) > .content {
+    transform: translateX($drawer-width);
+  }
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  background-color: $color-overlay;
+  opacity: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
+}
+
+.content {
+  @include shadow-2dp();
+  position: absolute;
+  top: 0;
+  display: block;
+  width: $drawer-width;
+  height: 100%;
+  overflow-y: scroll;
+  color: $drawer-text-color;
+  background-color: $drawer-bg-color;
+  transition-delay: 0s;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: transform;
+  transform-style: preserve-3d;
+  will-change: transform;
+}
diff --git a/components/drawer/style.styl b/components/drawer/style.styl
deleted file mode 100644
index b3daa5ec..00000000
--- a/components/drawer/style.styl
+++ /dev/null
@@ -1,60 +0,0 @@
-@import '../constants'
-
-WIDTH = (4 * UNIT)
-
-:local(.root)
-  height                          : 100vh
-  pointer-events                  : none
-  position                        : fixed
-  top                             : 0
-  left                            : 0
-  right                           : 0
-  width                           : 100vw
-  z-index                         : 2
-
-:local(.overlay)
-  background-color                : black
-  height                          : 100%
-  opacity                         : 0
-  transition-duration             : .5 * ANIMATION_DURATION
-  transition-property             : opacity
-  transition-timing-function      : ANIMATION_EASE
-  width                           : 100%
-
-:local(.container)
-  background-color                : WHITE
-  box-shadow                      : ZDEPTH_SHADOW_1
-  display                         : block
-  height                          : 100%
-  overflow-y                      : scroll
-  position                        : absolute
-  top                             : 0
-  transform-style                 : preserve-3d
-  transition-delay                : 0s
-  transition-duration             : .5 * ANIMATION_DURATION
-  transition-property             : transform
-  transition-timing-function      : ANIMATION_EASE
-  width                           : WIDTH
-  will-change                     : transform
-
-:local(.root)
-  &.left
-    > :local(.container)
-      left                        : 0
-    &:not(.active) > :local(.container)
-      transform                   : translateX(- WIDTH)
-
-  &.right
-    > :local(.container)
-      right                         : 0
-    &:not(.active) > :local(.container)
-      transform                   : translateX(WIDTH)
-
-  &.active
-    pointer-events                : all
-    > :local(.container)
-      transition-delay            : ANIMATION_DELAY
-      transform                   : translateX(0)
-
-    > :local(.overlay)
-      opacity                     : .5
diff --git a/components/dropdown/index.jsx b/components/dropdown/index.jsx
index c3ac37d5..358f4206 100644
--- a/components/dropdown/index.jsx
+++ b/components/dropdown/index.jsx
@@ -1,11 +1,23 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import style from './style';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import Ripple from '../ripple';
+import style from './style';
+
+function _selectValue (value, dataSource) {
+  let item;
+  if (value) {
+    for (item of dataSource) {
+      if (item.value.toString() === value.toString()) break;
+    }
+    return item;
+  } else {
+    return dataSource[0];
+  }
+}
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Dropdown',
 
@@ -16,7 +28,6 @@ export default React.createClass({
     label: React.PropTypes.string,
     onChange: React.PropTypes.func,
     template: React.PropTypes.func,
-    type: React.PropTypes.string,
     value: React.PropTypes.string
   },
 
@@ -24,20 +35,21 @@ export default React.createClass({
     return {
       className: '',
       dataSource: [],
-      type: 'normal'
+      up: false
     };
   },
 
   getInitialState () {
     return {
       active: false,
-      selected: _selectValue(this.props.value, this.props.dataSource)
+      selected: _selectValue(this.props.value, this.props.dataSource),
+      width: undefined
     };
   },
 
   componentDidMount () {
     this.setState({
-      height: this.refs.values.getDOMNode().firstElementChild.getBoundingClientRect().height
+      width: ReactDOM.findDOMNode(this).getBoundingClientRect().width
     });
   },
 
@@ -47,13 +59,17 @@ export default React.createClass({
     }
   },
 
-  onSelect () {
-    if (!this.props.disabled) {
-      this.setState({active: true});
-    }
+  handleClick (event) {
+    let client = event.target.getBoundingClientRect();
+    let screen_height = window.innerHeight || document.documentElement.offsetHeight;
+
+    this.setState({
+      active: true,
+      up: client.top > ((screen_height / 2) + client.height)
+    });
   },
 
-  onItem (id) {
+  handleClickValue (id) {
     if (!this.props.disabled) {
       let value = id.toString();
       for (let item of this.props.dataSource) {
@@ -68,24 +84,17 @@ export default React.createClass({
     }
   },
 
-  render () {
-    let stylesheet;
-    let className = `${style.root} ${this.props.className}`;
-    if (this.props.type) className += ` ${this.props.type}`;
-    if (this.props.disabled) className += ' disabled';
-    if (this.state.active === true) {
-      className += ' active';
-      stylesheet = { height: this.state.height * this.props.dataSource.length };
-    }
+  renderValues () {
+    let items = this.props.dataSource.map((item, index) => {
+      let className;
+      if (item.value === this.state.selected.value) className = ` ${style.selected}`;
 
-    const items = this.props.dataSource.map((item, index) => {
       return (
         <li
           key={index}
+          className={className}
           id={item.value}
-          onClick={this.onItem.bind(this, item.value)}
-          style={{position: 'relative'}}
-          className={ item.value === this.state.selected.value ? 'selected' : null}
+          onClick={this.handleClickValue.bind(this, item.value)}
         >
           { this.props.template ? this.props.template(item) : item.label }
           <Ripple className={style.ripple}/>
@@ -93,11 +102,24 @@ export default React.createClass({
       );
     });
 
+    let className = style.values;
+    if (this.state.up) className += ` ${style.up}`;
+    let valuesStyle = {width: this.state.width};
+
+    return <ul ref='values' className={className} style={valuesStyle}>{ items }</ul>;
+  },
+
+  render () {
+    let className = style.root;
+    if (this.props.className) className += ` ${this.props.className}`;
+    if (this.props.disabled) className += ` ${style.disabled}`;
+    if (this.state.active) className += ` ${style.active}`;
+
     return (
       <div data-react-toolbox='dropdown' className={className}>
-        {this.props.label ? <label>{this.props.label}</label> : null}
-        <ul ref='values' className={style.values} style={stylesheet}>{ items }</ul>
-        <div ref='value' className={style.value} onClick={this.onSelect}>
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
+        { this.renderValues() }
+        <div ref='value' className={style.value} onClick={this.handleClick}>
           { this.props.template ? this.props.template(this.state.selected) : <span>{this.state.selected.label}</span> }
         </div>
       </div>
@@ -112,15 +134,3 @@ export default React.createClass({
     this.setState({selected: data});
   }
 });
-
-function _selectValue (value, dataSource) {
-  let item;
-  if (value) {
-    for (item of dataSource) {
-      if (item.value.toString() === value.toString()) break;
-    }
-    return item;
-  } else {
-    return dataSource[0];
-  }
-}
diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
new file mode 100644
index 00000000..2091e306
--- /dev/null
+++ b/components/dropdown/style.scss
@@ -0,0 +1,111 @@
+@import "../variables";
+@import "../mixins";
+$dropdown-color-white: unquote("rgb(#{$color-white})");
+$dropdown-color-primary: unquote("rgb(#{$color-primary})");
+$dropdown-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
+$dropdown-value-hover-background: unquote("rgb(#{$palette-grey-200})");
+
+.root {
+  position: relative;
+  width: inherit;
+  margin-bottom: $offset;
+  color: $color-text;
+  border-bottom: 1px solid $color-divider;
+  &:not(.active) {
+    > .values {
+      max-height: 0;
+      visibility: hidden;
+    }
+  }
+  &.active {
+    > .label, > .value {
+      opacity: .5;
+    }
+    > .values {
+      max-height: $items-overflow-max-height;
+      visibility: visible;
+      box-shadow: $zdepth-shadow-1;
+    }
+  }
+  &.disabled {
+    color: $color-text-secondary;
+    pointer-events: none;
+    border-bottom-style: dotted;
+    > .value:after {
+      transform: scale(0);
+    }
+  }
+}
+
+.label, .value {
+  transition: opacity $animation-duration $animation-curve-default;
+}
+
+.label {
+  font-size: $font-size-tiny;
+  color: $color-text-secondary;
+}
+
+.values {
+  position: absolute;
+  z-index: 2;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  list-style: none;
+  background-color: $dropdown-color-white;
+  border-radius: $border-radius;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: max-height, box-shadow;
+  > * {
+    position: relative;
+    padding: $unit;
+    overflow: hidden;
+    cursor: pointer;
+    &:hover {
+      background-color: $dropdown-value-hover-background;
+    }
+    &.selected {
+      color: $dropdown-color-primary;
+    }
+  }
+  &:not(.up) {
+    top: 0;
+    bottom: auto;
+  }
+  &.up {
+    top: auto;
+    bottom: 0;
+  }
+}
+
+.value {
+  display: block;
+  > span {
+    height: $input-height;
+    font-size: $font-size-normal;
+    line-height: $input-height;
+  }
+  > :not(span) {
+    margin: ($offset / 2) 0;
+  }
+  &:after {
+    $size: ($input-height / 7);
+    $border: $size solid transparent;
+    position: absolute;
+    right: ($offset / 2);
+    bottom: $offset;
+    width: 0;
+    height: 0;
+    content: "";
+    border-top: $size solid $color-divider;
+    border-right: $border;
+    border-left: $border;
+    transition: transform $animation-duration $animation-curve-default;
+  }
+}
+
+.ripple {
+  z-index: 0;
+  background-color: $color-divider;
+}
diff --git a/components/dropdown/style.styl b/components/dropdown/style.styl
deleted file mode 100644
index 140a0890..00000000
--- a/components/dropdown/style.styl
+++ /dev/null
@@ -1,100 +0,0 @@
-@import '../constants'
-
-:local(.values)
-  z-index                         : 2
-  position                        : absolute
-  top                             : 0
-  left                            : -(OFFSET = (SPACE / 1.25))
-  right                           : -(OFFSET)
-  width                           : auto
-  height                          : 0
-  max-height                      : 50vh
-  list-style                      : none
-  opacity                         : 0
-  overflow                        : hidden
-  background-color                : WHITE
-  border-radius                   : BORDER_RADIUS
-  transform                       : translateY(-(INPUT_HEIGHT / 2))
-  transition-property             : height, box-shadow, opacity, transform
-  transition-duration             : ANIMATION_DURATION
-  transition-timing-function      : ANIMATION_EASE
-  > li
-    position                      : relative
-    padding                       : (SPACE / 2) OFFSET
-    opacity                       : 0
-    overflow                      : hidden
-    cursor                        : pointer
-    &.selected
-      color                       : PRIMARY
-
-:local(.value)
-  display                         : block
-  > span
-    height                        : INPUT_HEIGHT
-    font-size                     : FONT_SIZE_NORMAL
-    line-height                   : INPUT_HEIGHT
-  > :not(span)
-    margin                        : (SPACE / 2) 0
-  &:after
-    SIZE = (INPUT_HEIGHT / 7)
-    position                      : absolute
-    content                       : ""
-    right                         : (SPACE / 2)
-    bottom                        : SPACE
-    width                         : 0
-    height                        : 0
-    border-left                   : BORDER = SIZE solid transparent
-    border-right                  : BORDER
-    border-top                    : SIZE solid DIVIDER
-    transition                    : transform ANIMATION_DURATION ANIMATION_EASE
-
-:local(.root)
-  position                        : relative
-  margin-bottom                   : SPACE
-  width                           : inherit
-  color                           : TEXT
-  border-bottom                   : 1px solid DIVIDER
-
-  // -- Overrides
-  &.active
-    > label, > div
-      opacity                     : 0
-      transform                   : translateY((INPUT_HEIGHT / 4))
-    > div:after
-        transform                 : scale(0)
-    > ul
-      opacity                     : 1
-      transform                   : translateY(0%)
-      box-shadow                  : ZDEPTH_SHADOW_1
-      > li
-        opacity                   : 1
-        transition                : opacity ANIMATION_DURATION ANIMATION_EASE
-  &:not(.active)
-    > *, > * > li
-      transition-delay            : ANIMATION_DURATION
-
-  &.disabled
-    color                         : TEXT_SECONDARY
-    border-bottom-style           : dotted
-    > div:after
-      transform                   : scale(0)
-
-  // -- Children
-  > *
-    width                         : 100%
-  > label, > div
-    transition-property           : opacity, transform
-    transition-duration           : ANIMATION_DURATION
-    transition-timing-function    : ANIMATION_EASE
-  > label + ul
-    top                           : SPACE
-  > label
-    position                      : relative
-    bottom                        : -(SPACE / 4)
-    font-size                     : FONT_SIZE_TINY
-    color                         : TEXT_SECONDARY
-
-:local(.ripple)
-  background-color                : DIVIDER
-  opacity                         : 1
-  z-index                         : Z_INDEX_LOW
diff --git a/components/font_icon/font_icon.md b/components/font_icon/font_icon.md
index 84d45c27..168c1892 100644
--- a/components/font_icon/font_icon.md
+++ b/components/font_icon/font_icon.md
@@ -10,4 +10,4 @@ var FontIcon  = require('react-toolbox/components/font_icon');
 
 | Name              | Type          | Default         | Description|
 |:-                 |:-:            | :-              |:-|
-| **value**         | String        |                 | The keyString for the icon you want representate.|
+| **value**         | String        |                 | The keyString for the icon you want be displayed.|
diff --git a/components/font_icon/index.jsx b/components/font_icon/index.jsx
index 1074557a..1f45a2e4 100644
--- a/components/font_icon/index.jsx
+++ b/components/font_icon/index.jsx
@@ -1,10 +1,9 @@
-/* global React */
-
-import { addons } from 'react/addons';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import style from './style';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'FontIcon',
 
@@ -19,19 +18,13 @@ export default React.createClass({
     };
   },
 
-  onClick (event) {
-    if (this.props.onClick) {
-      this.props.onClick(event);
-    }
-  },
-
   render () {
+    let className = style[this.props.value];
+    if (this.props.className) className += ` ${this.props.className}`;
     return (
-      <span
-        data-react-toolbox='icon'
-        className={`${style.root} ${this.props.className} ${this.props.value}`}
-        onClick={this.props.onClick}
-      />
+      <span data-react-toolbox='icon' {...this.props} className={className}>
+        {this.props.children}
+      </span>
     );
   }
 });
diff --git a/components/font_icon/style.scss b/components/font_icon/style.scss
new file mode 100644
index 00000000..184bd609
--- /dev/null
+++ b/components/font_icon/style.scss
@@ -0,0 +1,6378 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
+%icon {
+  display: inline-block;
+  font-family: "Material Icons";
+  font-size: inherit;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  transform: translate(0, 0);
+  text-rendering: auto;
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.threed-rotation {
+  @extend %icon;
+
+  &::before {
+    content: "\e84d";
+  }
+}
+
+.access-alarm {
+  @extend %icon;
+
+  &::before {
+    content: "\e190";
+  }
+}
+
+.access-alarms {
+  @extend %icon;
+
+  &::before {
+    content: "\e191";
+  }
+}
+
+.access-time {
+  @extend %icon;
+
+  &::before {
+    content: "\e192";
+  }
+}
+
+.accessibility {
+  @extend %icon;
+
+  &::before {
+    content: "\e84e";
+  }
+}
+
+.account-balance {
+  @extend %icon;
+
+  &::before {
+    content: "\e84f";
+  }
+}
+
+.account-balance-wallet {
+  @extend %icon;
+
+  &::before {
+    content: "\e850";
+  }
+}
+
+.account-box {
+  @extend %icon;
+
+  &::before {
+    content: "\e851";
+  }
+}
+
+.account-circle {
+  @extend %icon;
+
+  &::before {
+    content: "\e853";
+  }
+}
+
+.adb {
+  @extend %icon;
+
+  &::before {
+    content: "\e60e";
+  }
+}
+
+.add {
+  @extend %icon;
+
+  &::before {
+    content: "\e145";
+  }
+}
+
+.add-alarm {
+  @extend %icon;
+
+  &::before {
+    content: "\e193";
+  }
+}
+
+.add-alert {
+  @extend %icon;
+
+  &::before {
+    content: "\e003";
+  }
+}
+
+.add-box {
+  @extend %icon;
+
+  &::before {
+    content: "\e146";
+  }
+}
+
+.add-circle {
+  @extend %icon;
+
+  &::before {
+    content: "\e147";
+  }
+}
+
+.add-circle-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e148";
+  }
+}
+
+.add-shopping-cart {
+  @extend %icon;
+
+  &::before {
+    content: "\e854";
+  }
+}
+
+.add-to-photos {
+  @extend %icon;
+
+  &::before {
+    content: "\e39d";
+  }
+}
+
+.adjust {
+  @extend %icon;
+
+  &::before {
+    content: "\e39e";
+  }
+}
+
+.airline-seat-flat {
+  @extend %icon;
+
+  &::before {
+    content: "\e630";
+  }
+}
+
+.airline-seat-flat-angled {
+  @extend %icon;
+
+  &::before {
+    content: "\e631";
+  }
+}
+
+.airline-seat-individual-suite {
+  @extend %icon;
+
+  &::before {
+    content: "\e632";
+  }
+}
+
+.airline-seat-legroom-extra {
+  @extend %icon;
+
+  &::before {
+    content: "\e633";
+  }
+}
+
+.airline-seat-legroom-normal {
+  @extend %icon;
+
+  &::before {
+    content: "\e634";
+  }
+}
+
+.airline-seat-legroom-reduced {
+  @extend %icon;
+
+  &::before {
+    content: "\e635";
+  }
+}
+
+.airline-seat-recline-extra {
+  @extend %icon;
+
+  &::before {
+    content: "\e636";
+  }
+}
+
+.airline-seat-recline-normal {
+  @extend %icon;
+
+  &::before {
+    content: "\e637";
+  }
+}
+
+.airplanemode-active {
+  @extend %icon;
+
+  &::before {
+    content: "\e195";
+  }
+}
+
+.airplanemode-inactive {
+  @extend %icon;
+
+  &::before {
+    content: "\e194";
+  }
+}
+
+.airplay {
+  @extend %icon;
+
+  &::before {
+    content: "\e055";
+  }
+}
+
+.alarm {
+  @extend %icon;
+
+  &::before {
+    content: "\e855";
+  }
+}
+
+.alarm-add {
+  @extend %icon;
+
+  &::before {
+    content: "\e856";
+  }
+}
+
+.alarm-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e857";
+  }
+}
+
+.alarm-on {
+  @extend %icon;
+
+  &::before {
+    content: "\e858";
+  }
+}
+
+.album {
+  @extend %icon;
+
+  &::before {
+    content: "\e019";
+  }
+}
+
+.android {
+  @extend %icon;
+
+  &::before {
+    content: "\e859";
+  }
+}
+
+.announcement {
+  @extend %icon;
+
+  &::before {
+    content: "\e85a";
+  }
+}
+
+.apps {
+  @extend %icon;
+
+  &::before {
+    content: "\e5c3";
+  }
+}
+
+.archive {
+  @extend %icon;
+
+  &::before {
+    content: "\e149";
+  }
+}
+
+.arrow-back {
+  @extend %icon;
+
+  &::before {
+    content: "\e5c4";
+  }
+}
+
+.arrow-drop-down {
+  @extend %icon;
+
+  &::before {
+    content: "\e5c5";
+  }
+}
+
+.arrow-drop-down-circle {
+  @extend %icon;
+
+  &::before {
+    content: "\e5c6";
+  }
+}
+
+.arrow-drop-up {
+  @extend %icon;
+
+  &::before {
+    content: "\e5c7";
+  }
+}
+
+.arrow-forward {
+  @extend %icon;
+
+  &::before {
+    content: "\e5c8";
+  }
+}
+
+.aspect-ratio {
+  @extend %icon;
+
+  &::before {
+    content: "\e85b";
+  }
+}
+
+.assessment {
+  @extend %icon;
+
+  &::before {
+    content: "\e85c";
+  }
+}
+
+.assignment {
+  @extend %icon;
+
+  &::before {
+    content: "\e85d";
+  }
+}
+
+.assignment-ind {
+  @extend %icon;
+
+  &::before {
+    content: "\e85e";
+  }
+}
+
+.assignment-late {
+  @extend %icon;
+
+  &::before {
+    content: "\e85f";
+  }
+}
+
+.assignment-return {
+  @extend %icon;
+
+  &::before {
+    content: "\e860";
+  }
+}
+
+.assignment-returned {
+  @extend %icon;
+
+  &::before {
+    content: "\e861";
+  }
+}
+
+.assignment-turned-in {
+  @extend %icon;
+
+  &::before {
+    content: "\e862";
+  }
+}
+
+.assistant {
+  @extend %icon;
+
+  &::before {
+    content: "\e39f";
+  }
+}
+
+.assistant-photo {
+  @extend %icon;
+
+  &::before {
+    content: "\e3a0";
+  }
+}
+
+.attach-file {
+  @extend %icon;
+
+  &::before {
+    content: "\e226";
+  }
+}
+
+.attach-money {
+  @extend %icon;
+
+  &::before {
+    content: "\e227";
+  }
+}
+
+.attachment {
+  @extend %icon;
+
+  &::before {
+    content: "\e2bc";
+  }
+}
+
+.audiotrack {
+  @extend %icon;
+
+  &::before {
+    content: "\e3a1";
+  }
+}
+
+.autorenew {
+  @extend %icon;
+
+  &::before {
+    content: "\e863";
+  }
+}
+
+.av-timer {
+  @extend %icon;
+
+  &::before {
+    content: "\e01b";
+  }
+}
+
+.backspace {
+  @extend %icon;
+
+  &::before {
+    content: "\e14a";
+  }
+}
+
+.backup {
+  @extend %icon;
+
+  &::before {
+    content: "\e864";
+  }
+}
+
+.battery-alert {
+  @extend %icon;
+
+  &::before {
+    content: "\e19c";
+  }
+}
+
+.battery-charging-full {
+  @extend %icon;
+
+  &::before {
+    content: "\e1a3";
+  }
+}
+
+.battery-full {
+  @extend %icon;
+
+  &::before {
+    content: "\e1a4";
+  }
+}
+
+.battery-std {
+  @extend %icon;
+
+  &::before {
+    content: "\e1a5";
+  }
+}
+
+.battery-unknown {
+  @extend %icon;
+
+  &::before {
+    content: "\e1a6";
+  }
+}
+
+.beenhere {
+  @extend %icon;
+
+  &::before {
+    content: "\e52d";
+  }
+}
+
+.block {
+  @extend %icon;
+
+  &::before {
+    content: "\e14b";
+  }
+}
+
+.bluetooth {
+  @extend %icon;
+
+  &::before {
+    content: "\e1a7";
+  }
+}
+
+.bluetooth-audio {
+  @extend %icon;
+
+  &::before {
+    content: "\e60f";
+  }
+}
+
+.bluetooth-connected {
+  @extend %icon;
+
+  &::before {
+    content: "\e1a8";
+  }
+}
+
+.bluetooth-disabled {
+  @extend %icon;
+
+  &::before {
+    content: "\e1a9";
+  }
+}
+
+.bluetooth-searching {
+  @extend %icon;
+
+  &::before {
+    content: "\e1aa";
+  }
+}
+
+.blur-circular {
+  @extend %icon;
+
+  &::before {
+    content: "\e3a2";
+  }
+}
+
+.blur-linear {
+  @extend %icon;
+
+  &::before {
+    content: "\e3a3";
+  }
+}
+
+.blur-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e3a4";
+  }
+}
+
+.blur-on {
+  @extend %icon;
+
+  &::before {
+    content: "\e3a5";
+  }
+}
+
+.book {
+  @extend %icon;
+
+  &::before {
+    content: "\e865";
+  }
+}
+
+.bookmark {
+  @extend %icon;
+
+  &::before {
+    content: "\e866";
+  }
+}
+
+.bookmark-border {
+  @extend %icon;
+
+  &::before {
+    content: "\e867";
+  }
+}
+
+.border-all {
+  @extend %icon;
+
+  &::before {
+    content: "\e228";
+  }
+}
+
+.border-bottom {
+  @extend %icon;
+
+  &::before {
+    content: "\e229";
+  }
+}
+
+.border-clear {
+  @extend %icon;
+
+  &::before {
+    content: "\e22a";
+  }
+}
+
+.border-color {
+  @extend %icon;
+
+  &::before {
+    content: "\e22b";
+  }
+}
+
+.border-horizontal {
+  @extend %icon;
+
+  &::before {
+    content: "\e22c";
+  }
+}
+
+.border-inner {
+  @extend %icon;
+
+  &::before {
+    content: "\e22d";
+  }
+}
+
+.border-left {
+  @extend %icon;
+
+  &::before {
+    content: "\e22e";
+  }
+}
+
+.border-outer {
+  @extend %icon;
+
+  &::before {
+    content: "\e22f";
+  }
+}
+
+.border-right {
+  @extend %icon;
+
+  &::before {
+    content: "\e230";
+  }
+}
+
+.border-style {
+  @extend %icon;
+
+  &::before {
+    content: "\e231";
+  }
+}
+
+.border-top {
+  @extend %icon;
+
+  &::before {
+    content: "\e232";
+  }
+}
+
+.border-vertical {
+  @extend %icon;
+
+  &::before {
+    content: "\e233";
+  }
+}
+
+.brightness-1 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3a6";
+  }
+}
+
+.brightness-2 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3a7";
+  }
+}
+
+.brightness-3 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3a8";
+  }
+}
+
+.brightness-4 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3a9";
+  }
+}
+
+.brightness-5 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3aa";
+  }
+}
+
+.brightness-6 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ab";
+  }
+}
+
+.brightness-7 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ac";
+  }
+}
+
+.brightness-auto {
+  @extend %icon;
+
+  &::before {
+    content: "\e1ab";
+  }
+}
+
+.brightness-high {
+  @extend %icon;
+
+  &::before {
+    content: "\e1ac";
+  }
+}
+
+.brightness-low {
+  @extend %icon;
+
+  &::before {
+    content: "\e1ad";
+  }
+}
+
+.brightness-medium {
+  @extend %icon;
+
+  &::before {
+    content: "\e1ae";
+  }
+}
+
+.broken-image {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ad";
+  }
+}
+
+.brush {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ae";
+  }
+}
+
+.bug-report {
+  @extend %icon;
+
+  &::before {
+    content: "\e868";
+  }
+}
+
+.build {
+  @extend %icon;
+
+  &::before {
+    content: "\e869";
+  }
+}
+
+.business {
+  @extend %icon;
+
+  &::before {
+    content: "\e0af";
+  }
+}
+
+.cached {
+  @extend %icon;
+
+  &::before {
+    content: "\e86a";
+  }
+}
+
+.cake {
+  @extend %icon;
+
+  &::before {
+    content: "\e7e9";
+  }
+}
+
+.call {
+  @extend %icon;
+
+  &::before {
+    content: "\e0b0";
+  }
+}
+
+.call-end {
+  @extend %icon;
+
+  &::before {
+    content: "\e0b1";
+  }
+}
+
+.call-made {
+  @extend %icon;
+
+  &::before {
+    content: "\e0b2";
+  }
+}
+
+.call-merge {
+  @extend %icon;
+
+  &::before {
+    content: "\e0b3";
+  }
+}
+
+.call-missed {
+  @extend %icon;
+
+  &::before {
+    content: "\e0b4";
+  }
+}
+
+.call-received {
+  @extend %icon;
+
+  &::before {
+    content: "\e0b5";
+  }
+}
+
+.call-split {
+  @extend %icon;
+
+  &::before {
+    content: "\e0b6";
+  }
+}
+
+.camera {
+  @extend %icon;
+
+  &::before {
+    content: "\e3af";
+  }
+}
+
+.camera-alt {
+  @extend %icon;
+
+  &::before {
+    content: "\e3b0";
+  }
+}
+
+.camera-enhance {
+  @extend %icon;
+
+  &::before {
+    content: "\e8fc";
+  }
+}
+
+.camera-front {
+  @extend %icon;
+
+  &::before {
+    content: "\e3b1";
+  }
+}
+
+.camera-rear {
+  @extend %icon;
+
+  &::before {
+    content: "\e3b2";
+  }
+}
+
+.camera-roll {
+  @extend %icon;
+
+  &::before {
+    content: "\e3b3";
+  }
+}
+
+.cancel {
+  @extend %icon;
+
+  &::before {
+    content: "\e5c9";
+  }
+}
+
+.card-giftcard {
+  @extend %icon;
+
+  &::before {
+    content: "\e8f6";
+  }
+}
+
+.card-membership {
+  @extend %icon;
+
+  &::before {
+    content: "\e8f7";
+  }
+}
+
+.card-travel {
+  @extend %icon;
+
+  &::before {
+    content: "\e8f8";
+  }
+}
+
+.cast {
+  @extend %icon;
+
+  &::before {
+    content: "\e307";
+  }
+}
+
+.cast-connected {
+  @extend %icon;
+
+  &::before {
+    content: "\e308";
+  }
+}
+
+.center-focus-strong {
+  @extend %icon;
+
+  &::before {
+    content: "\e3b4";
+  }
+}
+
+.center-focus-weak {
+  @extend %icon;
+
+  &::before {
+    content: "\e3b5";
+  }
+}
+
+.change-history {
+  @extend %icon;
+
+  &::before {
+    content: "\e86b";
+  }
+}
+
+.chat {
+  @extend %icon;
+
+  &::before {
+    content: "\e0b7";
+  }
+}
+
+.chat-bubble {
+  @extend %icon;
+
+  &::before {
+    content: "\e0ca";
+  }
+}
+
+.chat-bubble-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e0cb";
+  }
+}
+
+.check {
+  @extend %icon;
+
+  &::before {
+    content: "\e5ca";
+  }
+}
+
+.check-box {
+  @extend %icon;
+
+  &::before {
+    content: "\e834";
+  }
+}
+
+.check-box-outline-blank {
+  @extend %icon;
+
+  &::before {
+    content: "\e835";
+  }
+}
+
+.check-circle {
+  @extend %icon;
+
+  &::before {
+    content: "\e86c";
+  }
+}
+
+.chevron-left {
+  @extend %icon;
+
+  &::before {
+    content: "\e5cb";
+  }
+}
+
+.chevron-right {
+  @extend %icon;
+
+  &::before {
+    content: "\e5cc";
+  }
+}
+
+.chrome-reader-mode {
+  @extend %icon;
+
+  &::before {
+    content: "\e86d";
+  }
+}
+
+.class {
+  @extend %icon;
+
+  &::before {
+    content: "\e86e";
+  }
+}
+
+.clear {
+  @extend %icon;
+
+  &::before {
+    content: "\e14c";
+  }
+}
+
+.clear-all {
+  @extend %icon;
+
+  &::before {
+    content: "\e0b8";
+  }
+}
+
+.close {
+  @extend %icon;
+
+  &::before {
+    content: "\e5cd";
+  }
+}
+
+.closed-caption {
+  @extend %icon;
+
+  &::before {
+    content: "\e01c";
+  }
+}
+
+.cloud {
+  @extend %icon;
+
+  &::before {
+    content: "\e2bd";
+  }
+}
+
+.cloud-circle {
+  @extend %icon;
+
+  &::before {
+    content: "\e2be";
+  }
+}
+
+.cloud-done {
+  @extend %icon;
+
+  &::before {
+    content: "\e2bf";
+  }
+}
+
+.cloud-download {
+  @extend %icon;
+
+  &::before {
+    content: "\e2c0";
+  }
+}
+
+.cloud-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e2c1";
+  }
+}
+
+.cloud-queue {
+  @extend %icon;
+
+  &::before {
+    content: "\e2c2";
+  }
+}
+
+.cloud-upload {
+  @extend %icon;
+
+  &::before {
+    content: "\e2c3";
+  }
+}
+
+.code {
+  @extend %icon;
+
+  &::before {
+    content: "\e86f";
+  }
+}
+
+.collections {
+  @extend %icon;
+
+  &::before {
+    content: "\e3b6";
+  }
+}
+
+.collections-bookmark {
+  @extend %icon;
+
+  &::before {
+    content: "\e431";
+  }
+}
+
+.color-lens {
+  @extend %icon;
+
+  &::before {
+    content: "\e3b7";
+  }
+}
+
+.colorize {
+  @extend %icon;
+
+  &::before {
+    content: "\e3b8";
+  }
+}
+
+.comment {
+  @extend %icon;
+
+  &::before {
+    content: "\e0b9";
+  }
+}
+
+.compare {
+  @extend %icon;
+
+  &::before {
+    content: "\e3b9";
+  }
+}
+
+.computer {
+  @extend %icon;
+
+  &::before {
+    content: "\e30a";
+  }
+}
+
+.confirmation-number {
+  @extend %icon;
+
+  &::before {
+    content: "\e638";
+  }
+}
+
+.contact-phone {
+  @extend %icon;
+
+  &::before {
+    content: "\e0cf";
+  }
+}
+
+.contacts {
+  @extend %icon;
+
+  &::before {
+    content: "\e0ba";
+  }
+}
+
+.content-copy {
+  @extend %icon;
+
+  &::before {
+    content: "\e14d";
+  }
+}
+
+.content-cut {
+  @extend %icon;
+
+  &::before {
+    content: "\e14e";
+  }
+}
+
+.content-paste {
+  @extend %icon;
+
+  &::before {
+    content: "\e14f";
+  }
+}
+
+.control-point {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ba";
+  }
+}
+
+.control-point-duplicate {
+  @extend %icon;
+
+  &::before {
+    content: "\e3bb";
+  }
+}
+
+.create {
+  @extend %icon;
+
+  &::before {
+    content: "\e150";
+  }
+}
+
+.credit-card {
+  @extend %icon;
+
+  &::before {
+    content: "\e870";
+  }
+}
+
+.crop {
+  @extend %icon;
+
+  &::before {
+    content: "\e3be";
+  }
+}
+
+.crop-16-9 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3bc";
+  }
+}
+
+.crop-3-2 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3bd";
+  }
+}
+
+.crop-5-4 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3bf";
+  }
+}
+
+.crop-7-5 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3c0";
+  }
+}
+
+.crop-din {
+  @extend %icon;
+
+  &::before {
+    content: "\e3c1";
+  }
+}
+
+.crop-free {
+  @extend %icon;
+
+  &::before {
+    content: "\e3c2";
+  }
+}
+
+.crop-landscape {
+  @extend %icon;
+
+  &::before {
+    content: "\e3c3";
+  }
+}
+
+.crop-original {
+  @extend %icon;
+
+  &::before {
+    content: "\e3c4";
+  }
+}
+
+.crop-portrait {
+  @extend %icon;
+
+  &::before {
+    content: "\e3c5";
+  }
+}
+
+.crop-square {
+  @extend %icon;
+
+  &::before {
+    content: "\e3c6";
+  }
+}
+
+.dashboard {
+  @extend %icon;
+
+  &::before {
+    content: "\e871";
+  }
+}
+
+.data-usage {
+  @extend %icon;
+
+  &::before {
+    content: "\e1af";
+  }
+}
+
+.dehaze {
+  @extend %icon;
+
+  &::before {
+    content: "\e3c7";
+  }
+}
+
+.delete {
+  @extend %icon;
+
+  &::before {
+    content: "\e872";
+  }
+}
+
+.description {
+  @extend %icon;
+
+  &::before {
+    content: "\e873";
+  }
+}
+
+.desktop-mac {
+  @extend %icon;
+
+  &::before {
+    content: "\e30b";
+  }
+}
+
+.desktop-windows {
+  @extend %icon;
+
+  &::before {
+    content: "\e30c";
+  }
+}
+
+.details {
+  @extend %icon;
+
+  &::before {
+    content: "\e3c8";
+  }
+}
+
+.developer-board {
+  @extend %icon;
+
+  &::before {
+    content: "\e30d";
+  }
+}
+
+.developer-mode {
+  @extend %icon;
+
+  &::before {
+    content: "\e1b0";
+  }
+}
+
+.device-hub {
+  @extend %icon;
+
+  &::before {
+    content: "\e335";
+  }
+}
+
+.devices {
+  @extend %icon;
+
+  &::before {
+    content: "\e1b1";
+  }
+}
+
+.dialer-sip {
+  @extend %icon;
+
+  &::before {
+    content: "\e0bb";
+  }
+}
+
+.dialpad {
+  @extend %icon;
+
+  &::before {
+    content: "\e0bc";
+  }
+}
+
+.directions {
+  @extend %icon;
+
+  &::before {
+    content: "\e52e";
+  }
+}
+
+.directions-bike {
+  @extend %icon;
+
+  &::before {
+    content: "\e52f";
+  }
+}
+
+.directions-boat {
+  @extend %icon;
+
+  &::before {
+    content: "\e532";
+  }
+}
+
+.directions-bus {
+  @extend %icon;
+
+  &::before {
+    content: "\e530";
+  }
+}
+
+.directions-car {
+  @extend %icon;
+
+  &::before {
+    content: "\e531";
+  }
+}
+
+.directions-railway {
+  @extend %icon;
+
+  &::before {
+    content: "\e534";
+  }
+}
+
+.directions-run {
+  @extend %icon;
+
+  &::before {
+    content: "\e566";
+  }
+}
+
+.directions-subway {
+  @extend %icon;
+
+  &::before {
+    content: "\e533";
+  }
+}
+
+.directions-transit {
+  @extend %icon;
+
+  &::before {
+    content: "\e535";
+  }
+}
+
+.directions-walk {
+  @extend %icon;
+
+  &::before {
+    content: "\e536";
+  }
+}
+
+.disc-full {
+  @extend %icon;
+
+  &::before {
+    content: "\e610";
+  }
+}
+
+.dns {
+  @extend %icon;
+
+  &::before {
+    content: "\e875";
+  }
+}
+
+.do-not-disturb {
+  @extend %icon;
+
+  &::before {
+    content: "\e612";
+  }
+}
+
+.do-not-disturb-alt {
+  @extend %icon;
+
+  &::before {
+    content: "\e611";
+  }
+}
+
+.dock {
+  @extend %icon;
+
+  &::before {
+    content: "\e30e";
+  }
+}
+
+.domain {
+  @extend %icon;
+
+  &::before {
+    content: "\e7ee";
+  }
+}
+
+.done {
+  @extend %icon;
+
+  &::before {
+    content: "\e876";
+  }
+}
+
+.done-all {
+  @extend %icon;
+
+  &::before {
+    content: "\e877";
+  }
+}
+
+.drafts {
+  @extend %icon;
+
+  &::before {
+    content: "\e151";
+  }
+}
+
+.drive-eta {
+  @extend %icon;
+
+  &::before {
+    content: "\e613";
+  }
+}
+
+.dvr {
+  @extend %icon;
+
+  &::before {
+    content: "\e1b2";
+  }
+}
+
+.edit {
+  @extend %icon;
+
+  &::before {
+    content: "\e3c9";
+  }
+}
+
+.eject {
+  @extend %icon;
+
+  &::before {
+    content: "\e8fb";
+  }
+}
+
+.email {
+  @extend %icon;
+
+  &::before {
+    content: "\e0be";
+  }
+}
+
+.equalizer {
+  @extend %icon;
+
+  &::before {
+    content: "\e01d";
+  }
+}
+
+.error {
+  @extend %icon;
+
+  &::before {
+    content: "\e000";
+  }
+}
+
+.error-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e001";
+  }
+}
+
+.event {
+  @extend %icon;
+
+  &::before {
+    content: "\e878";
+  }
+}
+
+.event-available {
+  @extend %icon;
+
+  &::before {
+    content: "\e614";
+  }
+}
+
+.event-busy {
+  @extend %icon;
+
+  &::before {
+    content: "\e615";
+  }
+}
+
+.event-note {
+  @extend %icon;
+
+  &::before {
+    content: "\e616";
+  }
+}
+
+.event-seat {
+  @extend %icon;
+
+  &::before {
+    content: "\e903";
+  }
+}
+
+.exit-to-app {
+  @extend %icon;
+
+  &::before {
+    content: "\e879";
+  }
+}
+
+.expand-less {
+  @extend %icon;
+
+  &::before {
+    content: "\e5ce";
+  }
+}
+
+.expand-more {
+  @extend %icon;
+
+  &::before {
+    content: "\e5cf";
+  }
+}
+
+.explicit {
+  @extend %icon;
+
+  &::before {
+    content: "\e01e";
+  }
+}
+
+.explore {
+  @extend %icon;
+
+  &::before {
+    content: "\e87a";
+  }
+}
+
+.exposure {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ca";
+  }
+}
+
+.exposure-neg-1 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3cb";
+  }
+}
+
+.exposure-neg-2 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3cc";
+  }
+}
+
+.exposure-plus-1 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3cd";
+  }
+}
+
+.exposure-plus-2 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ce";
+  }
+}
+
+.exposure-zero {
+  @extend %icon;
+
+  &::before {
+    content: "\e3cf";
+  }
+}
+
+.extension {
+  @extend %icon;
+
+  &::before {
+    content: "\e87b";
+  }
+}
+
+.face {
+  @extend %icon;
+
+  &::before {
+    content: "\e87c";
+  }
+}
+
+.fast-forward {
+  @extend %icon;
+
+  &::before {
+    content: "\e01f";
+  }
+}
+
+.fast-rewind {
+  @extend %icon;
+
+  &::before {
+    content: "\e020";
+  }
+}
+
+.favorite {
+  @extend %icon;
+
+  &::before {
+    content: "\e87d";
+  }
+}
+
+.favorite-border {
+  @extend %icon;
+
+  &::before {
+    content: "\e87e";
+  }
+}
+
+.feedback {
+  @extend %icon;
+
+  &::before {
+    content: "\e87f";
+  }
+}
+
+.file-download {
+  @extend %icon;
+
+  &::before {
+    content: "\e2c4";
+  }
+}
+
+.file-upload {
+  @extend %icon;
+
+  &::before {
+    content: "\e2c6";
+  }
+}
+
+.filter {
+  @extend %icon;
+
+  &::before {
+    content: "\e3d3";
+  }
+}
+
+.filter-1 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3d0";
+  }
+}
+
+.filter-2 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3d1";
+  }
+}
+
+.filter-3 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3d2";
+  }
+}
+
+.filter-4 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3d4";
+  }
+}
+
+.filter-5 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3d5";
+  }
+}
+
+.filter-6 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3d6";
+  }
+}
+
+.filter-7 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3d7";
+  }
+}
+
+.filter-8 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3d8";
+  }
+}
+
+.filter-9 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3d9";
+  }
+}
+
+.filter-9-plus {
+  @extend %icon;
+
+  &::before {
+    content: "\e3da";
+  }
+}
+
+.filter-b-and-w {
+  @extend %icon;
+
+  &::before {
+    content: "\e3db";
+  }
+}
+
+.filter-center-focus {
+  @extend %icon;
+
+  &::before {
+    content: "\e3dc";
+  }
+}
+
+.filter-drama {
+  @extend %icon;
+
+  &::before {
+    content: "\e3dd";
+  }
+}
+
+.filter-frames {
+  @extend %icon;
+
+  &::before {
+    content: "\e3de";
+  }
+}
+
+.filter-hdr {
+  @extend %icon;
+
+  &::before {
+    content: "\e3df";
+  }
+}
+
+.filter-list {
+  @extend %icon;
+
+  &::before {
+    content: "\e152";
+  }
+}
+
+.filter-none {
+  @extend %icon;
+
+  &::before {
+    content: "\e3e0";
+  }
+}
+
+.filter-tilt-shift {
+  @extend %icon;
+
+  &::before {
+    content: "\e3e2";
+  }
+}
+
+.filter-vintage {
+  @extend %icon;
+
+  &::before {
+    content: "\e3e3";
+  }
+}
+
+.find-in-page {
+  @extend %icon;
+
+  &::before {
+    content: "\e880";
+  }
+}
+
+.find-replace {
+  @extend %icon;
+
+  &::before {
+    content: "\e881";
+  }
+}
+
+.flag {
+  @extend %icon;
+
+  &::before {
+    content: "\e153";
+  }
+}
+
+.flare {
+  @extend %icon;
+
+  &::before {
+    content: "\e3e4";
+  }
+}
+
+.flash-auto {
+  @extend %icon;
+
+  &::before {
+    content: "\e3e5";
+  }
+}
+
+.flash-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e3e6";
+  }
+}
+
+.flash-on {
+  @extend %icon;
+
+  &::before {
+    content: "\e3e7";
+  }
+}
+
+.flight {
+  @extend %icon;
+
+  &::before {
+    content: "\e539";
+  }
+}
+
+.flight-land {
+  @extend %icon;
+
+  &::before {
+    content: "\e904";
+  }
+}
+
+.flight-takeoff {
+  @extend %icon;
+
+  &::before {
+    content: "\e905";
+  }
+}
+
+.flip {
+  @extend %icon;
+
+  &::before {
+    content: "\e3e8";
+  }
+}
+
+.flip-to-back {
+  @extend %icon;
+
+  &::before {
+    content: "\e882";
+  }
+}
+
+.flip-to-front {
+  @extend %icon;
+
+  &::before {
+    content: "\e883";
+  }
+}
+
+.folder {
+  @extend %icon;
+
+  &::before {
+    content: "\e2c7";
+  }
+}
+
+.folder-open {
+  @extend %icon;
+
+  &::before {
+    content: "\e2c8";
+  }
+}
+
+.folder-shared {
+  @extend %icon;
+
+  &::before {
+    content: "\e2c9";
+  }
+}
+
+.folder-special {
+  @extend %icon;
+
+  &::before {
+    content: "\e617";
+  }
+}
+
+.font-download {
+  @extend %icon;
+
+  &::before {
+    content: "\e167";
+  }
+}
+
+.format-align-center {
+  @extend %icon;
+
+  &::before {
+    content: "\e234";
+  }
+}
+
+.format-align-justify {
+  @extend %icon;
+
+  &::before {
+    content: "\e235";
+  }
+}
+
+.format-align-left {
+  @extend %icon;
+
+  &::before {
+    content: "\e236";
+  }
+}
+
+.format-align-right {
+  @extend %icon;
+
+  &::before {
+    content: "\e237";
+  }
+}
+
+.format-bold {
+  @extend %icon;
+
+  &::before {
+    content: "\e238";
+  }
+}
+
+.format-clear {
+  @extend %icon;
+
+  &::before {
+    content: "\e239";
+  }
+}
+
+.format-color-fill {
+  @extend %icon;
+
+  &::before {
+    content: "\e23a";
+  }
+}
+
+.format-color-reset {
+  @extend %icon;
+
+  &::before {
+    content: "\e23b";
+  }
+}
+
+.format-color-text {
+  @extend %icon;
+
+  &::before {
+    content: "\e23c";
+  }
+}
+
+.format-indent-decrease {
+  @extend %icon;
+
+  &::before {
+    content: "\e23d";
+  }
+}
+
+.format-indent-increase {
+  @extend %icon;
+
+  &::before {
+    content: "\e23e";
+  }
+}
+
+.format-italic {
+  @extend %icon;
+
+  &::before {
+    content: "\e23f";
+  }
+}
+
+.format-line-spacing {
+  @extend %icon;
+
+  &::before {
+    content: "\e240";
+  }
+}
+
+.format-list-bulleted {
+  @extend %icon;
+
+  &::before {
+    content: "\e241";
+  }
+}
+
+.format-list-numbered {
+  @extend %icon;
+
+  &::before {
+    content: "\e242";
+  }
+}
+
+.format-paint {
+  @extend %icon;
+
+  &::before {
+    content: "\e243";
+  }
+}
+
+.format-quote {
+  @extend %icon;
+
+  &::before {
+    content: "\e244";
+  }
+}
+
+.format-size {
+  @extend %icon;
+
+  &::before {
+    content: "\e245";
+  }
+}
+
+.format-strikethrough {
+  @extend %icon;
+
+  &::before {
+    content: "\e246";
+  }
+}
+
+.format-textdirection-l-to-r {
+  @extend %icon;
+
+  &::before {
+    content: "\e247";
+  }
+}
+
+.format-textdirection-r-to-l {
+  @extend %icon;
+
+  &::before {
+    content: "\e248";
+  }
+}
+
+.format-underlined {
+  @extend %icon;
+
+  &::before {
+    content: "\e249";
+  }
+}
+
+.forum {
+  @extend %icon;
+
+  &::before {
+    content: "\e0bf";
+  }
+}
+
+.forward {
+  @extend %icon;
+
+  &::before {
+    content: "\e154";
+  }
+}
+
+.forward-10 {
+  @extend %icon;
+
+  &::before {
+    content: "\e056";
+  }
+}
+
+.forward-30 {
+  @extend %icon;
+
+  &::before {
+    content: "\e057";
+  }
+}
+
+.forward-5 {
+  @extend %icon;
+
+  &::before {
+    content: "\e058";
+  }
+}
+
+.fullscreen {
+  @extend %icon;
+
+  &::before {
+    content: "\e5d0";
+  }
+}
+
+.fullscreen-exit {
+  @extend %icon;
+
+  &::before {
+    content: "\e5d1";
+  }
+}
+
+.functions {
+  @extend %icon;
+
+  &::before {
+    content: "\e24a";
+  }
+}
+
+.gamepad {
+  @extend %icon;
+
+  &::before {
+    content: "\e30f";
+  }
+}
+
+.games {
+  @extend %icon;
+
+  &::before {
+    content: "\e021";
+  }
+}
+
+.gesture {
+  @extend %icon;
+
+  &::before {
+    content: "\e155";
+  }
+}
+
+.get-app {
+  @extend %icon;
+
+  &::before {
+    content: "\e884";
+  }
+}
+
+.gif {
+  @extend %icon;
+
+  &::before {
+    content: "\e908";
+  }
+}
+
+.gps-fixed {
+  @extend %icon;
+
+  &::before {
+    content: "\e1b3";
+  }
+}
+
+.gps-not-fixed {
+  @extend %icon;
+
+  &::before {
+    content: "\e1b4";
+  }
+}
+
+.gps-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e1b5";
+  }
+}
+
+.grade {
+  @extend %icon;
+
+  &::before {
+    content: "\e885";
+  }
+}
+
+.gradient {
+  @extend %icon;
+
+  &::before {
+    content: "\e3e9";
+  }
+}
+
+.grain {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ea";
+  }
+}
+
+.graphic-eq {
+  @extend %icon;
+
+  &::before {
+    content: "\e1b8";
+  }
+}
+
+.grid-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e3eb";
+  }
+}
+
+.grid-on {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ec";
+  }
+}
+
+.group {
+  @extend %icon;
+
+  &::before {
+    content: "\e7ef";
+  }
+}
+
+.group-add {
+  @extend %icon;
+
+  &::before {
+    content: "\e7f0";
+  }
+}
+
+.group-work {
+  @extend %icon;
+
+  &::before {
+    content: "\e886";
+  }
+}
+
+.hd {
+  @extend %icon;
+
+  &::before {
+    content: "\e052";
+  }
+}
+
+.hdr-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ed";
+  }
+}
+
+.hdr-on {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ee";
+  }
+}
+
+.hdr-strong {
+  @extend %icon;
+
+  &::before {
+    content: "\e3f1";
+  }
+}
+
+.hdr-weak {
+  @extend %icon;
+
+  &::before {
+    content: "\e3f2";
+  }
+}
+
+.headset {
+  @extend %icon;
+
+  &::before {
+    content: "\e310";
+  }
+}
+
+.headset-mic {
+  @extend %icon;
+
+  &::before {
+    content: "\e311";
+  }
+}
+
+.healing {
+  @extend %icon;
+
+  &::before {
+    content: "\e3f3";
+  }
+}
+
+.hearing {
+  @extend %icon;
+
+  &::before {
+    content: "\e023";
+  }
+}
+
+.help {
+  @extend %icon;
+
+  &::before {
+    content: "\e887";
+  }
+}
+
+.help-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e8fd";
+  }
+}
+
+.high-quality {
+  @extend %icon;
+
+  &::before {
+    content: "\e024";
+  }
+}
+
+.highlight-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e888";
+  }
+}
+
+.history {
+  @extend %icon;
+
+  &::before {
+    content: "\e889";
+  }
+}
+
+.home {
+  @extend %icon;
+
+  &::before {
+    content: "\e88a";
+  }
+}
+
+.hotel {
+  @extend %icon;
+
+  &::before {
+    content: "\e53a";
+  }
+}
+
+.hourglass-empty {
+  @extend %icon;
+
+  &::before {
+    content: "\e88b";
+  }
+}
+
+.hourglass-full {
+  @extend %icon;
+
+  &::before {
+    content: "\e88c";
+  }
+}
+
+.http {
+  @extend %icon;
+
+  &::before {
+    content: "\e902";
+  }
+}
+
+.https {
+  @extend %icon;
+
+  &::before {
+    content: "\e88d";
+  }
+}
+
+.image {
+  @extend %icon;
+
+  &::before {
+    content: "\e3f4";
+  }
+}
+
+.image-aspect-ratio {
+  @extend %icon;
+
+  &::before {
+    content: "\e3f5";
+  }
+}
+
+.import-export {
+  @extend %icon;
+
+  &::before {
+    content: "\e0c3";
+  }
+}
+
+.inbox {
+  @extend %icon;
+
+  &::before {
+    content: "\e156";
+  }
+}
+
+.indeterminate-check-box {
+  @extend %icon;
+
+  &::before {
+    content: "\e909";
+  }
+}
+
+.info {
+  @extend %icon;
+
+  &::before {
+    content: "\e88e";
+  }
+}
+
+.info-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e88f";
+  }
+}
+
+.input {
+  @extend %icon;
+
+  &::before {
+    content: "\e890";
+  }
+}
+
+.insert-chart {
+  @extend %icon;
+
+  &::before {
+    content: "\e24b";
+  }
+}
+
+.insert-comment {
+  @extend %icon;
+
+  &::before {
+    content: "\e24c";
+  }
+}
+
+.insert-drive-file {
+  @extend %icon;
+
+  &::before {
+    content: "\e24d";
+  }
+}
+
+.insert-emoticon {
+  @extend %icon;
+
+  &::before {
+    content: "\e24e";
+  }
+}
+
+.insert-invitation {
+  @extend %icon;
+
+  &::before {
+    content: "\e24f";
+  }
+}
+
+.insert-link {
+  @extend %icon;
+
+  &::before {
+    content: "\e250";
+  }
+}
+
+.insert-photo {
+  @extend %icon;
+
+  &::before {
+    content: "\e251";
+  }
+}
+
+.invert-colors {
+  @extend %icon;
+
+  &::before {
+    content: "\e891";
+  }
+}
+
+.invert-colors-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e0c4";
+  }
+}
+
+.iso {
+  @extend %icon;
+
+  &::before {
+    content: "\e3f6";
+  }
+}
+
+.keyboard {
+  @extend %icon;
+
+  &::before {
+    content: "\e312";
+  }
+}
+
+.keyboard-arrow-down {
+  @extend %icon;
+
+  &::before {
+    content: "\e313";
+  }
+}
+
+.keyboard-arrow-left {
+  @extend %icon;
+
+  &::before {
+    content: "\e314";
+  }
+}
+
+.keyboard-arrow-right {
+  @extend %icon;
+
+  &::before {
+    content: "\e315";
+  }
+}
+
+.keyboard-arrow-up {
+  @extend %icon;
+
+  &::before {
+    content: "\e316";
+  }
+}
+
+.keyboard-backspace {
+  @extend %icon;
+
+  &::before {
+    content: "\e317";
+  }
+}
+
+.keyboard-capslock {
+  @extend %icon;
+
+  &::before {
+    content: "\e318";
+  }
+}
+
+.keyboard-hide {
+  @extend %icon;
+
+  &::before {
+    content: "\e31a";
+  }
+}
+
+.keyboard-return {
+  @extend %icon;
+
+  &::before {
+    content: "\e31b";
+  }
+}
+
+.keyboard-tab {
+  @extend %icon;
+
+  &::before {
+    content: "\e31c";
+  }
+}
+
+.keyboard-voice {
+  @extend %icon;
+
+  &::before {
+    content: "\e31d";
+  }
+}
+
+.label {
+  @extend %icon;
+
+  &::before {
+    content: "\e892";
+  }
+}
+
+.label-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e893";
+  }
+}
+
+.landscape {
+  @extend %icon;
+
+  &::before {
+    content: "\e3f7";
+  }
+}
+
+.language {
+  @extend %icon;
+
+  &::before {
+    content: "\e894";
+  }
+}
+
+.laptop {
+  @extend %icon;
+
+  &::before {
+    content: "\e31e";
+  }
+}
+
+.laptop-chromebook {
+  @extend %icon;
+
+  &::before {
+    content: "\e31f";
+  }
+}
+
+.laptop-mac {
+  @extend %icon;
+
+  &::before {
+    content: "\e320";
+  }
+}
+
+.laptop-windows {
+  @extend %icon;
+
+  &::before {
+    content: "\e321";
+  }
+}
+
+.launch {
+  @extend %icon;
+
+  &::before {
+    content: "\e895";
+  }
+}
+
+.layers {
+  @extend %icon;
+
+  &::before {
+    content: "\e53b";
+  }
+}
+
+.layers-clear {
+  @extend %icon;
+
+  &::before {
+    content: "\e53c";
+  }
+}
+
+.leak-add {
+  @extend %icon;
+
+  &::before {
+    content: "\e3f8";
+  }
+}
+
+.leak-remove {
+  @extend %icon;
+
+  &::before {
+    content: "\e3f9";
+  }
+}
+
+.lens {
+  @extend %icon;
+
+  &::before {
+    content: "\e3fa";
+  }
+}
+
+.library-add {
+  @extend %icon;
+
+  &::before {
+    content: "\e02e";
+  }
+}
+
+.library-books {
+  @extend %icon;
+
+  &::before {
+    content: "\e02f";
+  }
+}
+
+.library-music {
+  @extend %icon;
+
+  &::before {
+    content: "\e030";
+  }
+}
+
+.link {
+  @extend %icon;
+
+  &::before {
+    content: "\e157";
+  }
+}
+
+.list {
+  @extend %icon;
+
+  &::before {
+    content: "\e896";
+  }
+}
+
+.live-help {
+  @extend %icon;
+
+  &::before {
+    content: "\e0c6";
+  }
+}
+
+.live-tv {
+  @extend %icon;
+
+  &::before {
+    content: "\e639";
+  }
+}
+
+.local-activity {
+  @extend %icon;
+
+  &::before {
+    content: "\e53f";
+  }
+}
+
+.local-airport {
+  @extend %icon;
+
+  &::before {
+    content: "\e53d";
+  }
+}
+
+.local-atm {
+  @extend %icon;
+
+  &::before {
+    content: "\e53e";
+  }
+}
+
+.local-bar {
+  @extend %icon;
+
+  &::before {
+    content: "\e540";
+  }
+}
+
+.local-cafe {
+  @extend %icon;
+
+  &::before {
+    content: "\e541";
+  }
+}
+
+.local-car-wash {
+  @extend %icon;
+
+  &::before {
+    content: "\e542";
+  }
+}
+
+.local-convenience-store {
+  @extend %icon;
+
+  &::before {
+    content: "\e543";
+  }
+}
+
+.local-dining {
+  @extend %icon;
+
+  &::before {
+    content: "\e556";
+  }
+}
+
+.local-drink {
+  @extend %icon;
+
+  &::before {
+    content: "\e544";
+  }
+}
+
+.local-florist {
+  @extend %icon;
+
+  &::before {
+    content: "\e545";
+  }
+}
+
+.local-gas-station {
+  @extend %icon;
+
+  &::before {
+    content: "\e546";
+  }
+}
+
+.local-grocery-store {
+  @extend %icon;
+
+  &::before {
+    content: "\e547";
+  }
+}
+
+.local-hospital {
+  @extend %icon;
+
+  &::before {
+    content: "\e548";
+  }
+}
+
+.local-hotel {
+  @extend %icon;
+
+  &::before {
+    content: "\e549";
+  }
+}
+
+.local-laundry-service {
+  @extend %icon;
+
+  &::before {
+    content: "\e54a";
+  }
+}
+
+.local-library {
+  @extend %icon;
+
+  &::before {
+    content: "\e54b";
+  }
+}
+
+.local-mall {
+  @extend %icon;
+
+  &::before {
+    content: "\e54c";
+  }
+}
+
+.local-movies {
+  @extend %icon;
+
+  &::before {
+    content: "\e54d";
+  }
+}
+
+.local-offer {
+  @extend %icon;
+
+  &::before {
+    content: "\e54e";
+  }
+}
+
+.local-parking {
+  @extend %icon;
+
+  &::before {
+    content: "\e54f";
+  }
+}
+
+.local-pharmacy {
+  @extend %icon;
+
+  &::before {
+    content: "\e550";
+  }
+}
+
+.local-phone {
+  @extend %icon;
+
+  &::before {
+    content: "\e551";
+  }
+}
+
+.local-pizza {
+  @extend %icon;
+
+  &::before {
+    content: "\e552";
+  }
+}
+
+.local-play {
+  @extend %icon;
+
+  &::before {
+    content: "\e553";
+  }
+}
+
+.local-post-office {
+  @extend %icon;
+
+  &::before {
+    content: "\e554";
+  }
+}
+
+.local-printshop {
+  @extend %icon;
+
+  &::before {
+    content: "\e555";
+  }
+}
+
+.local-see {
+  @extend %icon;
+
+  &::before {
+    content: "\e557";
+  }
+}
+
+.local-shipping {
+  @extend %icon;
+
+  &::before {
+    content: "\e558";
+  }
+}
+
+.local-taxi {
+  @extend %icon;
+
+  &::before {
+    content: "\e559";
+  }
+}
+
+.location-city {
+  @extend %icon;
+
+  &::before {
+    content: "\e7f1";
+  }
+}
+
+.location-disabled {
+  @extend %icon;
+
+  &::before {
+    content: "\e1b6";
+  }
+}
+
+.location-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e0c7";
+  }
+}
+
+.location-on {
+  @extend %icon;
+
+  &::before {
+    content: "\e0c8";
+  }
+}
+
+.location-searching {
+  @extend %icon;
+
+  &::before {
+    content: "\e1b7";
+  }
+}
+
+.lock {
+  @extend %icon;
+
+  &::before {
+    content: "\e897";
+  }
+}
+
+.lock-open {
+  @extend %icon;
+
+  &::before {
+    content: "\e898";
+  }
+}
+
+.lock-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e899";
+  }
+}
+
+.looks {
+  @extend %icon;
+
+  &::before {
+    content: "\e3fc";
+  }
+}
+
+.looks-3 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3fb";
+  }
+}
+
+.looks-4 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3fd";
+  }
+}
+
+.looks-5 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3fe";
+  }
+}
+
+.looks-6 {
+  @extend %icon;
+
+  &::before {
+    content: "\e3ff";
+  }
+}
+
+.looks-one {
+  @extend %icon;
+
+  &::before {
+    content: "\e400";
+  }
+}
+
+.looks-two {
+  @extend %icon;
+
+  &::before {
+    content: "\e401";
+  }
+}
+
+.loop {
+  @extend %icon;
+
+  &::before {
+    content: "\e028";
+  }
+}
+
+.loupe {
+  @extend %icon;
+
+  &::before {
+    content: "\e402";
+  }
+}
+
+.loyalty {
+  @extend %icon;
+
+  &::before {
+    content: "\e89a";
+  }
+}
+
+.mail {
+  @extend %icon;
+
+  &::before {
+    content: "\e158";
+  }
+}
+
+.map {
+  @extend %icon;
+
+  &::before {
+    content: "\e55b";
+  }
+}
+
+.markunread {
+  @extend %icon;
+
+  &::before {
+    content: "\e159";
+  }
+}
+
+.markunread-mailbox {
+  @extend %icon;
+
+  &::before {
+    content: "\e89b";
+  }
+}
+
+.memory {
+  @extend %icon;
+
+  &::before {
+    content: "\e322";
+  }
+}
+
+.menu {
+  @extend %icon;
+
+  &::before {
+    content: "\e5d2";
+  }
+}
+
+.merge-type {
+  @extend %icon;
+
+  &::before {
+    content: "\e252";
+  }
+}
+
+.message {
+  @extend %icon;
+
+  &::before {
+    content: "\e0c9";
+  }
+}
+
+.mic {
+  @extend %icon;
+
+  &::before {
+    content: "\e029";
+  }
+}
+
+.mic-none {
+  @extend %icon;
+
+  &::before {
+    content: "\e02a";
+  }
+}
+
+.mic-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e02b";
+  }
+}
+
+.mms {
+  @extend %icon;
+
+  &::before {
+    content: "\e618";
+  }
+}
+
+.mode-comment {
+  @extend %icon;
+
+  &::before {
+    content: "\e253";
+  }
+}
+
+.mode-edit {
+  @extend %icon;
+
+  &::before {
+    content: "\e254";
+  }
+}
+
+.money-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e25c";
+  }
+}
+
+.monochrome-photos {
+  @extend %icon;
+
+  &::before {
+    content: "\e403";
+  }
+}
+
+.mood {
+  @extend %icon;
+
+  &::before {
+    content: "\e7f2";
+  }
+}
+
+.mood-bad {
+  @extend %icon;
+
+  &::before {
+    content: "\e7f3";
+  }
+}
+
+.more {
+  @extend %icon;
+
+  &::before {
+    content: "\e619";
+  }
+}
+
+.more-horiz {
+  @extend %icon;
+
+  &::before {
+    content: "\e5d3";
+  }
+}
+
+.more-vert {
+  @extend %icon;
+
+  &::before {
+    content: "\e5d4";
+  }
+}
+
+.mouse {
+  @extend %icon;
+
+  &::before {
+    content: "\e323";
+  }
+}
+
+.movie {
+  @extend %icon;
+
+  &::before {
+    content: "\e02c";
+  }
+}
+
+.movie-creation {
+  @extend %icon;
+
+  &::before {
+    content: "\e404";
+  }
+}
+
+.music-note {
+  @extend %icon;
+
+  &::before {
+    content: "\e405";
+  }
+}
+
+.my-location {
+  @extend %icon;
+
+  &::before {
+    content: "\e55c";
+  }
+}
+
+.nature {
+  @extend %icon;
+
+  &::before {
+    content: "\e406";
+  }
+}
+
+.nature-people {
+  @extend %icon;
+
+  &::before {
+    content: "\e407";
+  }
+}
+
+.navigate-before {
+  @extend %icon;
+
+  &::before {
+    content: "\e408";
+  }
+}
+
+.navigate-next {
+  @extend %icon;
+
+  &::before {
+    content: "\e409";
+  }
+}
+
+.navigation {
+  @extend %icon;
+
+  &::before {
+    content: "\e55d";
+  }
+}
+
+.network-cell {
+  @extend %icon;
+
+  &::before {
+    content: "\e1b9";
+  }
+}
+
+.network-locked {
+  @extend %icon;
+
+  &::before {
+    content: "\e61a";
+  }
+}
+
+.network-wifi {
+  @extend %icon;
+
+  &::before {
+    content: "\e1ba";
+  }
+}
+
+.new-releases {
+  @extend %icon;
+
+  &::before {
+    content: "\e031";
+  }
+}
+
+.nfc {
+  @extend %icon;
+
+  &::before {
+    content: "\e1bb";
+  }
+}
+
+.no-sim {
+  @extend %icon;
+
+  &::before {
+    content: "\e0cc";
+  }
+}
+
+.not-interested {
+  @extend %icon;
+
+  &::before {
+    content: "\e033";
+  }
+}
+
+.note-add {
+  @extend %icon;
+
+  &::before {
+    content: "\e89c";
+  }
+}
+
+.notifications {
+  @extend %icon;
+
+  &::before {
+    content: "\e7f4";
+  }
+}
+
+.notifications-active {
+  @extend %icon;
+
+  &::before {
+    content: "\e7f7";
+  }
+}
+
+.notifications-none {
+  @extend %icon;
+
+  &::before {
+    content: "\e7f5";
+  }
+}
+
+.notifications-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e7f6";
+  }
+}
+
+.notifications-paused {
+  @extend %icon;
+
+  &::before {
+    content: "\e7f8";
+  }
+}
+
+.offline-pin {
+  @extend %icon;
+
+  &::before {
+    content: "\e90a";
+  }
+}
+
+.ondemand-video {
+  @extend %icon;
+
+  &::before {
+    content: "\e63a";
+  }
+}
+
+.open-in-browser {
+  @extend %icon;
+
+  &::before {
+    content: "\e89d";
+  }
+}
+
+.open-in-new {
+  @extend %icon;
+
+  &::before {
+    content: "\e89e";
+  }
+}
+
+.open-with {
+  @extend %icon;
+
+  &::before {
+    content: "\e89f";
+  }
+}
+
+.pages {
+  @extend %icon;
+
+  &::before {
+    content: "\e7f9";
+  }
+}
+
+.pageview {
+  @extend %icon;
+
+  &::before {
+    content: "\e8a0";
+  }
+}
+
+.palette {
+  @extend %icon;
+
+  &::before {
+    content: "\e40a";
+  }
+}
+
+.panorama {
+  @extend %icon;
+
+  &::before {
+    content: "\e40b";
+  }
+}
+
+.panorama-fish-eye {
+  @extend %icon;
+
+  &::before {
+    content: "\e40c";
+  }
+}
+
+.panorama-horizontal {
+  @extend %icon;
+
+  &::before {
+    content: "\e40d";
+  }
+}
+
+.panorama-vertical {
+  @extend %icon;
+
+  &::before {
+    content: "\e40e";
+  }
+}
+
+.panorama-wide-angle {
+  @extend %icon;
+
+  &::before {
+    content: "\e40f";
+  }
+}
+
+.party-mode {
+  @extend %icon;
+
+  &::before {
+    content: "\e7fa";
+  }
+}
+
+.pause {
+  @extend %icon;
+
+  &::before {
+    content: "\e034";
+  }
+}
+
+.pause-circle-filled {
+  @extend %icon;
+
+  &::before {
+    content: "\e035";
+  }
+}
+
+.pause-circle-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e036";
+  }
+}
+
+.payment {
+  @extend %icon;
+
+  &::before {
+    content: "\e8a1";
+  }
+}
+
+.people {
+  @extend %icon;
+
+  &::before {
+    content: "\e7fb";
+  }
+}
+
+.people-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e7fc";
+  }
+}
+
+.perm-camera-mic {
+  @extend %icon;
+
+  &::before {
+    content: "\e8a2";
+  }
+}
+
+.perm-contact-calendar {
+  @extend %icon;
+
+  &::before {
+    content: "\e8a3";
+  }
+}
+
+.perm-data-setting {
+  @extend %icon;
+
+  &::before {
+    content: "\e8a4";
+  }
+}
+
+.perm-device-information {
+  @extend %icon;
+
+  &::before {
+    content: "\e8a5";
+  }
+}
+
+.perm-identity {
+  @extend %icon;
+
+  &::before {
+    content: "\e8a6";
+  }
+}
+
+.perm-media {
+  @extend %icon;
+
+  &::before {
+    content: "\e8a7";
+  }
+}
+
+.perm-phone-msg {
+  @extend %icon;
+
+  &::before {
+    content: "\e8a8";
+  }
+}
+
+.perm-scan-wifi {
+  @extend %icon;
+
+  &::before {
+    content: "\e8a9";
+  }
+}
+
+.person {
+  @extend %icon;
+
+  &::before {
+    content: "\e7fd";
+  }
+}
+
+.person-add {
+  @extend %icon;
+
+  &::before {
+    content: "\e7fe";
+  }
+}
+
+.person-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e7ff";
+  }
+}
+
+.person-pin {
+  @extend %icon;
+
+  &::before {
+    content: "\e55a";
+  }
+}
+
+.personal-video {
+  @extend %icon;
+
+  &::before {
+    content: "\e63b";
+  }
+}
+
+.phone {
+  @extend %icon;
+
+  &::before {
+    content: "\e0cd";
+  }
+}
+
+.phone-android {
+  @extend %icon;
+
+  &::before {
+    content: "\e324";
+  }
+}
+
+.phone-bluetooth-speaker {
+  @extend %icon;
+
+  &::before {
+    content: "\e61b";
+  }
+}
+
+.phone-forwarded {
+  @extend %icon;
+
+  &::before {
+    content: "\e61c";
+  }
+}
+
+.phone-in-talk {
+  @extend %icon;
+
+  &::before {
+    content: "\e61d";
+  }
+}
+
+.phone-iphone {
+  @extend %icon;
+
+  &::before {
+    content: "\e325";
+  }
+}
+
+.phone-locked {
+  @extend %icon;
+
+  &::before {
+    content: "\e61e";
+  }
+}
+
+.phone-missed {
+  @extend %icon;
+
+  &::before {
+    content: "\e61f";
+  }
+}
+
+.phone-paused {
+  @extend %icon;
+
+  &::before {
+    content: "\e620";
+  }
+}
+
+.phonelink {
+  @extend %icon;
+
+  &::before {
+    content: "\e326";
+  }
+}
+
+.phonelink-erase {
+  @extend %icon;
+
+  &::before {
+    content: "\e0db";
+  }
+}
+
+.phonelink-lock {
+  @extend %icon;
+
+  &::before {
+    content: "\e0dc";
+  }
+}
+
+.phonelink-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e327";
+  }
+}
+
+.phonelink-ring {
+  @extend %icon;
+
+  &::before {
+    content: "\e0dd";
+  }
+}
+
+.phonelink-setup {
+  @extend %icon;
+
+  &::before {
+    content: "\e0de";
+  }
+}
+
+.photo {
+  @extend %icon;
+
+  &::before {
+    content: "\e410";
+  }
+}
+
+.photo-album {
+  @extend %icon;
+
+  &::before {
+    content: "\e411";
+  }
+}
+
+.photo-camera {
+  @extend %icon;
+
+  &::before {
+    content: "\e412";
+  }
+}
+
+.photo-library {
+  @extend %icon;
+
+  &::before {
+    content: "\e413";
+  }
+}
+
+.photo-size-select-actual {
+  @extend %icon;
+
+  &::before {
+    content: "\e432";
+  }
+}
+
+.photo-size-select-large {
+  @extend %icon;
+
+  &::before {
+    content: "\e433";
+  }
+}
+
+.photo-size-select-small {
+  @extend %icon;
+
+  &::before {
+    content: "\e434";
+  }
+}
+
+.picture-as-pdf {
+  @extend %icon;
+
+  &::before {
+    content: "\e415";
+  }
+}
+
+.picture-in-picture {
+  @extend %icon;
+
+  &::before {
+    content: "\e8aa";
+  }
+}
+
+.pin-drop {
+  @extend %icon;
+
+  &::before {
+    content: "\e55e";
+  }
+}
+
+.place {
+  @extend %icon;
+
+  &::before {
+    content: "\e55f";
+  }
+}
+
+.play-arrow {
+  @extend %icon;
+
+  &::before {
+    content: "\e037";
+  }
+}
+
+.play-circle-filled {
+  @extend %icon;
+
+  &::before {
+    content: "\e038";
+  }
+}
+
+.play-circle-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e039";
+  }
+}
+
+.play-for-work {
+  @extend %icon;
+
+  &::before {
+    content: "\e906";
+  }
+}
+
+.playlist-add {
+  @extend %icon;
+
+  &::before {
+    content: "\e03b";
+  }
+}
+
+.plus-one {
+  @extend %icon;
+
+  &::before {
+    content: "\e800";
+  }
+}
+
+.poll {
+  @extend %icon;
+
+  &::before {
+    content: "\e801";
+  }
+}
+
+.polymer {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ab";
+  }
+}
+
+.portable-wifi-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e0ce";
+  }
+}
+
+.portrait {
+  @extend %icon;
+
+  &::before {
+    content: "\e416";
+  }
+}
+
+.power {
+  @extend %icon;
+
+  &::before {
+    content: "\e63c";
+  }
+}
+
+.power-input {
+  @extend %icon;
+
+  &::before {
+    content: "\e336";
+  }
+}
+
+.power-settings-new {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ac";
+  }
+}
+
+.present-to-all {
+  @extend %icon;
+
+  &::before {
+    content: "\e0df";
+  }
+}
+
+.print {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ad";
+  }
+}
+
+.public {
+  @extend %icon;
+
+  &::before {
+    content: "\e80b";
+  }
+}
+
+.publish {
+  @extend %icon;
+
+  &::before {
+    content: "\e255";
+  }
+}
+
+.query-builder {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ae";
+  }
+}
+
+.question-answer {
+  @extend %icon;
+
+  &::before {
+    content: "\e8af";
+  }
+}
+
+.queue {
+  @extend %icon;
+
+  &::before {
+    content: "\e03c";
+  }
+}
+
+.queue-music {
+  @extend %icon;
+
+  &::before {
+    content: "\e03d";
+  }
+}
+
+.radio {
+  @extend %icon;
+
+  &::before {
+    content: "\e03e";
+  }
+}
+
+.radio-button-checked {
+  @extend %icon;
+
+  &::before {
+    content: "\e837";
+  }
+}
+
+.radio-button-unchecked {
+  @extend %icon;
+
+  &::before {
+    content: "\e836";
+  }
+}
+
+.rate-review {
+  @extend %icon;
+
+  &::before {
+    content: "\e560";
+  }
+}
+
+.receipt {
+  @extend %icon;
+
+  &::before {
+    content: "\e8b0";
+  }
+}
+
+.recent-actors {
+  @extend %icon;
+
+  &::before {
+    content: "\e03f";
+  }
+}
+
+.redeem {
+  @extend %icon;
+
+  &::before {
+    content: "\e8b1";
+  }
+}
+
+.redo {
+  @extend %icon;
+
+  &::before {
+    content: "\e15a";
+  }
+}
+
+.refresh {
+  @extend %icon;
+
+  &::before {
+    content: "\e5d5";
+  }
+}
+
+.remove {
+  @extend %icon;
+
+  &::before {
+    content: "\e15b";
+  }
+}
+
+.remove-circle {
+  @extend %icon;
+
+  &::before {
+    content: "\e15c";
+  }
+}
+
+.remove-circle-outline {
+  @extend %icon;
+
+  &::before {
+    content: "\e15d";
+  }
+}
+
+.remove-red-eye {
+  @extend %icon;
+
+  &::before {
+    content: "\e417";
+  }
+}
+
+.reorder {
+  @extend %icon;
+
+  &::before {
+    content: "\e8fe";
+  }
+}
+
+.repeat {
+  @extend %icon;
+
+  &::before {
+    content: "\e040";
+  }
+}
+
+.repeat-one {
+  @extend %icon;
+
+  &::before {
+    content: "\e041";
+  }
+}
+
+.replay {
+  @extend %icon;
+
+  &::before {
+    content: "\e042";
+  }
+}
+
+.replay-10 {
+  @extend %icon;
+
+  &::before {
+    content: "\e059";
+  }
+}
+
+.replay-30 {
+  @extend %icon;
+
+  &::before {
+    content: "\e05a";
+  }
+}
+
+.replay-5 {
+  @extend %icon;
+
+  &::before {
+    content: "\e05b";
+  }
+}
+
+.reply {
+  @extend %icon;
+
+  &::before {
+    content: "\e15e";
+  }
+}
+
+.reply-all {
+  @extend %icon;
+
+  &::before {
+    content: "\e15f";
+  }
+}
+
+.report {
+  @extend %icon;
+
+  &::before {
+    content: "\e160";
+  }
+}
+
+.report-problem {
+  @extend %icon;
+
+  &::before {
+    content: "\e8b2";
+  }
+}
+
+.restaurant-menu {
+  @extend %icon;
+
+  &::before {
+    content: "\e561";
+  }
+}
+
+.restore {
+  @extend %icon;
+
+  &::before {
+    content: "\e8b3";
+  }
+}
+
+.ring-volume {
+  @extend %icon;
+
+  &::before {
+    content: "\e0d1";
+  }
+}
+
+.room {
+  @extend %icon;
+
+  &::before {
+    content: "\e8b4";
+  }
+}
+
+.rotate-90-degrees-ccw {
+  @extend %icon;
+
+  &::before {
+    content: "\e418";
+  }
+}
+
+.rotate-left {
+  @extend %icon;
+
+  &::before {
+    content: "\e419";
+  }
+}
+
+.rotate-right {
+  @extend %icon;
+
+  &::before {
+    content: "\e41a";
+  }
+}
+
+.router {
+  @extend %icon;
+
+  &::before {
+    content: "\e328";
+  }
+}
+
+.satellite {
+  @extend %icon;
+
+  &::before {
+    content: "\e562";
+  }
+}
+
+.save {
+  @extend %icon;
+
+  &::before {
+    content: "\e161";
+  }
+}
+
+.scanner {
+  @extend %icon;
+
+  &::before {
+    content: "\e329";
+  }
+}
+
+.schedule {
+  @extend %icon;
+
+  &::before {
+    content: "\e8b5";
+  }
+}
+
+.school {
+  @extend %icon;
+
+  &::before {
+    content: "\e80c";
+  }
+}
+
+.screen-lock-landscape {
+  @extend %icon;
+
+  &::before {
+    content: "\e1be";
+  }
+}
+
+.screen-lock-portrait {
+  @extend %icon;
+
+  &::before {
+    content: "\e1bf";
+  }
+}
+
+.screen-lock-rotation {
+  @extend %icon;
+
+  &::before {
+    content: "\e1c0";
+  }
+}
+
+.screen-rotation {
+  @extend %icon;
+
+  &::before {
+    content: "\e1c1";
+  }
+}
+
+.sd-card {
+  @extend %icon;
+
+  &::before {
+    content: "\e623";
+  }
+}
+
+.sd-storage {
+  @extend %icon;
+
+  &::before {
+    content: "\e1c2";
+  }
+}
+
+.search {
+  @extend %icon;
+
+  &::before {
+    content: "\e8b6";
+  }
+}
+
+.security {
+  @extend %icon;
+
+  &::before {
+    content: "\e32a";
+  }
+}
+
+.select-all {
+  @extend %icon;
+
+  &::before {
+    content: "\e162";
+  }
+}
+
+.send {
+  @extend %icon;
+
+  &::before {
+    content: "\e163";
+  }
+}
+
+.settings {
+  @extend %icon;
+
+  &::before {
+    content: "\e8b8";
+  }
+}
+
+.settings-applications {
+  @extend %icon;
+
+  &::before {
+    content: "\e8b9";
+  }
+}
+
+.settings-backup-restore {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ba";
+  }
+}
+
+.settings-bluetooth {
+  @extend %icon;
+
+  &::before {
+    content: "\e8bb";
+  }
+}
+
+.settings-brightness {
+  @extend %icon;
+
+  &::before {
+    content: "\e8bd";
+  }
+}
+
+.settings-cell {
+  @extend %icon;
+
+  &::before {
+    content: "\e8bc";
+  }
+}
+
+.settings-ethernet {
+  @extend %icon;
+
+  &::before {
+    content: "\e8be";
+  }
+}
+
+.settings-input-antenna {
+  @extend %icon;
+
+  &::before {
+    content: "\e8bf";
+  }
+}
+
+.settings-input-component {
+  @extend %icon;
+
+  &::before {
+    content: "\e8c0";
+  }
+}
+
+.settings-input-composite {
+  @extend %icon;
+
+  &::before {
+    content: "\e8c1";
+  }
+}
+
+.settings-input-hdmi {
+  @extend %icon;
+
+  &::before {
+    content: "\e8c2";
+  }
+}
+
+.settings-input-svideo {
+  @extend %icon;
+
+  &::before {
+    content: "\e8c3";
+  }
+}
+
+.settings-overscan {
+  @extend %icon;
+
+  &::before {
+    content: "\e8c4";
+  }
+}
+
+.settings-phone {
+  @extend %icon;
+
+  &::before {
+    content: "\e8c5";
+  }
+}
+
+.settings-power {
+  @extend %icon;
+
+  &::before {
+    content: "\e8c6";
+  }
+}
+
+.settings-remote {
+  @extend %icon;
+
+  &::before {
+    content: "\e8c7";
+  }
+}
+
+.settings-system-daydream {
+  @extend %icon;
+
+  &::before {
+    content: "\e1c3";
+  }
+}
+
+.settings-voice {
+  @extend %icon;
+
+  &::before {
+    content: "\e8c8";
+  }
+}
+
+.share {
+  @extend %icon;
+
+  &::before {
+    content: "\e80d";
+  }
+}
+
+.shop {
+  @extend %icon;
+
+  &::before {
+    content: "\e8c9";
+  }
+}
+
+.shop-two {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ca";
+  }
+}
+
+.shopping-basket {
+  @extend %icon;
+
+  &::before {
+    content: "\e8cb";
+  }
+}
+
+.shopping-cart {
+  @extend %icon;
+
+  &::before {
+    content: "\e8cc";
+  }
+}
+
+.shuffle {
+  @extend %icon;
+
+  &::before {
+    content: "\e043";
+  }
+}
+
+.signal-cellular-4-bar {
+  @extend %icon;
+
+  &::before {
+    content: "\e1c8";
+  }
+}
+
+.signal-cellular-connected-no-internet-4-bar {
+  @extend %icon;
+
+  &::before {
+    content: "\e1cd";
+  }
+}
+
+.signal-cellular-no-sim {
+  @extend %icon;
+
+  &::before {
+    content: "\e1ce";
+  }
+}
+
+.signal-cellular-null {
+  @extend %icon;
+
+  &::before {
+    content: "\e1cf";
+  }
+}
+
+.signal-cellular-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e1d0";
+  }
+}
+
+.signal-wifi-4-bar {
+  @extend %icon;
+
+  &::before {
+    content: "\e1d8";
+  }
+}
+
+.signal-wifi-4-bar-lock {
+  @extend %icon;
+
+  &::before {
+    content: "\e1d9";
+  }
+}
+
+.signal-wifi-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e1da";
+  }
+}
+
+.sim-card {
+  @extend %icon;
+
+  &::before {
+    content: "\e32b";
+  }
+}
+
+.sim-card-alert {
+  @extend %icon;
+
+  &::before {
+    content: "\e624";
+  }
+}
+
+.skip-next {
+  @extend %icon;
+
+  &::before {
+    content: "\e044";
+  }
+}
+
+.skip-previous {
+  @extend %icon;
+
+  &::before {
+    content: "\e045";
+  }
+}
+
+.slideshow {
+  @extend %icon;
+
+  &::before {
+    content: "\e41b";
+  }
+}
+
+.smartphone {
+  @extend %icon;
+
+  &::before {
+    content: "\e32c";
+  }
+}
+
+.sms {
+  @extend %icon;
+
+  &::before {
+    content: "\e625";
+  }
+}
+
+.sms-failed {
+  @extend %icon;
+
+  &::before {
+    content: "\e626";
+  }
+}
+
+.snooze {
+  @extend %icon;
+
+  &::before {
+    content: "\e046";
+  }
+}
+
+.sort {
+  @extend %icon;
+
+  &::before {
+    content: "\e164";
+  }
+}
+
+.sort-by-alpha {
+  @extend %icon;
+
+  &::before {
+    content: "\e053";
+  }
+}
+
+.space-bar {
+  @extend %icon;
+
+  &::before {
+    content: "\e256";
+  }
+}
+
+.speaker {
+  @extend %icon;
+
+  &::before {
+    content: "\e32d";
+  }
+}
+
+.speaker-group {
+  @extend %icon;
+
+  &::before {
+    content: "\e32e";
+  }
+}
+
+.speaker-notes {
+  @extend %icon;
+
+  &::before {
+    content: "\e8cd";
+  }
+}
+
+.speaker-phone {
+  @extend %icon;
+
+  &::before {
+    content: "\e0d2";
+  }
+}
+
+.spellcheck {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ce";
+  }
+}
+
+.star {
+  @extend %icon;
+
+  &::before {
+    content: "\e838";
+  }
+}
+
+.star-border {
+  @extend %icon;
+
+  &::before {
+    content: "\e83a";
+  }
+}
+
+.star-half {
+  @extend %icon;
+
+  &::before {
+    content: "\e839";
+  }
+}
+
+.stars {
+  @extend %icon;
+
+  &::before {
+    content: "\e8d0";
+  }
+}
+
+.stay-current-landscape {
+  @extend %icon;
+
+  &::before {
+    content: "\e0d3";
+  }
+}
+
+.stay-current-portrait {
+  @extend %icon;
+
+  &::before {
+    content: "\e0d4";
+  }
+}
+
+.stay-primary-landscape {
+  @extend %icon;
+
+  &::before {
+    content: "\e0d5";
+  }
+}
+
+.stay-primary-portrait {
+  @extend %icon;
+
+  &::before {
+    content: "\e0d6";
+  }
+}
+
+.stop {
+  @extend %icon;
+
+  &::before {
+    content: "\e047";
+  }
+}
+
+.storage {
+  @extend %icon;
+
+  &::before {
+    content: "\e1db";
+  }
+}
+
+.store {
+  @extend %icon;
+
+  &::before {
+    content: "\e8d1";
+  }
+}
+
+.store-mall-directory {
+  @extend %icon;
+
+  &::before {
+    content: "\e563";
+  }
+}
+
+.straighten {
+  @extend %icon;
+
+  &::before {
+    content: "\e41c";
+  }
+}
+
+.strikethrough-s {
+  @extend %icon;
+
+  &::before {
+    content: "\e257";
+  }
+}
+
+.style {
+  @extend %icon;
+
+  &::before {
+    content: "\e41d";
+  }
+}
+
+.subject {
+  @extend %icon;
+
+  &::before {
+    content: "\e8d2";
+  }
+}
+
+.subtitles {
+  @extend %icon;
+
+  &::before {
+    content: "\e048";
+  }
+}
+
+.supervisor-account {
+  @extend %icon;
+
+  &::before {
+    content: "\e8d3";
+  }
+}
+
+.surround-sound {
+  @extend %icon;
+
+  &::before {
+    content: "\e049";
+  }
+}
+
+.swap-calls {
+  @extend %icon;
+
+  &::before {
+    content: "\e0d7";
+  }
+}
+
+.swap-horiz {
+  @extend %icon;
+
+  &::before {
+    content: "\e8d4";
+  }
+}
+
+.swap-vert {
+  @extend %icon;
+
+  &::before {
+    content: "\e8d5";
+  }
+}
+
+.swap-vertical-circle {
+  @extend %icon;
+
+  &::before {
+    content: "\e8d6";
+  }
+}
+
+.switch-camera {
+  @extend %icon;
+
+  &::before {
+    content: "\e41e";
+  }
+}
+
+.switch-video {
+  @extend %icon;
+
+  &::before {
+    content: "\e41f";
+  }
+}
+
+.sync {
+  @extend %icon;
+
+  &::before {
+    content: "\e627";
+  }
+}
+
+.sync-disabled {
+  @extend %icon;
+
+  &::before {
+    content: "\e628";
+  }
+}
+
+.sync-problem {
+  @extend %icon;
+
+  &::before {
+    content: "\e629";
+  }
+}
+
+.system-update {
+  @extend %icon;
+
+  &::before {
+    content: "\e62a";
+  }
+}
+
+.system-update-alt {
+  @extend %icon;
+
+  &::before {
+    content: "\e8d7";
+  }
+}
+
+.tab {
+  @extend %icon;
+
+  &::before {
+    content: "\e8d8";
+  }
+}
+
+.tab-unselected {
+  @extend %icon;
+
+  &::before {
+    content: "\e8d9";
+  }
+}
+
+.tablet {
+  @extend %icon;
+
+  &::before {
+    content: "\e32f";
+  }
+}
+
+.tablet-android {
+  @extend %icon;
+
+  &::before {
+    content: "\e330";
+  }
+}
+
+.tablet-mac {
+  @extend %icon;
+
+  &::before {
+    content: "\e331";
+  }
+}
+
+.tag-faces {
+  @extend %icon;
+
+  &::before {
+    content: "\e420";
+  }
+}
+
+.tap-and-play {
+  @extend %icon;
+
+  &::before {
+    content: "\e62b";
+  }
+}
+
+.terrain {
+  @extend %icon;
+
+  &::before {
+    content: "\e564";
+  }
+}
+
+.text-format {
+  @extend %icon;
+
+  &::before {
+    content: "\e165";
+  }
+}
+
+.textsms {
+  @extend %icon;
+
+  &::before {
+    content: "\e0d8";
+  }
+}
+
+.texture {
+  @extend %icon;
+
+  &::before {
+    content: "\e421";
+  }
+}
+
+.theaters {
+  @extend %icon;
+
+  &::before {
+    content: "\e8da";
+  }
+}
+
+.thumb-down {
+  @extend %icon;
+
+  &::before {
+    content: "\e8db";
+  }
+}
+
+.thumb-up {
+  @extend %icon;
+
+  &::before {
+    content: "\e8dc";
+  }
+}
+
+.thumbs-up-down {
+  @extend %icon;
+
+  &::before {
+    content: "\e8dd";
+  }
+}
+
+.time-to-leave {
+  @extend %icon;
+
+  &::before {
+    content: "\e62c";
+  }
+}
+
+.timelapse {
+  @extend %icon;
+
+  &::before {
+    content: "\e422";
+  }
+}
+
+.timer {
+  @extend %icon;
+
+  &::before {
+    content: "\e425";
+  }
+}
+
+.timer-10 {
+  @extend %icon;
+
+  &::before {
+    content: "\e423";
+  }
+}
+
+.timer-3 {
+  @extend %icon;
+
+  &::before {
+    content: "\e424";
+  }
+}
+
+.timer-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e426";
+  }
+}
+
+.toc {
+  @extend %icon;
+
+  &::before {
+    content: "\e8de";
+  }
+}
+
+.today {
+  @extend %icon;
+
+  &::before {
+    content: "\e8df";
+  }
+}
+
+.toll {
+  @extend %icon;
+
+  &::before {
+    content: "\e8e0";
+  }
+}
+
+.tonality {
+  @extend %icon;
+
+  &::before {
+    content: "\e427";
+  }
+}
+
+.toys {
+  @extend %icon;
+
+  &::before {
+    content: "\e332";
+  }
+}
+
+.track-changes {
+  @extend %icon;
+
+  &::before {
+    content: "\e8e1";
+  }
+}
+
+.traffic {
+  @extend %icon;
+
+  &::before {
+    content: "\e565";
+  }
+}
+
+.transform {
+  @extend %icon;
+
+  &::before {
+    content: "\e428";
+  }
+}
+
+.translate {
+  @extend %icon;
+
+  &::before {
+    content: "\e8e2";
+  }
+}
+
+.trending-down {
+  @extend %icon;
+
+  &::before {
+    content: "\e8e3";
+  }
+}
+
+.trending-flat {
+  @extend %icon;
+
+  &::before {
+    content: "\e8e4";
+  }
+}
+
+.trending-up {
+  @extend %icon;
+
+  &::before {
+    content: "\e8e5";
+  }
+}
+
+.tune {
+  @extend %icon;
+
+  &::before {
+    content: "\e429";
+  }
+}
+
+.turned-in {
+  @extend %icon;
+
+  &::before {
+    content: "\e8e6";
+  }
+}
+
+.turned-in-not {
+  @extend %icon;
+
+  &::before {
+    content: "\e8e7";
+  }
+}
+
+.tv {
+  @extend %icon;
+
+  &::before {
+    content: "\e333";
+  }
+}
+
+.undo {
+  @extend %icon;
+
+  &::before {
+    content: "\e166";
+  }
+}
+
+.unfold-less {
+  @extend %icon;
+
+  &::before {
+    content: "\e5d6";
+  }
+}
+
+.unfold-more {
+  @extend %icon;
+
+  &::before {
+    content: "\e5d7";
+  }
+}
+
+.usb {
+  @extend %icon;
+
+  &::before {
+    content: "\e1e0";
+  }
+}
+
+.verified-user {
+  @extend %icon;
+
+  &::before {
+    content: "\e8e8";
+  }
+}
+
+.vertical-align-bottom {
+  @extend %icon;
+
+  &::before {
+    content: "\e258";
+  }
+}
+
+.vertical-align-center {
+  @extend %icon;
+
+  &::before {
+    content: "\e259";
+  }
+}
+
+.vertical-align-top {
+  @extend %icon;
+
+  &::before {
+    content: "\e25a";
+  }
+}
+
+.vibration {
+  @extend %icon;
+
+  &::before {
+    content: "\e62d";
+  }
+}
+
+.video-library {
+  @extend %icon;
+
+  &::before {
+    content: "\e04a";
+  }
+}
+
+.videocam {
+  @extend %icon;
+
+  &::before {
+    content: "\e04b";
+  }
+}
+
+.videocam-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e04c";
+  }
+}
+
+.view-agenda {
+  @extend %icon;
+
+  &::before {
+    content: "\e8e9";
+  }
+}
+
+.view-array {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ea";
+  }
+}
+
+.view-carousel {
+  @extend %icon;
+
+  &::before {
+    content: "\e8eb";
+  }
+}
+
+.view-column {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ec";
+  }
+}
+
+.view-comfy {
+  @extend %icon;
+
+  &::before {
+    content: "\e42a";
+  }
+}
+
+.view-compact {
+  @extend %icon;
+
+  &::before {
+    content: "\e42b";
+  }
+}
+
+.view-day {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ed";
+  }
+}
+
+.view-headline {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ee";
+  }
+}
+
+.view-list {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ef";
+  }
+}
+
+.view-module {
+  @extend %icon;
+
+  &::before {
+    content: "\e8f0";
+  }
+}
+
+.view-quilt {
+  @extend %icon;
+
+  &::before {
+    content: "\e8f1";
+  }
+}
+
+.view-stream {
+  @extend %icon;
+
+  &::before {
+    content: "\e8f2";
+  }
+}
+
+.view-week {
+  @extend %icon;
+
+  &::before {
+    content: "\e8f3";
+  }
+}
+
+.vignette {
+  @extend %icon;
+
+  &::before {
+    content: "\e435";
+  }
+}
+
+.visibility {
+  @extend %icon;
+
+  &::before {
+    content: "\e8f4";
+  }
+}
+
+.visibility-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e8f5";
+  }
+}
+
+.voice-chat {
+  @extend %icon;
+
+  &::before {
+    content: "\e62e";
+  }
+}
+
+.voicemail {
+  @extend %icon;
+
+  &::before {
+    content: "\e0d9";
+  }
+}
+
+.volume-down {
+  @extend %icon;
+
+  &::before {
+    content: "\e04d";
+  }
+}
+
+.volume-mute {
+  @extend %icon;
+
+  &::before {
+    content: "\e04e";
+  }
+}
+
+.volume-off {
+  @extend %icon;
+
+  &::before {
+    content: "\e04f";
+  }
+}
+
+.volume-up {
+  @extend %icon;
+
+  &::before {
+    content: "\e050";
+  }
+}
+
+.vpn-key {
+  @extend %icon;
+
+  &::before {
+    content: "\e0da";
+  }
+}
+
+.vpn-lock {
+  @extend %icon;
+
+  &::before {
+    content: "\e62f";
+  }
+}
+
+.wallpaper {
+  @extend %icon;
+
+  &::before {
+    content: "\e1bc";
+  }
+}
+
+.warning {
+  @extend %icon;
+
+  &::before {
+    content: "\e002";
+  }
+}
+
+.watch {
+  @extend %icon;
+
+  &::before {
+    content: "\e334";
+  }
+}
+
+.wb-auto {
+  @extend %icon;
+
+  &::before {
+    content: "\e42c";
+  }
+}
+
+.wb-cloudy {
+  @extend %icon;
+
+  &::before {
+    content: "\e42d";
+  }
+}
+
+.wb-incandescent {
+  @extend %icon;
+
+  &::before {
+    content: "\e42e";
+  }
+}
+
+.wb-iridescent {
+  @extend %icon;
+
+  &::before {
+    content: "\e436";
+  }
+}
+
+.wb-sunny {
+  @extend %icon;
+
+  &::before {
+    content: "\e430";
+  }
+}
+
+.wc {
+  @extend %icon;
+
+  &::before {
+    content: "\e63d";
+  }
+}
+
+.web {
+  @extend %icon;
+
+  &::before {
+    content: "\e051";
+  }
+}
+
+.whatshot {
+  @extend %icon;
+
+  &::before {
+    content: "\e80e";
+  }
+}
+
+.widgets {
+  @extend %icon;
+
+  &::before {
+    content: "\e1bd";
+  }
+}
+
+.wifi {
+  @extend %icon;
+
+  &::before {
+    content: "\e63e";
+  }
+}
+
+.wifi-lock {
+  @extend %icon;
+
+  &::before {
+    content: "\e1e1";
+  }
+}
+
+.wifi-tethering {
+  @extend %icon;
+
+  &::before {
+    content: "\e1e2";
+  }
+}
+
+.work {
+  @extend %icon;
+
+  &::before {
+    content: "\e8f9";
+  }
+}
+
+.wrap-text {
+  @extend %icon;
+
+  &::before {
+    content: "\e25b";
+  }
+}
+
+.youtube-searched-for {
+  @extend %icon;
+
+  &::before {
+    content: "\e8fa";
+  }
+}
+
+.zoom-in {
+  @extend %icon;
+
+  &::before {
+    content: "\e8ff";
+  }
+}
+
+.zoom-out {
+  @extend %icon;
+
+  &::before {
+    content: "\e900";
+  }
+}
diff --git a/components/font_icon/style.styl b/components/font_icon/style.styl
deleted file mode 100644
index df5c39b1..00000000
--- a/components/font_icon/style.styl
+++ /dev/null
@@ -1,1609 +0,0 @@
-@import '../constants'
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons')
-
-:local(.root)
-  display                       : inline-block
-  font-family                   : 'Material Icons'
-  font-weight                   : normal
-  font-style                    : normal
-  font-size                     : inherit
-  line-height                   : 1
-  letter-spacing                : normal
-  text-transform                : none
-  text-rendering                : auto
-  word-wrap                     : normal
-  -webkit-font-feature-settings : 'liga'
-  -webkit-font-smoothing        : antialiased
-  -moz-osx-font-smoothing       : grayscale
-  transform                     : translate(0, 0)
-
-  &.3d_rotation::before
-    content: "\e84d"
-  &.access_alarm::before
-    content: "\e190"
-  &.access_alarms::before
-    content: "\e191"
-  &.access_time::before
-    content: "\e192"
-  &.accessibility::before
-    content: "\e84e"
-  &.account_balance::before
-    content: "\e84f"
-  &.account_balance_wallet::before
-    content: "\e850"
-  &.account_box::before
-    content: "\e851"
-  &.account_circle::before
-    content: "\e853"
-  &.adb::before
-    content: "\e60e"
-  &.add::before
-    content: "\e145"
-  &.add_alarm::before
-    content: "\e193"
-  &.add_alert::before
-    content: "\e003"
-  &.add_box::before
-    content: "\e146"
-  &.add_circle::before
-    content: "\e147"
-  &.add_circle_outline::before
-    content: "\e148"
-  &.add_shopping_cart::before
-    content: "\e854"
-  &.add_to_photos::before
-    content: "\e39d"
-  &.adjust::before
-    content: "\e39e"
-  &.airline_seat_flat::before
-    content: "\e630"
-  &.airline_seat_flat_angled::before
-    content: "\e631"
-  &.airline_seat_individual_suite::before
-    content: "\e632"
-  &.airline_seat_legroom_extra::before
-    content: "\e633"
-  &.airline_seat_legroom_normal::before
-    content: "\e634"
-  &.airline_seat_legroom_reduced::before
-    content: "\e635"
-  &.airline_seat_recline_extra::before
-    content: "\e636"
-  &.airline_seat_recline_normal::before
-    content: "\e637"
-  &.airplanemode_active::before
-    content: "\e195"
-  &.airplanemode_inactive::before
-    content: "\e194"
-  &.airplay::before
-    content: "\e055"
-  &.alarm::before
-    content: "\e855"
-  &.alarm_add::before
-    content: "\e856"
-  &.alarm_off::before
-    content: "\e857"
-  &.alarm_on::before
-    content: "\e858"
-  &.album::before
-    content: "\e019"
-  &.android::before
-    content: "\e859"
-  &.announcement::before
-    content: "\e85a"
-  &.apps::before
-    content: "\e5c3"
-  &.archive::before
-    content: "\e149"
-  &.arrow_back::before
-    content: "\e5c4"
-  &.arrow_drop_down::before
-    content: "\e5c5"
-  &.arrow_drop_down_circle::before
-    content: "\e5c6"
-  &.arrow_drop_up::before
-    content: "\e5c7"
-  &.arrow_forward::before
-    content: "\e5c8"
-  &.aspect_ratio::before
-    content: "\e85b"
-  &.assessment::before
-    content: "\e85c"
-  &.assignment::before
-    content: "\e85d"
-  &.assignment_ind::before
-    content: "\e85e"
-  &.assignment_late::before
-    content: "\e85f"
-  &.assignment_return::before
-    content: "\e860"
-  &.assignment_returned::before
-    content: "\e861"
-  &.assignment_turned_in::before
-    content: "\e862"
-  &.assistant::before
-    content: "\e39f"
-  &.assistant_photo::before
-    content: "\e3a0"
-  &.attach_file::before
-    content: "\e226"
-  &.attach_money::before
-    content: "\e227"
-  &.attachment::before
-    content: "\e2bc"
-  &.audiotrack::before
-    content: "\e3a1"
-  &.autorenew::before
-    content: "\e863"
-  &.av_timer::before
-    content: "\e01b"
-  &.backspace::before
-    content: "\e14a"
-  &.backup::before
-    content: "\e864"
-  &.battery_alert::before
-    content: "\e19c"
-  &.battery_charging_full::before
-    content: "\e1a3"
-  &.battery_full::before
-    content: "\e1a4"
-  &.battery_std::before
-    content: "\e1a5"
-  &.battery_unknown::before
-    content: "\e1a6"
-  &.beenhere::before
-    content: "\e52d"
-  &.block::before
-    content: "\e14b"
-  &.bluetooth::before
-    content: "\e1a7"
-  &.bluetooth_audio::before
-    content: "\e60f"
-  &.bluetooth_connected::before
-    content: "\e1a8"
-  &.bluetooth_disabled::before
-    content: "\e1a9"
-  &.bluetooth_searching::before
-    content: "\e1aa"
-  &.blur_circular::before
-    content: "\e3a2"
-  &.blur_linear::before
-    content: "\e3a3"
-  &.blur_off::before
-    content: "\e3a4"
-  &.blur_on::before
-    content: "\e3a5"
-  &.book::before
-    content: "\e865"
-  &.bookmark::before
-    content: "\e866"
-  &.bookmark_border::before
-    content: "\e867"
-  &.border_all::before
-    content: "\e228"
-  &.border_bottom::before
-    content: "\e229"
-  &.border_clear::before
-    content: "\e22a"
-  &.border_color::before
-    content: "\e22b"
-  &.border_horizontal::before
-    content: "\e22c"
-  &.border_inner::before
-    content: "\e22d"
-  &.border_left::before
-    content: "\e22e"
-  &.border_outer::before
-    content: "\e22f"
-  &.border_right::before
-    content: "\e230"
-  &.border_style::before
-    content: "\e231"
-  &.border_top::before
-    content: "\e232"
-  &.border_vertical::before
-    content: "\e233"
-  &.brightness_1::before
-    content: "\e3a6"
-  &.brightness_2::before
-    content: "\e3a7"
-  &.brightness_3::before
-    content: "\e3a8"
-  &.brightness_4::before
-    content: "\e3a9"
-  &.brightness_5::before
-    content: "\e3aa"
-  &.brightness_6::before
-    content: "\e3ab"
-  &.brightness_7::before
-    content: "\e3ac"
-  &.brightness_auto::before
-    content: "\e1ab"
-  &.brightness_high::before
-    content: "\e1ac"
-  &.brightness_low::before
-    content: "\e1ad"
-  &.brightness_medium::before
-    content: "\e1ae"
-  &.broken_image::before
-    content: "\e3ad"
-  &.brush::before
-    content: "\e3ae"
-  &.bug_report::before
-    content: "\e868"
-  &.build::before
-    content: "\e869"
-  &.business::before
-    content: "\e0af"
-  &.cached::before
-    content: "\e86a"
-  &.cake::before
-    content: "\e7e9"
-  &.call::before
-    content: "\e0b0"
-  &.call_end::before
-    content: "\e0b1"
-  &.call_made::before
-    content: "\e0b2"
-  &.call_merge::before
-    content: "\e0b3"
-  &.call_missed::before
-    content: "\e0b4"
-  &.call_received::before
-    content: "\e0b5"
-  &.call_split::before
-    content: "\e0b6"
-  &.camera::before
-    content: "\e3af"
-  &.camera_alt::before
-    content: "\e3b0"
-  &.camera_enhance::before
-    content: "\e8fc"
-  &.camera_front::before
-    content: "\e3b1"
-  &.camera_rear::before
-    content: "\e3b2"
-  &.camera_roll::before
-    content: "\e3b3"
-  &.cancel::before
-    content: "\e5c9"
-  &.card_giftcard::before
-    content: "\e8f6"
-  &.card_membership::before
-    content: "\e8f7"
-  &.card_travel::before
-    content: "\e8f8"
-  &.cast::before
-    content: "\e307"
-  &.cast_connected::before
-    content: "\e308"
-  &.center_focus_strong::before
-    content: "\e3b4"
-  &.center_focus_weak::before
-    content: "\e3b5"
-  &.change_history::before
-    content: "\e86b"
-  &.chat::before
-    content: "\e0b7"
-  &.chat_bubble::before
-    content: "\e0ca"
-  &.chat_bubble_outline::before
-    content: "\e0cb"
-  &.check::before
-    content: "\e5ca"
-  &.check_box::before
-    content: "\e834"
-  &.check_box_outline_blank::before
-    content: "\e835"
-  &.check_circle::before
-    content: "\e86c"
-  &.chevron_left::before
-    content: "\e5cb"
-  &.chevron_right::before
-    content: "\e5cc"
-  &.chrome_reader_mode::before
-    content: "\e86d"
-  &.class::before
-    content: "\e86e"
-  &.clear::before
-    content: "\e14c"
-  &.clear_all::before
-    content: "\e0b8"
-  &.close::before
-    content: "\e5cd"
-  &.closed_caption::before
-    content: "\e01c"
-  &.cloud::before
-    content: "\e2bd"
-  &.cloud_circle::before
-    content: "\e2be"
-  &.cloud_done::before
-    content: "\e2bf"
-  &.cloud_download::before
-    content: "\e2c0"
-  &.cloud_off::before
-    content: "\e2c1"
-  &.cloud_queue::before
-    content: "\e2c2"
-  &.cloud_upload::before
-    content: "\e2c3"
-  &.code::before
-    content: "\e86f"
-  &.collections::before
-    content: "\e3b6"
-  &.collections_bookmark::before
-    content: "\e431"
-  &.color_lens::before
-    content: "\e3b7"
-  &.colorize::before
-    content: "\e3b8"
-  &.comment::before
-    content: "\e0b9"
-  &.compare::before
-    content: "\e3b9"
-  &.computer::before
-    content: "\e30a"
-  &.confirmation_number::before
-    content: "\e638"
-  &.contact_phone::before
-    content: "\e0cf"
-  &.contacts::before&.
-    content: "\e0ba"
-  &.content_copy::bef&.ore
-    content: "\e14d"
-  &.content_cut::befo&.re
-    content: "\e14e"
-  &.content_paste::before
-    content: "\e14f"
-  &.control_point::before
-    content: "\e3ba"
-  &.control_point_duplicate::before
-    content: "\e3bb"
-  &.create::before
-    content: "\e150"
-  &.credit_card::before
-    content: "\e870"
-  &.crop::before
-    content: "\e3be"
-  &.crop_16_9::before
-    content: "\e3bc"
-  &.crop_3_2::before
-    content: "\e3bd"
-  &.crop_5_4::before
-    content: "\e3bf"
-  &.crop_7_5::before
-    content: "\e3c0"
-  &.crop_din::before
-    content: "\e3c1"
-  &.crop_free::before
-    content: "\e3c2"
-  &.crop_landscape::before
-    content: "\e3c3"
-  &.crop_original::before
-    content: "\e3c4"
-  &.crop_portrait::before
-    content: "\e3c5"
-  &.crop_square::before
-    content: "\e3c6"
-  &.dashboard::before
-    content: "\e871"
-  &.data_usage::before
-    content: "\e1af"
-  &.dehaze::before
-    content: "\e3c7"
-  &.delete::before
-    content: "\e872"
-  &.description::before
-    content: "\e873"
-  &.desktop_mac::before
-    content: "\e30b"
-  &.desktop_windows::before
-    content: "\e30c"
-  &.details::before
-    content: "\e3c8"
-  &.developer_board::before
-    content: "\e30d"
-  &.developer_mode::before
-    content: "\e1b0"
-  &.device_hub::before
-    content: "\e335"
-  &.devices::before
-    content: "\e1b1"
-  &.dialer_sip::before
-    content: "\e0bb"
-  &.dialpad::before
-    content: "\e0bc"
-  &.directions::before
-    content: "\e52e"
-  &.directions_bike::before
-    content: "\e52f"
-  &.directions_boat::before
-    content: "\e532"
-  &.directions_bus::before
-    content: "\e530"
-  &.directions_car::before
-    content: "\e531"
-  &.directions_railway::before
-    content: "\e534"
-  &.directions_run::before
-    content: "\e566"
-  &.directions_subway::before
-    content: "\e533"
-  &.directions_transit::before
-    content: "\e535"
-  &.directions_walk::before
-    content: "\e536"
-  &.disc_full::before
-    content: "\e610"
-  &.dns::before
-    content: "\e875"
-  &.do_not_disturb::before
-    content: "\e612"
-  &.do_not_disturb_alt::before
-    content: "\e611"
-  &.dock::before
-    content: "\e30e"
-  &.domain::before
-    content: "\e7ee"
-  &.done::before
-    content: "\e876"
-  &.done_all::before
-    content: "\e877"
-  &.drafts::before
-    content: "\e151"
-  &.drive_eta::before
-    content: "\e613"
-  &.dvr::before
-    content: "\e1b2"
-  &.edit::before
-    content: "\e3c9"
-  &.eject::before
-    content: "\e8fb"
-  &.email::before
-    content: "\e0be"
-  &.equalizer::before
-    content: "\e01d"
-  &.error::before
-    content: "\e000"
-  &.error_outline::before
-    content: "\e001"
-  &.event::before
-    content: "\e878"
-  &.event_available::before
-    content: "\e614"
-  &.event_busy::before
-    content: "\e615"
-  &.event_note::before
-    content: "\e616"
-  &.event_seat::before
-    content: "\e903"
-  &.exit_to_app::before
-    content: "\e879"
-  &.expand_less::before
-    content: "\e5ce"
-  &.expand_more::before
-    content: "\e5cf"
-  &.explicit::before
-    content: "\e01e"
-  &.explore::before
-    content: "\e87a"
-  &.exposure::before
-    content: "\e3ca"
-  &.exposure_neg_1::before
-    content: "\e3cb"
-  &.exposure_neg_2::before
-    content: "\e3cc"
-  &.exposure_plus_1::before
-    content: "\e3cd"
-  &.exposure_plus_2::before
-    content: "\e3ce"
-  &.exposure_zero::before
-    content: "\e3cf"
-  &.extension::before
-    content: "\e87b"
-  &.face::before
-    content: "\e87c"
-  &.fast_forward::before
-    content: "\e01f"
-  &.fast_rewind::before
-    content: "\e020"
-  &.favorite::before
-    content: "\e87d"
-  &.favorite_border::before
-    content: "\e87e"
-  &.feedback::before
-    content: "\e87f"
-  &.file_download::before
-    content: "\e2c4"
-  &.file_upload::before
-    content: "\e2c6"
-  &.filter::before
-    content: "\e3d3"
-  &.filter_1::before
-    content: "\e3d0"
-  &.filter_2::before
-    content: "\e3d1"
-  &.filter_3::before
-    content: "\e3d2"
-  &.filter_4::before
-    content: "\e3d4"
-  &.filter_5::before
-    content: "\e3d5"
-  &.filter_6::before
-    content: "\e3d6"
-  &.filter_7::before
-    content: "\e3d7"
-  &.filter_8::before
-    content: "\e3d8"
-  &.filter_9::before
-    content: "\e3d9"
-  &.filter_9_plus::before
-    content: "\e3da"
-  &.filter_b_and_w::before
-    content: "\e3db"
-  &.filter_center_focus::before
-    content: "\e3dc"
-  &.filter_drama::before
-    content: "\e3dd"
-  &.filter_frames::before
-    content: "\e3de"
-  &.filter_hdr::before
-    content: "\e3df"
-  &.filter_list::before
-    content: "\e152"
-  &.filter_none::before
-    content: "\e3e0"
-  &.filter_tilt_shift::before
-    content: "\e3e2"
-  &.filter_vintage::before
-    content: "\e3e3"
-  &.find_in_page::before
-    content: "\e880"
-  &.find_replace::before
-    content: "\e881"
-  &.flag::before
-    content: "\e153"
-  &.flare::before
-    content: "\e3e4"
-  &.flash_auto::before
-    content: "\e3e5"
-  &.flash_off::before
-    content: "\e3e6"
-  &.flash_on::before
-    content: "\e3e7"
-  &.flight::before
-    content: "\e539"
-  &.flight_land::before
-    content: "\e904"
-  &.flight_takeoff::before
-    content: "\e905"
-  &.flip::before
-    content: "\e3e8"
-  &.flip_to_back::before
-    content: "\e882"
-  &.flip_to_front::before
-    content: "\e883"
-  &.folder::before
-    content: "\e2c7"
-  &.folder_open::before
-    content: "\e2c8"
-  &.folder_shared::before
-    content: "\e2c9"
-  &.folder_special::before
-    content: "\e617"
-  &.font_download::before
-    content: "\e167"
-  &.format_align_center::before
-    content: "\e234"
-  &.format_align_justify::before
-    content: "\e235"
-  &.format_align_left::before
-    content: "\e236"
-  &.format_align_right::before
-    content: "\e237"
-  &.format_bold::before
-    content: "\e238"
-  &.format_clear::before
-    content: "\e239"
-  &.format_color_fill::before
-    content: "\e23a"
-  &.format_color_reset::before
-    content: "\e23b"
-  &.format_color_text::before
-    content: "\e23c"
-  &.format_indent_decrease::before
-    content: "\e23d"
-  &.format_indent_increase::before
-    content: "\e23e"
-  &.format_italic::before
-    content: "\e23f"
-  &.format_line_spacing::before
-    content: "\e240"
-  &.format_list_bulleted::before
-    content: "\e241"
-  &.format_list_numbered::before
-    content: "\e242"
-  &.format_paint::before
-    content: "\e243"
-  &.format_quote::before
-    content: "\e244"
-  &.format_size::before
-    content: "\e245"
-  &.format_strikethrough::before
-    content: "\e246"
-  &.format_textdirection_l_to_r::before
-    content: "\e247"
-  &.format_textdirection_r_to_l::before
-    content: "\e248"
-  &.format_underlined::before
-    content: "\e249"
-  &.forum::before
-    content: "\e0bf"
-  &.forward::before
-    content: "\e154"
-  &.forward_10::before
-    content: "\e056"
-  &.forward_30::before
-    content: "\e057"
-  &.forward_5::before
-    content: "\e058"
-  &.fullscreen::before
-    content: "\e5d0"
-  &.fullscreen_exit::before
-    content: "\e5d1"
-  &.functions::before
-    content: "\e24a"
-  &.gamepad::before
-    content: "\e30f"
-  &.games::before
-    content: "\e021"
-  &.gesture::before
-    content: "\e155"
-  &.get_app::before
-    content: "\e884"
-  &.gif::before
-    content: "\e908"
-  &.gps_fixed::before
-    content: "\e1b3"
-  &.gps_not_fixed::before
-    content: "\e1b4"
-  &.gps_off::before
-    content: "\e1b5"
-  &.grade::before
-    content: "\e885"
-  &.gradient::before
-    content: "\e3e9"
-  &.grain::before
-    content: "\e3ea"
-  &.graphic_eq::before
-    content: "\e1b8"
-  &.grid_off::before
-    content: "\e3eb"
-  &.grid_on::before
-    content: "\e3ec"
-  &.group::before
-    content: "\e7ef"
-  &.group_add::before
-    content: "\e7f0"
-  &.group_work::before
-    content: "\e886"
-  &.hd::before
-    content: "\e052"
-  &.hdr_off::before
-    content: "\e3ed"
-  &.hdr_on::before
-    content: "\e3ee"
-  &.hdr_strong::before
-    content: "\e3f1"
-  &.hdr_weak::before
-    content: "\e3f2"
-  &.headset::before
-    content: "\e310"
-  &.headset_mic::before
-    content: "\e311"
-  &.healing::before
-    content: "\e3f3"
-  &.hearing::before
-    content: "\e023"
-  &.help::before
-    content: "\e887"
-  &.help_outline::before
-    content: "\e8fd"
-  &.high_quality::before
-    content: "\e024"
-  &.highlight_off::before
-    content: "\e888"
-  &.history::before
-    content: "\e889"
-  &.home::before
-    content: "\e88a"
-  &.hotel::before
-    content: "\e53a"
-  &.hourglass_empty::before
-    content: "\e88b"
-  &.hourglass_full::before
-    content: "\e88c"
-  &.http::before
-    content: "\e902"
-  &.https::before
-    content: "\e88d"
-  &.image::before
-    content: "\e3f4"
-  &.image_aspect_ratio::before
-    content: "\e3f5"
-  &.import_export::before
-    content: "\e0c3"
-  &.inbox::before
-    content: "\e156"
-  &.indeterminate_check_box::before
-    content: "\e909"
-  &.info::before
-    content: "\e88e"
-  &.info_outline::before
-    content: "\e88f"
-  &.input::before
-    content: "\e890"
-  &.insert_chart::before
-    content: "\e24b"
-  &.insert_comment::before
-    content: "\e24c"
-  &.insert_drive_file::before
-    content: "\e24d"
-  &.insert_emoticon::before
-    content: "\e24e"
-  &.insert_invitation::before
-    content: "\e24f"
-  &.insert_link::before
-    content: "\e250"
-  &.insert_photo::before
-    content: "\e251"
-  &.invert_colors::before
-    content: "\e891"
-  &.invert_colors_off::before
-    content: "\e0c4"
-  &.iso::before
-    content: "\e3f6"
-  &.keyboard::before
-    content: "\e312"
-  &.keyboard_arrow_down::before
-    content: "\e313"
-  &.keyboard_arrow_left::before
-    content: "\e314"
-  &.keyboard_arrow_right::before
-    content: "\e315"
-  &.keyboard_arrow_up::before
-    content: "\e316"
-  &.keyboard_backspace::before
-    content: "\e317"
-  &.keyboard_capslock::before
-    content: "\e318"
-  &.keyboard_hide::before
-    content: "\e31a"
-  &.keyboard_return::before
-    content: "\e31b"
-  &.keyboard_tab::before
-    content: "\e31c"
-  &.keyboard_voice::before
-    content: "\e31d"
-  &.label::before
-    content: "\e892"
-  &.label_outline::before
-    content: "\e893"
-  &.landscape::before
-    content: "\e3f7"
-  &.language::before
-    content: "\e894"
-  &.laptop::before
-    content: "\e31e"
-  &.laptop_chromebook::before
-    content: "\e31f"
-  &.laptop_mac::before
-    content: "\e320"
-  &.laptop_windows::before
-    content: "\e321"
-  &.launch::before
-    content: "\e895"
-  &.layers::before
-    content: "\e53b"
-  &.layers_clear::before
-    content: "\e53c"
-  &.leak_add::before
-    content: "\e3f8"
-  &.leak_remove::before
-    content: "\e3f9"
-  &.lens::before
-    content: "\e3fa"
-  &.library_add::before
-    content: "\e02e"
-  &.library_books::before
-    content: "\e02f"
-  &.library_music::before
-    content: "\e030"
-  &.link::before
-    content: "\e157"
-  &.list::before
-    content: "\e896"
-  &.live_help::before
-    content: "\e0c6"
-  &.live_tv::before
-    content: "\e639"
-  &.local_activity::before
-    content: "\e53f"
-  &.local_airport::before
-    content: "\e53d"
-  &.local_atm::before
-    content: "\e53e"
-  &.local_bar::before
-    content: "\e540"
-  &.local_cafe::before
-    content: "\e541"
-  &.local_car_wash::before
-    content: "\e542"
-  &.local_convenience_store::before
-    content: "\e543"
-  &.local_dining::before
-    content: "\e556"
-  &.local_drink::before
-    content: "\e544"
-  &.local_florist::before
-    content: "\e545"
-  &.local_gas_station::before
-    content: "\e546"
-  &.local_grocery_store::before
-    content: "\e547"
-  &.local_hospital::before
-    content: "\e548"
-  &.local_hotel::before
-    content: "\e549"
-  &.local_laundry_service::before
-    content: "\e54a"
-  &.local_library::before
-    content: "\e54b"
-  &.local_mall::before
-    content: "\e54c"
-  &.local_movies::before
-    content: "\e54d"
-  &.local_offer::before
-    content: "\e54e"
-  &.local_parking::before
-    content: "\e54f"
-  &.local_pharmacy::before
-    content: "\e550"
-  &.local_phone::before
-    content: "\e551"
-  &.local_pizza::before
-    content: "\e552"
-  &.local_play::before
-    content: "\e553"
-  &.local_post_office::before
-    content: "\e554"
-  &.local_printshop::before
-    content: "\e555"
-  &.local_see::before
-    content: "\e557"
-  &.local_shipping::before
-    content: "\e558"
-  &.local_taxi::before
-    content: "\e559"
-  &.location_city::before
-    content: "\e7f1"
-  &.location_disabled::before
-    content: "\e1b6"
-  &.location_off::before
-    content: "\e0c7"
-  &.location_on::before
-    content: "\e0c8"
-  &.location_searching::before
-    content: "\e1b7"
-  &.lock::before
-    content: "\e897"
-  &.lock_open::before
-    content: "\e898"
-  &.lock_outline::before
-    content: "\e899"
-  &.looks::before
-    content: "\e3fc"
-  &.looks_3::before
-    content: "\e3fb"
-  &.looks_4::before
-    content: "\e3fd"
-  &.looks_5::before
-    content: "\e3fe"
-  &.looks_6::before
-    content: "\e3ff"
-  &.looks_one::before
-    content: "\e400"
-  &.looks_two::before
-    content: "\e401"
-  &.loop::before
-    content: "\e028"
-  &.loupe::before
-    content: "\e402"
-  &.loyalty::before
-    content: "\e89a"
-  &.mail::before
-    content: "\e158"
-  &.map::before
-    content: "\e55b"
-  &.markunread::before
-    content: "\e159"
-  &.markunread_mailbox::before
-    content: "\e89b"
-  &.memory::before
-    content: "\e322"
-  &.menu::before
-    content: "\e5d2"
-  &.merge_type::before
-    content: "\e252"
-  &.message::before
-    content: "\e0c9"
-  &.mic::before
-    content: "\e029"
-  &.mic_none::before
-    content: "\e02a"
-  &.mic_off::before
-    content: "\e02b"
-  &.mms::before
-    content: "\e618"
-  &.mode_comment::before
-    content: "\e253"
-  &.mode_edit::before
-    content: "\e254"
-  &.money_off::before
-    content: "\e25c"
-  &.monochrome_photos::before
-    content: "\e403"
-  &.mood::before
-    content: "\e7f2"
-  &.mood_bad::before
-    content: "\e7f3"
-  &.more::before
-    content: "\e619"
-  &.more_horiz::before
-    content: "\e5d3"
-  &.more_vert::before
-    content: "\e5d4"
-  &.mouse::before
-    content: "\e323"
-  &.movie::before
-    content: "\e02c"
-  &.movie_creation::before
-    content: "\e404"
-  &.music_note::before
-    content: "\e405"
-  &.my_location::before
-    content: "\e55c"
-  &.nature::before
-    content: "\e406"
-  &.nature_people::before
-    content: "\e407"
-  &.navigate_before::before
-    content: "\e408"
-  &.navigate_next::before
-    content: "\e409"
-  &.navigation::before
-    content: "\e55d"
-  &.network_cell::before
-    content: "\e1b9"
-  &.network_locked::before
-    content: "\e61a"
-  &.network_wifi::before
-    content: "\e1ba"
-  &.new_releases::before
-    content: "\e031"
-  &.nfc::before
-    content: "\e1bb"
-  &.no_sim::before
-    content: "\e0cc"
-  &.not_interested::before
-    content: "\e033"
-  &.note_add::before
-    content: "\e89c"
-  &.notifications::before
-    content: "\e7f4"
-  &.notifications_active::before
-    content: "\e7f7"
-  &.notifications_none::before
-    content: "\e7f5"
-  &.notifications_off::before
-    content: "\e7f6"
-  &.notifications_paused::before
-    content: "\e7f8"
-  &.offline_pin::before
-    content: "\e90a"
-  &.ondemand_video::before
-    content: "\e63a"
-  &.open_in_browser::before
-    content: "\e89d"
-  &.open_in_new::before
-    content: "\e89e"
-  &.open_with::before
-    content: "\e89f"
-  &.pages::before
-    content: "\e7f9"
-  &.pageview::before
-    content: "\e8a0"
-  &.palette::before
-    content: "\e40a"
-  &.panorama::before
-    content: "\e40b"
-  &.panorama_fish_eye::before
-    content: "\e40c"
-  &.panorama_horizontal::before
-    content: "\e40d"
-  &.panorama_vertical::before
-    content: "\e40e"
-  &.panorama_wide_angle::before
-    content: "\e40f"
-  &.party_mode::before
-    content: "\e7fa"
-  &.pause::before
-    content: "\e034"
-  &.pause_circle_filled::before
-    content: "\e035"
-  &.pause_circle_outline::before
-    content: "\e036"
-  &.payment::before
-    content: "\e8a1"
-  &.people::before
-    content: "\e7fb"
-  &.people_outline::before
-    content: "\e7fc"
-  &.perm_camera_mic::before
-    content: "\e8a2"
-  &.perm_contact_calendar::before
-    content: "\e8a3"
-  &.perm_data_setting::before
-    content: "\e8a4"
-  &.perm_device_information::before
-    content: "\e8a5"
-  &.perm_identity::before
-    content: "\e8a6"
-  &.perm_media::before
-    content: "\e8a7"
-  &.perm_phone_msg::before
-    content: "\e8a8"
-  &.perm_scan_wifi::before
-    content: "\e8a9"
-  &.person::before
-    content: "\e7fd"
-  &.person_add::before
-    content: "\e7fe"
-  &.person_outline::before
-    content: "\e7ff"
-  &.person_pin::before
-    content: "\e55a"
-  &.personal_video::before
-    content: "\e63b"
-  &.phone::before
-    content: "\e0cd"
-  &.phone_android::before
-    content: "\e324"
-  &.phone_bluetooth_speaker::before
-    content: "\e61b"
-  &.phone_forwarded::before
-    content: "\e61c"
-  &.phone_in_talk::before
-    content: "\e61d"
-  &.phone_iphone::before
-    content: "\e325"
-  &.phone_locked::before
-    content: "\e61e"
-  &.phone_missed::before
-    content: "\e61f"
-  &.phone_paused::before
-    content: "\e620"
-  &.phonelink::before
-    content: "\e326"
-  &.phonelink_erase::before
-    content: "\e0db"
-  &.phonelink_lock::before
-    content: "\e0dc"
-  &.phonelink_off::before
-    content: "\e327"
-  &.phonelink_ring::before
-    content: "\e0dd"
-  &.phonelink_setup::before
-    content: "\e0de"
-  &.photo::before
-    content: "\e410"
-  &.photo_album::before
-    content: "\e411"
-  &.photo_camera::before
-    content: "\e412"
-  &.photo_library::before
-    content: "\e413"
-  &.photo_size_select_actual::before
-    content: "\e432"
-  &.photo_size_select_large::before
-    content: "\e433"
-  &.photo_size_select_small::before
-    content: "\e434"
-  &.picture_as_pdf::before
-    content: "\e415"
-  &.picture_in_picture::before
-    content: "\e8aa"
-  &.pin_drop::before
-    content: "\e55e"
-  &.place::before
-    content: "\e55f"
-  &.play_arrow::before
-    content: "\e037"
-  &.play_circle_filled::before
-    content: "\e038"
-  &.play_circle_outline::before
-    content: "\e039"
-  &.play_for_work::before
-    content: "\e906"
-  &.playlist_add::before
-    content: "\e03b"
-  &.plus_one::before
-    content: "\e800"
-  &.poll::before
-    content: "\e801"
-  &.polymer::before
-    content: "\e8ab"
-  &.portable_wifi_off::before
-    content: "\e0ce"
-  &.portrait::before
-    content: "\e416"
-  &.power::before
-    content: "\e63c"
-  &.power_input::before
-    content: "\e336"
-  &.power_settings_new::before
-    content: "\e8ac"
-  &.present_to_all::before
-    content: "\e0df"
-  &.print::before
-    content: "\e8ad"
-  &.public::before
-    content: "\e80b"
-  &.publish::before
-    content: "\e255"
-  &.query_builder::before
-    content: "\e8ae"
-  &.question_answer::before
-    content: "\e8af"
-  &.queue::before
-    content: "\e03c"
-  &.queue_music::before
-    content: "\e03d"
-  &.radio::before
-    content: "\e03e"
-  &.radio_button_checked::before
-    content: "\e837"
-  &.radio_button_unchecked::before
-    content: "\e836"
-  &.rate_review::before
-    content: "\e560"
-  &.receipt::before
-    content: "\e8b0"
-  &.recent_actors::before
-    content: "\e03f"
-  &.redeem::before
-    content: "\e8b1"
-  &.redo::before
-    content: "\e15a"
-  &.refresh::before
-    content: "\e5d5"
-  &.remove::before
-    content: "\e15b"
-  &.remove_circle::before
-    content: "\e15c"
-  &.remove_circle_outline::before
-    content: "\e15d"
-  &.remove_red_eye::before
-    content: "\e417"
-  &.reorder::before
-    content: "\e8fe"
-  &.repeat::before
-    content: "\e040"
-  &.repeat_one::before
-    content: "\e041"
-  &.replay::before
-    content: "\e042"
-  &.replay_10::before
-    content: "\e059"
-  &.replay_30::before
-    content: "\e05a"
-  &.replay_5::before
-    content: "\e05b"
-  &.reply::before
-    content: "\e15e"
-  &.reply_all::before
-    content: "\e15f"
-  &.report::before
-    content: "\e160"
-  &.report_problem::before
-    content: "\e8b2"
-  &.restaurant_menu::before
-    content: "\e561"
-  &.restore::before
-    content: "\e8b3"
-  &.ring_volume::before
-    content: "\e0d1"
-  &.room::before
-    content: "\e8b4"
-  &.rotate_90_degrees_ccw::before
-    content: "\e418"
-  &.rotate_left::before
-    content: "\e419"
-  &.rotate_right::before
-    content: "\e41a"
-  &.router::before
-    content: "\e328"
-  &.satellite::before
-    content: "\e562"
-  &.save::before
-    content: "\e161"
-  &.scanner::before
-    content: "\e329"
-  &.schedule::before
-    content: "\e8b5"
-  &.school::before
-    content: "\e80c"
-  &.screen_lock_landscape::before
-    content: "\e1be"
-  &.screen_lock_portrait::before
-    content: "\e1bf"
-  &.screen_lock_rotation::before
-    content: "\e1c0"
-  &.screen_rotation::before
-    content: "\e1c1"
-  &.sd_card::before
-    content: "\e623"
-  &.sd_storage::before
-    content: "\e1c2"
-  &.search::before
-    content: "\e8b6"
-  &.security::before
-    content: "\e32a"
-  &.select_all::before
-    content: "\e162"
-  &.send::before
-    content: "\e163"
-  &.settings::before
-    content: "\e8b8"
-  &.settings_applications::before
-    content: "\e8b9"
-  &.settings_backup_restore::before
-    content: "\e8ba"
-  &.settings_bluetooth::before
-    content: "\e8bb"
-  &.settings_brightness::before
-    content: "\e8bd"
-  &.settings_cell::before
-    content: "\e8bc"
-  &.settings_ethernet::before
-    content: "\e8be"
-  &.settings_input_antenna::before
-    content: "\e8bf"
-  &.settings_input_component::before
-    content: "\e8c0"
-  &.settings_input_composite::before
-    content: "\e8c1"
-  &.settings_input_hdmi::before
-    content: "\e8c2"
-  &.settings_input_svideo::before
-    content: "\e8c3"
-  &.settings_overscan::before
-    content: "\e8c4"
-  &.settings_phone::before
-    content: "\e8c5"
-  &.settings_power::before
-    content: "\e8c6"
-  &.settings_remote::before
-    content: "\e8c7"
-  &.settings_system_daydream::before
-    content: "\e1c3"
-  &.settings_voice::before
-    content: "\e8c8"
-  &.share::before
-    content: "\e80d"
-  &.shop::before
-    content: "\e8c9"
-  &.shop_two::before
-    content: "\e8ca"
-  &.shopping_basket::before
-    content: "\e8cb"
-  &.shopping_cart::before
-    content: "\e8cc"
-  &.shuffle::before
-    content: "\e043"
-  &.signal_cellular_4_bar::before
-    content: "\e1c8"
-  &.signal_cellular_connected_no_internet_4_bar::before
-    content: "\e1cd"
-  &.signal_cellular_no_sim::before
-    content: "\e1ce"
-  &.signal_cellular_null::before
-    content: "\e1cf"
-  &.signal_cellular_off::before
-    content: "\e1d0"
-  &.signal_wifi_4_bar::before
-    content: "\e1d8"
-  &.signal_wifi_4_bar_lock::before
-    content: "\e1d9"
-  &.signal_wifi_off::before
-    content: "\e1da"
-  &.sim_card::before
-    content: "\e32b"
-  &.sim_card_alert::before
-    content: "\e624"
-  &.skip_next::before
-    content: "\e044"
-  &.skip_previous::before
-    content: "\e045"
-  &.slideshow::before
-    content: "\e41b"
-  &.smartphone::before
-    content: "\e32c"
-  &.sms::before
-    content: "\e625"
-  &.sms_failed::before
-    content: "\e626"
-  &.snooze::before
-    content: "\e046"
-  &.sort::before
-    content: "\e164"
-  &.sort_by_alpha::before
-    content: "\e053"
-  &.space_bar::before
-    content: "\e256"
-  &.speaker::before
-    content: "\e32d"
-  &.speaker_group::before
-    content: "\e32e"
-  &.speaker_notes::before
-    content: "\e8cd"
-  &.speaker_phone::before
-    content: "\e0d2"
-  &.spellcheck::before
-    content: "\e8ce"
-  &.star::before
-    content: "\e838"
-  &.star_border::before
-    content: "\e83a"
-  &.star_half::before
-    content: "\e839"
-  &.stars::before
-    content: "\e8d0"
-  &.stay_current_landscape::before
-    content: "\e0d3"
-  &.stay_current_portrait::before
-    content: "\e0d4"
-  &.stay_primary_landscape::before
-    content: "\e0d5"
-  &.stay_primary_portrait::before
-    content: "\e0d6"
-  &.stop::before
-    content: "\e047"
-  &.storage::before
-    content: "\e1db"
-  &.store::before
-    content: "\e8d1"
-  &.store_mall_directory::before
-    content: "\e563"
-  &.straighten::before
-    content: "\e41c"
-  &.strikethrough_s::before
-    content: "\e257"
-  &.style::before
-    content: "\e41d"
-  &.subject::before
-    content: "\e8d2"
-  &.subtitles::before
-    content: "\e048"
-  &.supervisor_account::before
-    content: "\e8d3"
-  &.surround_sound::before
-    content: "\e049"
-  &.swap_calls::before
-    content: "\e0d7"
-  &.swap_horiz::before
-    content: "\e8d4"
-  &.swap_vert::before
-    content: "\e8d5"
-  &.swap_vertical_circle::before
-    content: "\e8d6"
-  &.switch_camera::before
-    content: "\e41e"
-  &.switch_video::before
-    content: "\e41f"
-  &.sync::before
-    content: "\e627"
-  &.sync_disabled::before
-    content: "\e628"
-  &.sync_problem::before
-    content: "\e629"
-  &.system_update::before
-    content: "\e62a"
-  &.system_update_alt::before
-    content: "\e8d7"
-  &.tab::before
-    content: "\e8d8"
-  &.tab_unselected::before
-    content: "\e8d9"
-  &.tablet::before
-    content: "\e32f"
-  &.tablet_android::before
-    content: "\e330"
-  &.tablet_mac::before
-    content: "\e331"
-  &.tag_faces::before
-    content: "\e420"
-  &.tap_and_play::before
-    content: "\e62b"
-  &.terrain::before
-    content: "\e564"
-  &.text_format::before
-    content: "\e165"
-  &.textsms::before
-    content: "\e0d8"
-  &.texture::before
-    content: "\e421"
-  &.theaters::before
-    content: "\e8da"
-  &.thumb_down::before
-    content: "\e8db"
-  &.thumb_up::before
-    content: "\e8dc"
-  &.thumbs_up_down::before
-    content: "\e8dd"
-  &.time_to_leave::before
-    content: "\e62c"
-  &.timelapse::before
-    content: "\e422"
-  &.timer::before
-    content: "\e425"
-  &.timer_10::before
-    content: "\e423"
-  &.timer_3::before
-    content: "\e424"
-  &.timer_off::before
-    content: "\e426"
-  &.toc::before
-    content: "\e8de"
-  &.today::before
-    content: "\e8df"
-  &.toll::before
-    content: "\e8e0"
-  &.tonality::before
-    content: "\e427"
-  &.toys::before
-    content: "\e332"
-  &.track_changes::before
-    content: "\e8e1"
-  &.traffic::before
-    content: "\e565"
-  &.transform::before
-    content: "\e428"
-  &.translate::before
-    content: "\e8e2"
-  &.trending_down::before
-    content: "\e8e3"
-  &.trending_flat::before
-    content: "\e8e4"
-  &.trending_up::before
-    content: "\e8e5"
-  &.tune::before
-    content: "\e429"
-  &.turned_in::before
-    content: "\e8e6"
-  &.turned_in_not::before
-    content: "\e8e7"
-  &.tv::before
-    content: "\e333"
-  &.undo::before
-    content: "\e166"
-  &.unfold_less::before
-    content: "\e5d6"
-  &.unfold_more::before
-    content: "\e5d7"
-  &.usb::before
-    content: "\e1e0"
-  &.verified_user::before
-    content: "\e8e8"
-  &.vertical_align_bottom::before
-    content: "\e258"
-  &.vertical_align_center::before
-    content: "\e259"
-  &.vertical_align_top::before
-    content: "\e25a"
-  &.vibration::before
-    content: "\e62d"
-  &.video_library::before
-    content: "\e04a"
-  &.videocam::before
-    content: "\e04b"
-  &.videocam_off::before
-    content: "\e04c"
-  &.view_agenda::before
-    content: "\e8e9"
-  &.view_array::before
-    content: "\e8ea"
-  &.view_carousel::before
-    content: "\e8eb"
-  &.view_column::before
-    content: "\e8ec"
-  &.view_comfy::before
-    content: "\e42a"
-  &.view_compact::before
-    content: "\e42b"
-  &.view_day::before
-    content: "\e8ed"
-  &.view_headline::before
-    content: "\e8ee"
-  &.view_list::before
-    content: "\e8ef"
-  &.view_module::before
-    content: "\e8f0"
-  &.view_quilt::before
-    content: "\e8f1"
-  &.view_stream::before
-    content: "\e8f2"
-  &.view_week::before
-    content: "\e8f3"
-  &.vignette::before
-    content: "\e435"
-  &.visibility::before
-    content: "\e8f4"
-  &.visibility_off::before
-    content: "\e8f5"
-  &.voice_chat::before
-    content: "\e62e"
-  &.voicemail::before
-    content: "\e0d9"
-  &.volume_down::before
-    content: "\e04d"
-  &.volume_mute::before
-    content: "\e04e"
-  &.volume_off::before
-    content: "\e04f"
-  &.volume_up::before
-    content: "\e050"
-  &.vpn_key::before
-    content: "\e0da"
-  &.vpn_lock::before
-    content: "\e62f"
-  &.wallpaper::before
-    content: "\e1bc"
-  &.warning::before
-    content: "\e002"
-  &.watch::before
-    content: "\e334"
-  &.wb_auto::before
-    content: "\e42c"
-  &.wb_cloudy::before
-    content: "\e42d"
-  &.wb_incandescent::before
-    content: "\e42e"
-  &.wb_iridescent::before
-    content: "\e436"
-  &.wb_sunny::before
-    content: "\e430"
-  &.wc::before
-    content: "\e63d"
-  &.web::before
-    content: "\e051"
-  &.whatshot::before
-    content: "\e80e"
-  &.widgets::before
-    content: "\e1bd"
-  &.wifi::before
-    content: "\e63e"
-  &.wifi_lock::before
-    content: "\e1e1"
-  &.wifi_tethering::before
-    content: "\e1e2"
-  &.work::before
-    content: "\e8f9"
-  &.wrap_text::before
-    content: "\e25b"
-  &.youtube_searched_for::before
-    content: "\e8fa"
-  &.zoom_in::before
-    content: "\e8ff"
-  &.zoom_out::before
-    content: "\e900"
diff --git a/components/form/index.jsx b/components/form/index.jsx
index 8393f933..c5654a97 100644
--- a/components/form/index.jsx
+++ b/components/form/index.jsx
@@ -1,6 +1,6 @@
-/* global React */
+import React from 'react';
 
-import { addons } from 'react/addons';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import style from './style';
 import Autocomplete from '../autocomplete';
 import Dropdown from '../dropdown';
@@ -9,7 +9,7 @@ import Input from '../input';
 import Switch from '../switch';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Form',
 
diff --git a/components/form/style.sass b/components/form/style.sass
new file mode 100644
index 00000000..c099dd31
--- /dev/null
+++ b/components/form/style.sass
@@ -0,0 +1,5 @@
+.root {
+  & > :last-child {
+    margin-bottom: 0 !important;
+  }
+}
diff --git a/components/form/style.styl b/components/form/style.styl
deleted file mode 100644
index 934875a1..00000000
--- a/components/form/style.styl
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../constants'
-
-:local(.root)
-  & > :last-child
-    margin-bottom                         : 0 !important
diff --git a/components/index.js b/components/index.js
index a36869e3..3a7f9df3 100644
--- a/components/index.js
+++ b/components/index.js
@@ -1,22 +1,25 @@
 module.exports = {
-  Aside: require('./aside'),
   Autocomplete: require('./autocomplete'),
   Button: require('./button'),
+  Calendar: require('./calendar'),
   Card: require('./card'),
+  Checkbox: require('./checkbox'),
+  Clock: require('./clock'),
+  DatePicker: require('./date_picker'),
   Dialog: require('./dialog'),
+  Drawer: require('./drawer'),
   Dropdown: require('./dropdown'),
-  Fieldset: require('./fieldset'),
   FontIcon: require('./font_icon'),
   Form: require('./form'),
   Input: require('./input'),
   Link: require('./link'),
   List: require('./list'),
-  Loading: require('./loading'),
   Navigation: require('./navigation'),
   ProgressBar: require('./progress_bar'),
   Ripple: require('./ripple'),
   Slider: require('./slider'),
   Switch: require('./switch'),
   Tab: require('./tabs/tab'),
-  Tabs: require('./tabs/tabs')
+  Tabs: require('./tabs/tabs'),
+  TimePicker: require('./time_picker')
 };
diff --git a/components/input/index.jsx b/components/input/index.jsx
index eaf5cc23..8a948020 100644
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@@ -1,10 +1,9 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import style from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style.scss';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Input',
 
@@ -12,6 +11,7 @@ export default React.createClass({
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     error: React.PropTypes.string,
+    floating: React.PropTypes.bool,
     label: React.PropTypes.string,
     multiline: React.PropTypes.bool,
     onBlur: React.PropTypes.func,
@@ -27,6 +27,7 @@ export default React.createClass({
     return {
       className: '',
       disabled: false,
+      floating: true,
       multiline: false,
       required: false,
       type: 'text'
@@ -34,121 +35,74 @@ export default React.createClass({
   },
 
   getInitialState () {
-    return {
-      checked: this.props.value,
-      error: this.props.error,
-      touch: ['checkbox', 'radio'].indexOf(this.props.type) !== -1,
-      value: this.props.value,
-      focus: false,
-      valid: false
-    };
-  },
-
-  onBlur (event) {
-    this.setState({focus: false});
-    if (this.props.onBlur) this.props.onBlur(event, this);
+    return { value: this.props.value };
   },
 
   onChange (event) {
-    if (this.state.touch) {
-      this.setState({checked: event.target.checked, error: undefined});
-    } else {
-      this.setState({value: event.target.value, error: undefined});
-    }
-    if (this.props.onChange) this.props.onChange(event, this);
-  },
-
-  onFocus (event) {
-    this.setState({focus: true});
-    if (this.props.onFocus) this.props.onFocus(event, this);
-  },
-
-  onKeyPress (event) {
-    this.setState({focus: true});
-    if (this.props.onKeyPress) this.props.onKeyPress(event, this);
+    this.setState({value: event.target.value}, () => {
+      if (this.props.onChange) this.props.onChange(event, this);
+    });
   },
 
   renderInput () {
+    let className = style.input;
+    if (this.state.value && this.state.value.length > 0) className += ` ${style.filled}`;
+
     if (this.props.multiline) {
       return (
         <textarea
           ref='input'
+          role='input'
           {...this.props}
+          className={className}
           onChange={this.onChange}
-          onKeyPress={this.onKeyPress}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
           value={this.state.value} />
       );
-    } else if (this.props.type === 'file') {
-      return (
-        <input
-          ref='input'
-          {...this.props}
-          value={undefined}
-          onChange={this.onChange} />
-      );
     } else {
       return (
         <input
           ref='input'
+          role='input'
           {...this.props}
+          className={className}
           value={this.state.value}
-          checked={this.state.checked}
-          onBlur={this.onBlur}
-          onChange={this.onChange}
-          onFocus={this.onFocus}
-          onKeyPress={this.onKeyPress} />
+          onChange={this.onChange} />
       );
     }
   },
 
   render () {
-    let className = `${style.root} ${this.props.className}`;
-    if (this.props.type) className += ` ${this.props.type}`;
-    if (this.state.checked) className += ' checked';
-    if (this.props.disabled) className += ' disabled';
-    if (this.state.error) className += ' error';
-    if (this.state.focus) className += ' focus';
-    if (this.props.type === 'hidden') className += ' hidden';
-    if (this.state.touch) className += ' touch';
-    if (this.props.type === 'radio') className += ' radio';
-    if (this.state.value && this.state.value.length > 0) className += ' valid';
+    let className = style.root;
+    let labelClassName = style.label;
+    if (this.props.error) className += ` ${style.errored}`;
+    if (this.props.disabled) className += ` ${style.disabled}`;
+    if (this.props.className) className += ` ${this.props.className}`;
+    if (this.props.type === 'hidden') className += ` ${style.hidden}`;
+    if (!this.props.floating) labelClassName += ` ${style.fixed}`;
 
     return (
       <div data-react-toolbox='input' className={className}>
         { this.renderInput() }
-        <span className='bar'></span>
-        { this.props.label ? <label>{this.props.label}</label> : null }
-        { this.state.error ? <span className='error'>{this.state.error}</span> : null }
+        <span className={style.bar}></span>
+        { this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
+        { this.props.error ? <span className={style.error}>{this.props.error}</span> : null }
       </div>
     );
   },
 
   blur () {
-    this.refs.input.getDOMNode().blur();
+    this.refs.input.blur();
   },
 
   focus () {
-    this.refs.input.getDOMNode().focus();
+    this.refs.input.focus();
   },
 
   getValue () {
-    if (this.props.type === 'file') {
-      return this.state.value;
-    } else if (this.refs.input) {
-      return this.refs.input.getDOMNode()[this.state.touch ? 'checked' : 'value'];
-    }
+    return this.state.value;
   },
 
-  setError (data = 'Unknown error') {
-    this.setState({error: this.props.error || data});
-  },
-
-  setValue (argData) {
-    let data = this.state.touch && argData === undefined ? false : argData;
-    let attributes = { value: data };
-    if (this.state.touch && data) attributes.checked = data;
-    this.setState(attributes);
+  setValue (value) {
+    this.setState({value: value});
   }
 });
diff --git a/components/input/style.scss b/components/input/style.scss
new file mode 100644
index 00000000..dfc322d3
--- /dev/null
+++ b/components/input/style.scss
@@ -0,0 +1,125 @@
+@import "../variables";
+@import "../mixins";
+
+$input-padding: 2 * $unit;
+$input-field-height: 1.6 * $unit;
+$input-field-padding: .8 * $unit;
+$input-field-font-size: 1.6 * $unit;
+$input-label-font-size: 1.2 * $unit;
+$input-focus-label-top: .6 * $unit;
+$input-text-background-color: transparent !default;
+$input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+$input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
+$input-text-disabled-color: $input-text-bottom-border-color !default;
+$input-text-disabled-text-color: $input-text-label-color !default;
+$input-text-error-color: unquote("rgb(222, 50, 38)") !default;
+
+.root {
+  position: relative;
+  padding: $input-padding 0;
+}
+
+.input {
+  display: block;
+  width: 100%;
+  padding: $input-field-padding 0;
+  font-size: $input-field-font-size;
+  color: $color-text;
+  background-color: $input-text-background-color;
+  border: 0;
+  border-bottom: 1px solid $input-text-bottom-border-color;
+  outline: none;
+
+  &:focus {
+    ~ .bar:before, ~ .bar:after {
+      width: 50%;
+    }
+
+    ~ .label:not(.fixed) {
+      color: $input-text-highlight-color;
+    }
+  }
+
+  &:focus, &.filled {
+    ~ .label:not(.fixed) {
+      top: $input-focus-label-top;
+      font-size: $input-label-font-size;
+    }
+  }
+
+  &.filled ~ .label.fixed {
+    display: none;
+  }
+}
+
+.label {
+  position: absolute;
+  top: $input-padding + $input-field-padding;
+  left: 0;
+  font-size: $input-field-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  pointer-events: none;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: top, font-size, color;
+}
+
+.bar {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &:before, &:after {
+    @include material-animation-default();
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    height: 2px;
+    content: "";
+    background-color: $input-text-highlight-color;
+    transition-property: width, background-color;
+  }
+
+  &:before {
+    left: 50%;
+  }
+
+  &:after {
+    right: 50%;
+  }
+}
+
+.error {
+  font-size: $input-label-font-size;
+  line-height: 1.6 * $unit;
+  color: $input-text-error-color;
+}
+
+.disabled > .input {
+  color: $input-text-disabled-text-color;
+  border-bottom-style: dotted;
+}
+
+.errored {
+  padding-bottom: 0;
+
+  > .input {
+    border-bottom-color: $input-text-error-color;
+
+    &:focus {
+      ~ .label:not(.fixed) {
+        color: $input-text-error-color;
+      }
+
+      ~ .bar:before, ~ .bar:after {
+        background-color: $input-text-error-color;
+      }
+    }
+  }
+}
+
+.hidden {
+  display: none;
+}
diff --git a/components/input/style.styl b/components/input/style.styl
deleted file mode 100644
index 089982bb..00000000
--- a/components/input/style.styl
+++ /dev/null
@@ -1,171 +0,0 @@
-@import '../constants'
-
-:local(.root)
-  position                            : relative
-  margin-bottom                       : SPACE
-  input, textarea, label
-    font-size                         : FONT_SIZE_NORMAL
-    font-weight                       : FONT_WEIGHT_NORMAL
-
-  // -- Style
-  RADIUS = (SPACE / 8)
-  &.touch
-    // -- Children
-    input
-      pointer-events                  : all
-      z-index                         : 2
-      position                        : absolute
-      left                            : 0
-      width                           : 100%
-      height                          : 100%
-      opacity                         : 0
-    .bar, label
-      position                        : relative
-      display                         : inline-block
-      vertical-align                  : middle
-    .bar
-      width                           : SPACE
-      height                          : SPACE
-      margin-right                    : (SPACE / 1.32)
-      border-radius                   : RADIUS
-      box-shadow                      : inset 0 0 0 RADIUS TEXT
-      transition-property               background-color, box-shadow
-      transition-duration               ANIMATION_DURATION
-      transition-timing-function        ANIMATION_EASE
-      &:before
-        z-index                       : -1
-        position                      : absolute
-        left                          : -(SPACE)
-        top                           : -(SPACE)
-        display                       : block
-        content                       : ""
-        width                         : SIZE = (3 * SPACE)
-        height                        : SIZE
-        border-radius                 : 50%
-        opacity                       : 0
-      &:after
-        display                       : block
-        width                         : SPACE
-        color                         : WHITE
-        text-align                    : center
-        transform                       scale(0)
-        transition                      transform ANIMATION_DURATION ANIMATION_DELAY ANIMATION_EASE
-    label
-      font-size                       : FONT_SIZE_SMALL
-      color                           : TEXT
-    // -- Style
-    &:not(.radio) .bar:after
-      content                         : "✓"
-    &.radio .bar
-      border-radius                   : 50%
-    &.disabled .bar
-      box-shadow                        inset 0 0 0 RADIUS DIVIDER
-    &.checked
-      &.radio .bar
-        box-shadow                      : inset 0 0 0 RADIUS ACCENT, inset 0 0 0 (RADIUS * 2.5) WHITE
-      &:not(.radio) .bar
-        box-shadow                      : none
-      .bar
-        background-color                : ACCENT
-        &:before
-          background-color              : alpha(ACCENT, .5)
-          animation-name                  ripple-touch
-          animation-iteration-count       1
-          animation-timing-function       ANIMATION_EASE
-          animation-duration              (2 * ANIMATION_DURATION)
-        &:after
-          transform                       scale(1)
-
-  &:not(.touch)
-    // -- Stylesheets
-    &.focus
-      input, textarea
-        outline                       : none
-        ~ .bar:before, ~ .bar:after
-          width                       : 50%
-        &:invalid
-          &  ~ label
-            color                     : CANCEL
-          & ~ .bar:before, & ~ .bar:after
-            background-color          : CANCEL
-    &.focus , &.valid
-      input, textarea
-        & ~ label
-          top                         : -(SPACE / 2)
-          font-size                   : FONT_SIZE_TINY
-          color                       : PRIMARY
-    input[type="date"]
-      & ~ label
-          top                         : -(SPACE / 2)
-          font-size                   : FONT_SIZE_TINY
-          color                       : PRIMARY
-    &:not(.focus)
-      input, textarea
-          &:invalid:not(:required)
-            border-bottom-color       : CANCEL
-    &.error
-      input, textarea
-        border-bottom-color           : CANCEL
-
-    // -- Children
-    input, textarea
-      display                         : block
-      padding                         : (SPACE / 2) 0
-      width                           : 100%
-      color                           : TEXT
-      background-color                : transparent
-      border                          : none
-      border-bottom                   : 1px solid DIVIDER
-      // -- Attributes
-      &:disabled
-        color                         : TEXT_SECONDARY
-        border-bottom-style           : dotted
-
-    label
-      position                        : absolute
-      left                            : 0
-      top                             : (SPACE / 2)
-      color                           : TEXT_SECONDARY
-      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              : PRIMARY
-        transition-property             width, background-color
-        transition-duration             ANIMATION_DURATION
-        transition-timing-function      ANIMATION_EASE
-      &:before
-        left                          : 50%
-      &:after
-        right                         : 50%
-
-  &.hidden
-    display                           : none
-
-  // -- Children
-  label
-    pointer-events                    : none
-  .error
-    position                          : absolute
-    right                             : (SPACE / 4)
-    bottom                            : -(SPACE / 1.25)
-    font-size                         : (FONT_SIZE_TINY * 0.9)
-    color                             : CANCEL
-
-@keyframes ripple-touch
-  0%
-    transform                           scale(0)
-    opacity                           : 1
-  100%
-    transform                           scale(1)
-    opacity                           : 0
diff --git a/components/link/index.jsx b/components/link/index.jsx
index 296900e3..c1ab0622 100644
--- a/components/link/index.jsx
+++ b/components/link/index.jsx
@@ -1,11 +1,10 @@
-/* global React */
-
-import { addons } from 'react/addons';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import style from './style';
 import FontIcon from '../font_icon';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Link',
 
@@ -25,20 +24,16 @@ export default React.createClass({
     };
   },
 
-  onClick (event) {
-    if (this.props.onClick) {
-      this.props.onClick(event, this);
-    }
-  },
-
   render () {
+    let className = style.root;
+    if (this.props.className) className += ` ${this.props.className}`;
     return (
       <a
+        {...this.props}
         data-react-toolbox='link'
         data-flex='horizontal center'
-        href={`${this.props.route}`}
-        className={`${style.root} ${this.props.className}`}
-        onClick={this.onClick}
+        href={this.props.route}
+        className={className}
       >
         { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
         { this.props.label ? <abbr>{this.props.label}</abbr> : null }
diff --git a/components/link/style.scss b/components/link/style.scss
new file mode 100644
index 00000000..b84cac59
--- /dev/null
+++ b/components/link/style.scss
@@ -0,0 +1,34 @@
+@import "../variables";
+
+.icon {
+  margin-right: $unit;
+  font-size: 1.8 * $unit;
+}
+
+.root {
+  position: relative;
+  overflow: hidden;
+  transition: opacity $animation-duration $animation-curve-default;
+
+  &:not(.active) {
+    font-weight: $font-weight-thin;
+    opacity: .5;
+  }
+
+  &:hover, &:active {
+    opacity: 1;
+  }
+
+  > * {
+    vertical-align: middle;
+  }
+
+  > abbr {
+    text-transform: capitalize;
+  }
+
+  > small {
+    font-size: $font-size-tiny;
+    text-align: center;
+  }
+}
diff --git a/components/link/style.styl b/components/link/style.styl
deleted file mode 100644
index cc798ce6..00000000
--- a/components/link/style.styl
+++ /dev/null
@@ -1,26 +0,0 @@
-@import '../constants'
-
-:local(.icon)
-  margin-right                    : (SPACE / 2)
-  font-size                       : FONT_SIZE_BIG
-
-:local(.root)
-  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
-  > small
-    font-size                     : FONT_SIZE_TINY
-    text-align                    : center
diff --git a/components/list/index.jsx b/components/list/index.jsx
index 126ed669..c1534d9d 100644
--- a/components/list/index.jsx
+++ b/components/list/index.jsx
@@ -1,17 +1,16 @@
-/* global React */
-
-import { addons } from 'react/addons';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import style from './style';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'List',
 
   propTypes: {
     className: React.PropTypes.string,
     dataSource: React.PropTypes.array,
-    ItemFactory: React.PropTypes.func,
+    template: React.PropTypes.func,
     onClick: React.PropTypes.func,
     type: React.PropTypes.string
   },
@@ -38,7 +37,7 @@ export default React.createClass({
     const items = this.props.dataSource.map((data, index) => {
       return (
         <li key={index} onClick={this.onClick.bind(null, data, index)}>
-          {this.props.itemFactory(data, index)}
+          {this.props.template(data, index)}
         </li>
       );
     });
diff --git a/components/list/style.scss b/components/list/style.scss
new file mode 100644
index 00000000..3128e2b3
--- /dev/null
+++ b/components/list/style.scss
@@ -0,0 +1,25 @@
+@import "../variables";
+
+$list-color: unquote("rgb(#{$color-black})") !default;
+$list-background: unquote("rgb(#{$color-white})") !default;
+
+.root {
+  list-style: none;
+
+  &, a {
+    color: $list-color;
+  }
+
+  > li {
+    overflow: hidden;
+    background-color: $list-background;
+    box-shadow: $zdepth-shadow-1;
+    transition-timing-function: $animation-curve-default;
+    transition-duration: $animation-duration;
+    transition-property: box-shadow;
+
+    &:hover {
+      box-shadow: $zdepth-shadow-2;
+    }
+  }
+}
diff --git a/components/list/style.styl b/components/list/style.styl
deleted file mode 100644
index f879d94a..00000000
--- a/components/list/style.styl
+++ /dev/null
@@ -1,15 +0,0 @@
-@import '../constants'
-
-:local(.root)
-  list-style                      : none
-  &, a
-    color                         : TEXT
-  > li
-    overflow                      : hidden
-    background-color              : WHITE
-    box-shadow                    : ZDEPTH_SHADOW_1
-    transition-property           : box-shadow
-    transition-duration           : ANIMATION_DURATION
-    transition-timing-function    : ANIMATION_EASE
-    &:hover
-      box-shadow                  : ZDEPTH_SHADOW_2
diff --git a/components/loading/index.jsx b/components/loading/index.jsx
deleted file mode 100644
index bc6f31b3..00000000
--- a/components/loading/index.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/* global React */
-
-import { addons } from 'react/addons';
-require('./style');
-
-export default React.createClass({
-  mixins: [addons.PureRenderMixin],
-
-  displayName: 'Loading',
-
-  propTypes: {
-    type: React.PropTypes.string
-  },
-
-  getDefaultProps () {
-    return {
-      type: 'normal'
-    };
-  },
-
-  render () {
-    return (
-      <div data-component-loading={this.props.type} data-flex="vertical center">
-        <div></div><div></div><div></div>
-      </div>
-    );
-  }
-});
diff --git a/components/loading/loading.md b/components/loading/loading.md
deleted file mode 100644
index c9daf257..00000000
--- a/components/loading/loading.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Loading
-
-```
-var Loading = require('react-toolbox/components/loading');
-
-<Loading type='fullscreen' />
-```
-
-## Properties
-
-| Name              | Type          | Default         | Description|
-|:-                 |:-:            | :-              |:-|
-| **type**          | String        | normal          | Type of the component, overwrite this property if you need set a different stylesheet.|
diff --git a/components/loading/style.styl b/components/loading/style.styl
deleted file mode 100644
index bd1df171..00000000
--- a/components/loading/style.styl
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../constants'
-
-[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            : PRIMARY
-        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
diff --git a/components/mixins.scss b/components/mixins.scss
new file mode 100644
index 00000000..02a27fa9
--- /dev/null
+++ b/components/mixins.scss
@@ -0,0 +1,279 @@
+@import "./variables";
+
+//-- Typography
+@mixin typo-preferred-font($use-preferred: true) {
+  @if $use-preferred {
+    font-family: $preferred-font;
+  }
+}
+
+@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 11.2rem;
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -.04em;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 5.6rem;
+  font-weight: 400;
+  line-height: 1.35;
+  letter-spacing: -.02em;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 4.5rem;
+  font-weight: 400;
+  line-height: 4.8rem;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 3.4rem;
+  font-weight: 400;
+  line-height: 4rem;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-headline($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 2.4rem;
+  font-weight: 400;
+  line-height: 3.2rem;
+  -moz-osx-font-smoothing: grayscale;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-title($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 2rem;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: .02em;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.4rem;
+  letter-spacing: .04em;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.8rem;
+  letter-spacing: .04em;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.4rem;
+  line-height: 2.4rem;
+  letter-spacing: 0;
+
+  @if $use-preferred {
+    font-weight: 500;
+  } @else {
+    font-weight: bold;
+  }
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 2.4rem;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-caption($color-contrast: false, $use-preferred: false) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  position: relative;
+  font-size: 2.4rem;
+  font-style: italic;
+  font-weight: 300;
+  line-height: 1.35;
+  letter-spacing: .08em;
+
+  &:before {
+    position: absolute;
+    left: -.5em;
+    content: "“";
+  }
+
+  &:after {
+    margin-left: -.05em;
+    content: "”";
+  }
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-menu($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-button($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+//-- Shadows
+@mixin focus-shadow() {
+  box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
+}
+
+@mixin shadow-2dp() {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+                0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-3dp() {
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+                0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-4dp() {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+                0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-6dp() {
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+                0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-8dp() {
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+                0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-16dp() {
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+                0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+//-- Animations
+@mixin material-animation-fast-out-slow-in($duration: .2s) {
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: $duration;
+}
+
+@mixin material-animation-linear-out-slow-in($duration: .2s) {
+  transition-timing-function: $animation-curve-linear-out-slow-in;
+  transition-duration: $duration;
+}
+
+@mixin material-animation-fast-out-linear-in($duration: .2s) {
+  transition-timing-function: $animation-curve-fast-out-linear-in;
+  transition-duration: $duration;
+}
+
+@mixin material-animation-default($duration: .2s) {
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $duration;
+}
+
+// The frames are this way to prevent a flicker in Safari
+// See https://goo.gl/5luFDk
+@mixin ripple-loading($name, $width, $height, $opacity: 0.3) {
+  @keyframes #{$name} {
+    0% {
+      width: 0;
+      height: 0;
+      opacity: $opacity;
+    }
+
+    95% {
+      width: $width;
+      height: $height;
+      opacity: 0;
+    }
+
+    100% {
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+  }
+}
diff --git a/components/navigation/index.jsx b/components/navigation/index.jsx
index e739c468..9ba00f9c 100644
--- a/components/navigation/index.jsx
+++ b/components/navigation/index.jsx
@@ -1,12 +1,11 @@
-/* global React */
-
-import { addons } from 'react/addons';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import style from './style';
 import Button from '../button';
 import Link from '../link';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Navigation',
 
@@ -27,8 +26,8 @@ export default React.createClass({
   },
 
   render () {
-    let className = `${style.root} ${this.props.className}`;
-    if (this.props.type) className += ` ${this.props.type}`;
+    let className = `${style[this.props.type]}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     const buttons = this.props.actions.map((action, index) => {
       return <Button key={index} {...action} />;
diff --git a/components/navigation/style.scss b/components/navigation/style.scss
new file mode 100644
index 00000000..e49b251f
--- /dev/null
+++ b/components/navigation/style.scss
@@ -0,0 +1,46 @@
+@import "../variables";
+
+$navigation-space: $unit;
+$navigation-color: unquote("rgb(#{$color-black})") !default;
+$navigation-background: unquote("rgb(#{$color-white})") !default;
+
+.horizontal {
+  > * {
+    display: inline-block;
+    margin-right: $navigation-space;
+    font-size: $font-size-normal;
+    font-weight: $font-weight-normal;
+    color: $navigation-color;
+
+    > small {
+      padding: 0 $navigation-space;
+      margin-left: $navigation-space;
+      font-weight: $font-weight-bold;
+      color: $navigation-color;
+      background-color: $navigation-background;
+      border-radius: $navigation-space;
+    }
+  }
+}
+
+.vertical {
+  > * {
+    display: block;
+    padding: 0 $navigation-space;
+    line-height: $unit;
+    transition-property: box-shadow, opacity;
+
+    &.active {
+      box-shadow: inset 10 * $unit 0 $navigation-background;
+    }
+
+    > small {
+      float: right;
+      opacity: .5;
+    }
+  }
+}
+
+.default {
+  @extend .horizontal;
+}
diff --git a/components/navigation/style.styl b/components/navigation/style.styl
deleted file mode 100644
index 351f3393..00000000
--- a/components/navigation/style.styl
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../constants'
-
-:local(.root)
-  &.horizontal
-    > *
-      display                         : inline-block
-      margin-right                    : SPACE
-      color                           : WHITE
-      font-size                       : FONT_SIZE_SMALL
-      font-weight                     : FONT_WEIGHT_NORMAL !important
-      > small
-        margin-left                   : SIZE = (SPACE / 5)
-        padding                       : 0 SIZE
-        font-weight                   : FONT_WEIGHT_BOLD
-        color                         : BACKGROUND_DARK
-        background-color              : WHITE
-        border-radius                 : SIZE
-
-  &.vertical
-    > *
-      display                         : block
-      padding                         : 0 SPACE
-      line-height                     : UNIT
-      transition-property               box-shadow, opacity
-      &.active
-        box-shadow                      inset MENU_WIDTH 0 BACKGROUND
-      > small
-        float                         : right
-        opacity                       : 0.5
diff --git a/components/normalize.styl b/components/normalize.styl
deleted file mode 100644
index 091df59a..00000000
--- a/components/normalize.styl
+++ /dev/null
@@ -1,149 +0,0 @@
-// 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
diff --git a/components/progress_bar/__test__/index.spec.jsx b/components/progress_bar/__test__/index.spec.jsx
index 151a2d16..4e7a983b 100644
--- a/components/progress_bar/__test__/index.spec.jsx
+++ b/components/progress_bar/__test__/index.spec.jsx
@@ -1,4 +1,5 @@
 import expect from 'expect';
+import style from '../../progress_bar/style';
 import utils from '../../utils/testing';
 import ProgressBar from '../index';
 
@@ -56,8 +57,8 @@ describe('ProgressBar', function () {
 
     it('contains mode and className in its className', function () {
       progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', className: 'tight'});
-      expect(progressBar.props.className).toContain('determinate');
-      expect(progressBar.props.className).toContain('tight');
+      expect(progressBar.props.className).toContain(style.determinate);
+      expect(progressBar.props.className).toContain(style.tight);
     });
   });
 });
diff --git a/components/progress_bar/index.jsx b/components/progress_bar/index.jsx
index 90dfb2b0..677f9903 100644
--- a/components/progress_bar/index.jsx
+++ b/components/progress_bar/index.jsx
@@ -1,11 +1,10 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style';
 import prefixer from '../utils/prefixer';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   propTypes: {
     buffer: React.PropTypes.number,
@@ -45,8 +44,8 @@ export default React.createClass({
 
   renderCircular () {
     return (
-      <svg className={css.circle}>
-        <circle className={css.circlePath} style={this.circularStyle()} cx="30" cy="30" r="25" />
+      <svg className={style.circle}>
+        <circle className={style.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
       </svg>
     );
   },
@@ -66,26 +65,27 @@ export default React.createClass({
     const {buffer, value} = this.linearStyle();
     return (
       <div>
-        <span ref="buffer" data-ref="buffer" className={css.bufferBar} style={buffer}></span>
-        <span ref="value" data-ref="value" className={css.valueBar} style={value}></span>
+        <span ref='buffer' data-ref='buffer' className={style.buffer} style={buffer}></span>
+        <span ref='value' data-ref='value' className={style.value} style={value}></span>
       </div>
     );
   },
 
   render () {
-    let className = this.props.type === 'linear' ? css.linearBar : css.circularBar;
+    let className = this.props.type === 'linear' ? style.linear : style.circular;
+    if (this.props.mode) className += ` ${style[this.props.mode]}`;
+    if (this.props.multicolor) className += ` ${style.multicolor}`;
     if (this.props.className) className += ` ${this.props.className}`;
-    if (this.props.mode) className += ` ${this.props.mode}`;
-    if (this.props.multicolor) className += ` multicolor`;
 
     return (
       <div
+        data-react-toolbox='progress-bar'
         className={className}
-        role="progressbar"
         aria-valuenow={this.props.value}
         aria-valuemin={this.props.min}
-        aria-valuemax={this.props.max}>
-          { this.props.type === 'circular' ? this.renderCircular() : this.renderLinear() }
+        aria-valuemax={this.props.max}
+      >
+        { this.props.type === 'circular' ? this.renderCircular() : this.renderLinear() }
       </div>
     );
   }
diff --git a/components/progress_bar/style.scss b/components/progress_bar/style.scss
new file mode 100644
index 00000000..1e8edde4
--- /dev/null
+++ b/components/progress_bar/style.scss
@@ -0,0 +1,143 @@
+@import "../variables";
+
+$progress-height: .4 * $unit;
+$progress-main-color: unquote("rgb(#{$color-primary})") !default;
+$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
+$circle-wrapper-width: 60;
+$circle-radius: 25;
+$scale-ratio: $circle-radius / 20;
+
+.linear {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: $progress-height;
+  overflow: hidden;
+  background: $color-divider;
+
+  &.indeterminate .value {
+    transform-origin: center center;
+    animation: linear-indeterminate-bar 1s linear infinite;
+  }
+}
+
+.value, .buffer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transform: scaleX(0);
+  transform-origin: left center;
+}
+
+.value {
+  background-color: $progress-main-color;
+}
+
+.buffer {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+                      linear-gradient(to right, $progress-main-color, $progress-main-color);
+}
+
+.circular {
+  position: relative;
+  display: inline-block;
+  width: $circle-wrapper-width * 1px;
+  height: $circle-wrapper-width * 1px;
+  transform: rotate(-90deg);
+
+  &.indeterminate {
+    .circle {
+      animation: circular-indeterminate-bar-rotate 2s linear infinite;
+    }
+
+    .path {
+      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
+      stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
+      stroke-dashoffset: 0;
+    }
+
+    &.multicolor .path {
+      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
+                       colors (1.5s * 4) ease-in-out infinite;
+    }
+  }
+}
+
+.circle {
+  width: 100%;
+  height: 100%;
+}
+
+.path {
+  transition: stroke-dasharray $animation-duration $animation-curve-default;
+  stroke-dasharray: 0, $scale-ratio * 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  stroke-miterlimit: 20;
+  stroke-width: 4;
+  stroke: $progress-main-color;
+  fill: none;
+}
+
+@keyframes linear-indeterminate-bar {
+  0% {
+    transform: translate(-50%) scaleX(0);
+  }
+
+  50% {
+    transform: translate(-0%) scaleX(.3);
+  }
+
+  100% {
+    transform: translate(50%) scaleX(0);
+  }
+}
+
+@keyframes circular-indeterminate-bar-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes circular-indeterminate-bar-dash {
+  0% {
+    stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * 0;
+  }
+
+  50% {
+    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * -35;
+  }
+
+  100% {
+    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * -124;
+  }
+}
+
+@keyframes colors {
+  0% {
+    stroke: #4285f4;
+  }
+
+  25% {
+    stroke: #de3e35;
+  }
+
+  50% {
+    stroke: #f7c223;
+  }
+
+  75% {
+    stroke: #1b9a59;
+  }
+
+  100% {
+    stroke: #4285f4;
+  }
+}
diff --git a/components/progress_bar/style.styl b/components/progress_bar/style.styl
deleted file mode 100644
index 9b7235f8..00000000
--- a/components/progress_bar/style.styl
+++ /dev/null
@@ -1,105 +0,0 @@
-@import '../constants'
-
-CIRCLE_WRAPPER_WIDTH         = 60  // You need to change cx and cy in markup too
-CIRCLE_RADIUS                = 25  // You need to change r in the markup too
-SCALE_RATIO                  = CIRCLE_RADIUS/20
-
-// -- Linear progress bar
-:local(.linearBar)
-  display                    : inline-block
-  position                   : relative
-  height                     : PROGRESS_BAR_HEIGHT
-  width                      : 100%
-  background                 : darken(BACKGROUND, 7.5%)
-  overflow                   : hidden
-
-:local(.valueBar), :local(.bufferBar)
-  position                   : absolute
-  bottom                     : 0
-  left                       : 0
-  right                      : 0
-  top                        : 0
-  transform                  : scaleX(0)
-  transform-origin           : left center
-  transition-duration        : ANIMATION_DURATION
-  transition-timing-function : ANIMATION_EASE
-
-:local(.valueBar)
-  background-color           : ACCENT
-
-:local(.bufferBar)
-  background-color           : alpha(ACCENT, 15%)
-
-:local(.linearBar).indeterminate :local(.valueBar)
-  transform-origin           : center center
-  animation                  : linear-indeterminate-bar 1s linear infinite
-
-// -- Circular progress bar
-:local(.circularBar)
-  display                    : inline-block
-  position                   : relative
-  height                     : CIRCLE_WRAPPER_WIDTH * 1px
-  width                      : CIRCLE_WRAPPER_WIDTH * 1px
-  transform                  : rotate(-90deg)
-
-:local(.circle)
-  height                     : 100%
-  width                      : 100%
-
-:local(.circlePath)
-  stroke-dasharray           : 0, SCALE_RATIO * 200
-  stroke-dashoffset          : 0
-  stroke-linecap             : round
-  stroke-miterlimit          : 20
-  stroke-width               : 4
-  stroke                     : ACCENT
-  fill                       : none
-  transition                 : stroke-dasharray ANIMATION_DURATION ANIMATION_EASE
-
-:local(.circularBar).indeterminate
-  :local(.circle)
-    animation                : circular-indeterminate-bar-rotate 2s linear infinite
-
-  :local(.circlePath)
-    stroke-dasharray         : SCALE_RATIO * 1, SCALE_RATIO * 200
-    stroke-dashoffset        : 0
-    animation                : circular-indeterminate-bar-dash 1.5s ease-in-out infinite
-
-  &.multicolor :local(.circlePath)
-    animation                : circular-indeterminate-bar-dash 1.5s ease-in-out infinite, colors (1.5s*4) ease-in-out infinite
-
-// -- Animations
-@keyframes linear-indeterminate-bar
-  0%
-    transform                : translate(-50%) scaleX(0)
-  50%
-    transform                : translate(-0%) scaleX(0.3)
-  100%
-    transform                : translate(50%) scaleX(0)
-
-@keyframes circular-indeterminate-bar-rotate
-  100%
-    transform                : rotate(360deg)
-
-@keyframes circular-indeterminate-bar-dash
-  0%
-    stroke-dasharray         : SCALE_RATIO * 1, SCALE_RATIO * 200
-    stroke-dashoffset        : SCALE_RATIO * 0
-  50%
-    stroke-dasharray         : SCALE_RATIO * 89, SCALE_RATIO * 200
-    stroke-dashoffset        : SCALE_RATIO * -35
-  100%
-    stroke-dasharray         : SCALE_RATIO * 89, SCALE_RATIO * 200
-    stroke-dashoffset        : SCALE_RATIO * -124
-
-@keyframes colors
-  0%
-    stroke: #4285F4
-  25%
-    stroke: #DE3E35
-  50%
-    stroke: #F7C223
-  75%
-    stroke: #1B9A59
-  100%
-    stroke: #4285F4
diff --git a/components/radio_button/index.jsx b/components/radio_button/index.jsx
new file mode 100644
index 00000000..cc22ec28
--- /dev/null
+++ b/components/radio_button/index.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import Ripple from '../ripple';
+import style from './style';
+import events from '../utils/events';
+
+export default React.createClass({
+  mixins: [PureRenderMixin],
+
+  displayName: 'RadioButton',
+
+  propTypes: {
+    checked: React.PropTypes.bool,
+    className: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    label: React.PropTypes.string,
+    name: React.PropTypes.string,
+    onBlur: React.PropTypes.func,
+    onChange: React.PropTypes.func,
+    onFocus: React.PropTypes.func,
+    value: React.PropTypes.any
+  },
+
+  getDefaultProps () {
+    return {
+      checked: false,
+      className: '',
+      disabled: false
+    };
+  },
+
+  handleClick (event) {
+    events.pauseEvent(event);
+    if (!this.props.disabled) this.handleChange(event);
+  },
+
+  handleChange (event) {
+    if (!this.props.checked && this.props.onChange) {
+      this.props.onChange(event, this);
+    }
+  },
+
+  handleMouseDown (event) {
+    if (!this.props.disabled) this.refs.ripple.start(event);
+  },
+
+  handleInputClick (event) {
+    events.pauseEvent(event);
+  },
+
+  render () {
+    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
+    let radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
+    if (this.props.className) labelClassName += ` ${this.props.className}`;
+
+    return (
+      <label className={labelClassName} onClick={this.handleClick}>
+        <input
+          {...this.props}
+          ref='input'
+          type='radio'
+          className={style.input}
+          onChange={this.handleChange}
+          onClick={this.handleInputClick}
+        />
+        <span role='radio' className={radioClassName} onMouseDown={this.handleMouseDown}>
+          <Ripple ref='ripple' role='ripple' className={style.ripple} spread={3} centered />
+        </span>
+        { this.props.label ? <span className={style.text}>{this.props.label}</span> : null }
+      </label>
+    );
+  },
+
+  blur () {
+    this.refs.input.blur();
+  },
+
+  focus () {
+    this.refs.input.focus();
+  }
+});
diff --git a/components/radio_button/style.scss b/components/radio_button/style.scss
new file mode 100644
index 00000000..de861ccb
--- /dev/null
+++ b/components/radio_button/style.scss
@@ -0,0 +1,112 @@
+@import "../variables";
+@import "../mixins";
+
+$radio-button-size: 1.6 * $unit !default;
+$radio-inner-margin: $radio-button-size / 4;
+$radio-inner-color: unquote("rgb(#{$color-primary})") !default;
+$radio-focus-color: unquote("rgba(#{$color-black}, 0.1)") !default;
+$radio-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$radio-text-color: unquote("rgb(#{$color-black})") !default;
+$radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+
+.field {
+  position: relative;
+  display: block;
+  height: $radio-button-size;
+  margin-bottom: 1.5 * $unit;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.text {
+  display: inline-block;
+  padding-left: $unit;
+  font-size: 1.4 * $unit;
+  line-height: $radio-button-size;
+  color: $radio-text-color;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  opacity: 0;
+  appearance: none;
+
+  &:focus:not(&:active) {
+    + .radio {
+      box-shadow: 0 0 0 $unit $radio-focus-color;
+    }
+
+    + .radio-checked {
+      box-shadow: 0 0 0 $unit $radio-checked-focus-color;
+    }
+  }
+}
+
+.radio {
+  position: relative;
+  display: inline-block;
+  width: $radio-button-size;
+  height: $radio-button-size;
+  vertical-align: top;
+  cursor: pointer;
+  border: .2 * $unit solid $radio-text-color;
+  border-radius: 50%;
+
+  &:before {
+    @include material-animation-default();
+    position: absolute;
+    top: $radio-inner-margin - .2 * $unit;
+    left: $radio-inner-margin - .2 * $unit;
+    width: $radio-button-size - $radio-inner-margin * 2;
+    height: $radio-button-size - $radio-inner-margin * 2;
+    content: "";
+    background-color: $radio-inner-color;
+    border-radius: 50%;
+    transition-property: transform;
+    transform: scale3d(0, 0, 0);
+  }
+}
+
+.radio-checked {
+  @extend .radio;
+  border: .2 * $unit solid $radio-inner-color;
+
+  &:before {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.ripple {
+  background-color: $radio-inner-color;
+  opacity: .3;
+  transition-duration: 650ms;
+}
+
+.disabled {
+  @extend .field;
+
+  .text {
+    color: $radio-disabled-color;
+  }
+
+  .radio {
+    cursor: auto;
+    border-color: $radio-disabled-color;
+  }
+
+  .radio-checked {
+    cursor: auto;
+    border-color: $radio-disabled-color;
+
+    &:before {
+      background-color: $radio-disabled-color;
+    }
+  }
+}
diff --git a/components/radio_group/index.jsx b/components/radio_group/index.jsx
new file mode 100644
index 00000000..51a54a1c
--- /dev/null
+++ b/components/radio_group/index.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import RadioButton from '../radio_button';
+
+export default React.createClass({
+  mixins: [PureRenderMixin],
+
+  displayName: 'RadioGroup',
+
+  propTypes: {
+    className: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    name: React.PropTypes.string,
+    onChange: React.PropTypes.func,
+    value: React.PropTypes.any
+  },
+
+  getDefaultProps () {
+    return {
+      className: '',
+      disabled: false
+    };
+  },
+
+  getInitialState () {
+    return { value: this.props.value };
+  },
+
+  handleChange (value, event) {
+    this.setState({value: value}, () => {
+      if (this.props.onChange) this.props.onChange(event, this);
+    });
+  },
+
+  renderRadioButtons () {
+    return React.Children.map(this.props.children, (radio, idx) => {
+      return (
+        <RadioButton
+          {...radio.props}
+          checked={radio.props.value === this.state.value}
+          disabled={this.props.disabled || radio.props.disabled}
+          key={idx}
+          label={radio.props.label}
+          onChange={this.handleChange.bind(this, radio.props.value)}
+          value={radio.props.value}
+        />
+      );
+    });
+  },
+
+  render () {
+    return (
+      <div className={this.props.className}>
+        {this.renderRadioButtons()}
+      </div>
+    );
+  },
+
+  getValue () {
+    return this.state.value;
+  },
+
+  setValue (value) {
+    this.setState({value: value});
+  }
+});
diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx
index b05f8c56..383c117c 100644
--- a/components/ripple/index.jsx
+++ b/components/ripple/index.jsx
@@ -1,24 +1,26 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import style from './style';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style.scss';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Ripple',
 
   propTypes: {
-    auto: React.PropTypes.bool,
+    centered: React.PropTypes.bool,
     className: React.PropTypes.string,
-    loading: React.PropTypes.bool
+    loading: React.PropTypes.bool,
+    spread: React.PropTypes.number
   },
 
   getDefaultProps () {
     return {
-      auto: true,
+      centered: false,
       className: '',
-      loading: false
+      loading: false,
+      spread: 2
     };
   },
 
@@ -33,44 +35,39 @@ export default React.createClass({
   },
 
   start ({ pageX, pageY }) {
+    document.addEventListener('mouseup', this.end);
     const {top, left, width} = this._getDescriptor(pageX, pageY);
     this.setState({active: false, restarting: true, width: 0}, () => {
-      this.refs.ripple.getDOMNode().offsetWidth; //eslint-disable-line no-unused-expressions
+      this.refs.ripple.offsetWidth; //eslint-disable-line no-unused-expressions
       this.setState({active: true, restarting: false, top: top, left: left, width: width});
     });
   },
 
   end () {
+    document.removeEventListener('mouseup', this.end);
     this.setState({active: false});
   },
 
   _getDescriptor (pageX, pageY) {
-    let { left, top, width } = this.getDOMNode().getBoundingClientRect();
+    let { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
     return {
-      left: pageX - left,
-      top: pageY - top,
-      width: width * 2.5
+      left: this.props.centered ? width / 2 : pageX - left,
+      top: this.props.centered ? height / 2 : pageY - top,
+      width: width * this.props.spread
     };
   },
 
   render () {
     let { left, top, width } = this.state;
-    let className = `${style.ripple} ${this.props.className}`;
-    if (this.state.active) className += ' active';
-    if (this.state.restarting) className += ' restarting';
-    if (this.props.loading) className += ' loading';
+    let rippleStyle = {left: left, top: top, width: width, height: width};
+    let className = style[this.props.loading ? 'loading' : 'normal'];
+    if (this.state.active) className += ` ${style.active}`;
+    if (this.state.restarting) className += ` ${style.restarting}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <span
-        className={style.root}
-        onMouseDown={this.props.auto ? this.start : null}
-        onMouseUp={this.end}>
-
-        <span
-          ref="ripple"
-          className={className}
-          style={{left: left, top: top, width: width, height: width}}>
-        </span>
+      <span data-react-toolbox='ripple' className={style.wrapper}>
+        <span ref="ripple" role='ripple' className={className} style={rippleStyle} />
       </span>
     );
   }
diff --git a/components/ripple/style.scss b/components/ripple/style.scss
new file mode 100644
index 00000000..cdc05479
--- /dev/null
+++ b/components/ripple/style.scss
@@ -0,0 +1,59 @@
+@import "../variables";
+@import "../mixins";
+
+$ripple-duration: 1.2s;
+$ripple-final-opacity: .3;
+$ripple-size: 15 * $unit;
+
+%ripple {
+  position: absolute;
+  pointer-events: none;
+  background-color: currentColor;
+  border-radius: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  will-change: width, height, opacity;
+}
+
+.wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.normal {
+  @extend %ripple;
+  width: 0;
+  height: 0;
+  opacity: $ripple-final-opacity;
+  transition-timing-function: $animation-curve-linear-out-slow-in;
+  transition-duration: $ripple-duration;
+  transition-property: height, width;
+
+  &:not(.active) {
+    opacity: 0;
+    transition-property: height, width, opacity;
+
+    &.restarting {
+      transition-property: none;
+    }
+  }
+}
+
+.loading {
+  @extend %ripple;
+  @include ripple-loading(ripple, $ripple-size, $ripple-size);
+  top: 50%;
+  left: 50%;
+  width: $ripple-size;
+  height: $ripple-size;
+  opacity: $ripple-final-opacity;
+  animation-name: ripple;
+  animation-duration: $ripple-duration;
+  animation-timing-function: $animation-curve-linear-out-slow-in;
+  animation-iteration-count: infinite;
+}
diff --git a/components/ripple/style.styl b/components/ripple/style.styl
deleted file mode 100644
index 626497a5..00000000
--- a/components/ripple/style.styl
+++ /dev/null
@@ -1,47 +0,0 @@
-@import '../constants'
-
-FINAL_OPACITY = .4
-
-:local(.root)
-  position                    : absolute
-  top                         : 0
-  left                        : 0
-  right                       : 0
-  bottom                      : 0
-
-:local(.ripple)
-  position                    : absolute
-  background-color            : currentColor
-  transform                   : translateX(-50%) translateY(-50%)
-  border-radius               : 50%
-  width                       : 0
-  height                      : 0
-  opacity                     : FINAL_OPACITY
-  transition-duration         : 1.4 * ANIMATION_DURATION
-  transition-property         : height, width
-
-  &:not(.active).restarting
-    transition-property       : none
-
-  &:not(.active)
-    opacity                   : 0
-    transition-property       : opacity, height, width
-
-  &.loading
-    animation-name            : ripple
-    animation-iteration-count : infinite
-    animation-timing-function : ANIMATION_EASE
-    animation-duration        : (2 * ANIMATION_DURATION)
-    height                    : (4 * UNIT)
-    width                     : (4 * UNIT)
-    left                      : 50%
-    opacity                   : 0
-    top                       : 50%
-
-@keyframes ripple
-  0%
-    width                     : 0
-    height                    : 0
-    opacity                   : FINAL_OPACITY
-  100%
-    opacity                   : 0
diff --git a/components/slider/__tests__/index.spec.jsx b/components/slider/__tests__/index.spec.jsx
index 523a7426..c2cbfd45 100644
--- a/components/slider/__tests__/index.spec.jsx
+++ b/components/slider/__tests__/index.spec.jsx
@@ -1,14 +1,13 @@
-/* global React */
-
 import expect from 'expect';
 import sinon from 'sinon';
 import utils from '../../utils/testing';
+import style from '../../slider/style';
 import ProgressBar from '../../progress_bar';
 import Input from '../../input';
 import Slider from '../index';
+import TestUtils from 'react-addons-test-utils';
 
 describe('Slider', function () {
-  const TestUtils = React.addons.TestUtils;
   let props, state, slider, progress, input;
 
   describe('#positionToValue', function () {
@@ -109,10 +108,10 @@ describe('Slider', function () {
 
     it('contains the proper number of snaps when snapped', function () {
       slider = utils.shallowRenderComponent(Slider, {editable: true, pinned: true});
-      expect(slider.props.className).toContain('ring');
-      expect(slider.props.className).toContain('pinned');
+      expect(slider.props.className).toContain(style.ring);
+      expect(slider.props.className).toContain(style.pinned);
       slider = utils.shallowRenderComponent(Slider, {editable: true, value: 50});
-      expect(slider.props.className).toNotContain('ring');
+      expect(slider.props.className).toNotContain(style.ring);
     });
   });
 
diff --git a/components/slider/index.jsx b/components/slider/index.jsx
index 942550c9..46d8ac2a 100644
--- a/components/slider/index.jsx
+++ b/components/slider/index.jsx
@@ -1,6 +1,6 @@
-/* global React */
-
-import css from './style';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import style from './style';
 import utils from '../utils';
 import ProgressBar from '../progress_bar';
 import Input from '../input';
@@ -58,7 +58,7 @@ export default React.createClass({
   },
 
   onResize () {
-    const {left, right} = this.refs.progressbar.getDOMNode().getBoundingClientRect();
+    const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
     this.setState({sliderStart: left, sliderLength: right - left});
   },
 
@@ -70,15 +70,15 @@ export default React.createClass({
     utils.events.removeEventsFromDocument(this.getKeyboardEvents());
   },
 
-  onInputChange (event) {
-    this.setState({value: this.trimValue(event.target.value) });
+  onInputChange () {
+    this.setState({value: this.trimValue(this.refs.input.getValue()) });
   },
 
   onKeyDown (event) {
-    event.stopPropagation();
-    if (event.keyCode in [13, 27]) this.getDOMNode().blur();
+    if ([13, 27].indexOf(event.keyCode) !== -1) ReactDOM.findDOMNode(this).blur();
     if (event.keyCode === 38) this.addToValue(this.props.step);
     if (event.keyCode === 40) this.addToValue(-this.props.step);
+    if (event.keyCode !== 9) utils.events.pauseEvent(event);
   },
 
   onMouseDown (event) {
@@ -176,10 +176,10 @@ export default React.createClass({
   renderSnaps () {
     if (this.props.snaps) {
       return (
-        <div ref='snaps' className={css.snaps}>
+        <div ref='snaps' className={style.snaps}>
           {
             utils.range(0, (this.props.max - this.props.min) / this.props.step).map(i => {
-              return (<div key={`span-${i}`} className={css.snap}></div>);
+              return (<div key={`span-${i}`} className={style.snap}></div>);
             })
           }
         </div>
@@ -192,7 +192,7 @@ export default React.createClass({
       return (
         <Input
           ref='input'
-          className={css.input}
+          className={style.input}
           onChange={this.onInputChange}
           value={this.valueForInput(this.state.value)} />
       );
@@ -202,38 +202,39 @@ export default React.createClass({
   render () {
     let knobStyles = utils.prefixer({transform: `translateX(${this.knobOffset()}px)`});
     let className = this.props.className;
-    if (this.props.editable) className += ' editable';
-    if (this.props.pinned) className += ' pinned';
-    if (this.state.pressed) className += ' pressed';
-    if (this.state.value === this.props.min) className += ' ring';
+    if (this.props.editable) className += ` ${style.editable}`;
+    if (this.props.pinned) className += ` ${style.pinned}`;
+    if (this.state.pressed) className += ` ${style.pressed}`;
+    if (this.state.value === this.props.min) className += ` ${style.ring}`;
 
     return (
       <div
-        className={css.root + className}
+        data-react-toolbox='slider'
+        className={style.root + className}
         tabIndex='0'
         onFocus={this.onSliderFocus}
         onBlur={this.onSliderBlur} >
 
         <div
           ref='slider'
-          className={css.container}
+          className={style.container}
           onTouchStart={this.onTouchStart}
           onMouseDown={this.onMouseDown} >
 
           <div
             ref='knob'
-            className={css.knob}
+            className={style.knob}
             style={knobStyles}
             onMouseDown={this.onMouseDown}
             onTouchStart={this.onTouchStart} >
-              <div className={css.knobInner} data-value={parseInt(this.state.value)}></div>
+              <div className={style.innerknob} data-value={parseInt(this.state.value)}></div>
           </div>
 
-          <div className={css.progress}>
+          <div className={style.progress}>
             <ProgressBar
               ref='progressbar'
               mode='determinate'
-              className={css.progressInner}
+              className={style.innerprogress}
               value={this.state.value}
               max={this.props.max}
               min={this.props.min}/>
diff --git a/components/slider/style.scss b/components/slider/style.scss
new file mode 100644
index 00000000..b1a5042d
--- /dev/null
+++ b/components/slider/style.scss
@@ -0,0 +1,220 @@
+@import "../variables";
+
+$slider-main-color: unquote("rgb(#{$color-primary})") !default;
+$slider-main-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
+$slider-snap-color: unquote("rgb(#{$color-black})") !default;
+$slider-knob-size: 3.2 * $unit;
+$slider-inner-knob-size: 1.2 * $unit;
+$slider-snap-size: .2 * $unit;
+$slider-input-width: 5 * $unit;
+$slider-bar-height: .2 * $unit;
+$slider-pin-size: 2.6 * $unit;
+$slider-pin-elevation: 1.7 * $unit;
+$slider-side-separation: 1 * $unit;
+$slider-empty-knob-border: .2 * $unit;
+
+.container {
+  position: relative;
+  width: calc(100% - #{$slider-knob-size});
+  height: $slider-knob-size;
+  margin-right: $slider-knob-size;
+  user-select: none;
+
+  &:not(:last-child) {
+    margin-right: $slider-side-separation + $slider-knob-size;
+  }
+
+  &:not(:first-child) {
+    margin-left: $slider-side-separation;
+  }
+}
+
+.knob {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: $z-index-higher;
+  display: flex;
+  width: $slider-knob-size;
+  height: $slider-knob-size;
+  flex-direction: row;
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+}
+
+.innerknob {
+  z-index: $z-index-high;
+  width: $slider-inner-knob-size;
+  height: $slider-inner-knob-size;
+  background-color: $slider-main-color;
+  border-radius: 50%;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: .1s;
+  transition-property: height, width, background-color, border;
+}
+
+.snaps {
+  position: absolute;
+  top: $slider-knob-size / 2 - $slider-snap-size / 2;
+  left: 0;
+  display: flex;
+  width: calc(100% + #{$slider-snap-size});
+  height: $slider-snap-size;
+  flex-direction: row;
+  pointer-events: none;
+
+  &:after {
+    display: block;
+    width: $slider-snap-size;
+    height: $slider-snap-size;
+    content: "";
+    background-color: $slider-snap-color;
+    border-radius: 50%;
+  }
+}
+
+.snap {
+  flex: 1;
+
+  &:after {
+    display: block;
+    width: $slider-snap-size;
+    height: $slider-snap-size;
+    content: "";
+    background-color: $slider-snap-color;
+    border-radius: 50%;
+  }
+}
+
+.input {
+  width: $slider-input-width;
+  padding: 0;
+  margin-bottom: 0;
+
+  > input {
+    text-align: center;
+  }
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  left: $slider-knob-size / 2;
+  width: 100%;
+  height: 100%;
+
+  .innerprogress {
+    position: absolute;
+    top: $slider-knob-size / 2 - $slider-bar-height / 2;
+    height: $slider-bar-height;
+
+    [data-ref="value"] {
+      transition-duration: 0s;
+    }
+  }
+}
+
+.root:focus .knob:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-normal;
+  content: "";
+  background-color: $slider-main-color;
+  border-radius: 50%;
+  opacity: .26;
+}
+
+.root.editable {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+:local(.root).pinned :local(.innerknob) {
+  &:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $slider-pin-size;
+    height: $slider-pin-size;
+    margin-left: ($slider-knob-size - $slider-pin-size) / 2;
+    content: "";
+    background-color: $slider-main-color;
+    border-radius: 50% 50% 50% 0;
+    transition: transform .2s ease, background-color .18s ease;
+    transform: rotate(-45deg) scale(0) translate(0);
+  }
+
+  &:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $slider-knob-size;
+    height: $slider-pin-size;
+    font-size: 10px;
+    color: $color-background;
+    text-align: center;
+    content: attr(data-value);
+    transition: transform .2s ease, background-color .18s ease;
+    transform: scale(0) translate(0);
+  }
+}
+
+.root.pressed {
+  &.pinned .innerknob {
+    &:before {
+      transition-delay: 100ms;
+      transform: rotate(-45deg) scale(1) translate($slider-pin-elevation, - $slider-pin-elevation);
+    }
+
+    &:after {
+      transition-delay: 100ms;
+      transform: scale(1) translate(0, - $slider-pin-elevation);
+    }
+  }
+
+  &:not(.pinned) {
+    &.ring .progress {
+      left: $slider-knob-size / 2 + ($slider-knob-size - $slider-empty-knob-border * 2) / 2;
+      width: calc(100% - #{($slider-knob-size - $slider-empty-knob-border * 2) / 2});
+    }
+
+    .innerknob {
+      width: 100%;
+      height: 100%;
+      transform: translateZ(0);
+    }
+  }
+}
+
+.root.ring {
+  .innerknob {
+    background-color: transparent;
+    border: $slider-empty-knob-border solid $color-divider;
+
+    &:before {
+      background-color: $slider-main-color;
+    }
+  }
+
+  .progress {
+    left: $slider-knob-size / 2 + $slider-empty-knob-border * 2;
+    width: calc(100% - #{$slider-empty-knob-border * 2});
+    transition: left 0.18s ease, width 0.18s ease;
+  }
+
+  &.pinned {
+    .innerknob {
+      background-color: $color-background;
+    }
+
+    .progress {
+      left: $slider-knob-size / 2;
+      width: calc(100%);
+    }
+  }
+}
diff --git a/components/slider/style.styl b/components/slider/style.styl
deleted file mode 100644
index 277c7588..00000000
--- a/components/slider/style.styl
+++ /dev/null
@@ -1,163 +0,0 @@
-@import '../constants'
-
-RANGE_SIDE_SEPARATION = 20px
-
-:local(.container)
-  height                      : 32px
-  margin-right                : 32px
-  position                    : relative
-  user-select                 : none
-  width                       : calc(100% - 32px)
-  &:not(:last-child)
-    margin-right              : RANGE_SIDE_SEPARATION + 32px
-  &:not(:first-child)
-    margin-left               : RANGE_SIDE_SEPARATION
-
-:local(.knob)
-  align-items                 : center
-  background-color            : transparent
-  display                     : flex
-  flex-direction              : row
-  height                      : 32px
-  justify-content             : center
-  left                        : 0
-  position                    : relative
-  top                         : 0
-  width                       : 32px
-  z-index                     : 5
-
-:local(.knobInner)
-  background-color            : ACCENT
-  border-radius               : 50%
-  height                      : 12px
-  transition-duration         : 0.1s
-  transition-property         : height, width, background-color, border
-  transition-timing-function  : ease
-  width                       : 12px
-  z-index                     : 4
-
-:local(.snaps)
-  display                     : flex
-  flex-direction              : row
-  height                      : 2px
-  left                        : 0
-  pointer-events              : none
-  position                    : absolute
-  top                         : 15px
-  width                       : calc(100% + 2px)
-  &:after
-    background-color          : black
-    border-radius             : 50%
-    content                   : ""
-    display                   : block
-    height                    : 2px
-    width                     : 2px
-
-:local(.snap)
-  flex                        : 1
-  &:after
-    background-color          : black
-    border-radius             : 50%
-    content                   : ""
-    display                   : block
-    height                    : 2px
-    width                     : 2px
-
-:local(.input)
-  margin-bottom               : 0
-  text-align                  : center
-  width                       : 40px
-
-:local(.progress)
-  height                      : 100%
-  left                        : 16px
-  position                    : absolute
-  top                         : 0
-  width                       : 100%
-
-  :local(.progressInner)
-    height                    : 2px
-    position                  : absolute
-    top                       : 15px
-
-    [data-ref="value"]
-      transition-duration     : 0s
-
-// When its focused
-:local(.root):focus :local(.knob):before
-  background-color            : ACCENT
-  border-radius               : 50%
-  bottom                      : 0
-  content                     : ""
-  left                        : 0
-  position                    : absolute
-  right                       : 0
-  top                         : 0
-  opacity                     : .26
-  z-index                     : 2
-
-:local(.root).editable
-  display                     : flex
-  align-items                 : center
-  flex-direction              : row
-
-// When its pinned
-:local(.root).pinned :local(.knobInner)
-  &:before
-    content                   : ""
-    position                  : absolute
-    top                       : 0
-    background-color          : ACCENT
-    left                      : 0
-    width                     : 26px
-    height                    : 26px
-    margin-left               : 3px
-    border-radius             : 50% 50% 50% 0
-    transition-delay          : 1s
-    transform                 : rotate(-45deg) scale(0) translate(0)
-    transition                : transform .2s ease, background-color .18s ease
-
-  &:after
-    color                     : white
-    content                   : attr(data-value)
-    font-size                 : 10px
-    height                    : 26px
-    left                      : 0
-    position                  : absolute
-    text-align                : center
-    top                       : 0
-    transform                 : scale(0) translate(0)
-    transition                : transform .2s ease, background-color .18s ease
-    width                     : 32px
-
-// When the knob is pressed
-:local(.root).pressed.pinned :local(.knobInner)
-  &:before
-    transition-delay          : 100ms
-    transform                 : rotate(-45deg) scale(1) translate(17px, -17px)
-
-  &:after
-    transition-delay          : 100ms
-    transform                 : scale(1) translate(0, -17px)
-
-:local(.root).pressed:not(.pinned) :local(.knobInner)
-  height                      : 100%
-  transform                   : translateZ(0)
-  width                       : 100%
-
-:local(.root).pressed:not(.pinned).ring :local(.progress)
-  left                        : 30px
-  width                       : calc(100% - 14px)
-
-// When there is no current value
-:local(.root).ring :local(.knobInner)
-  background-color            : transparent
-  border                      : 2px solid #c8c8c8
-
-:local(.root).ring :local(.knobInner):before
-  background-color            : #c8c8c8
-
-:local(.root).ring :local(.progress)
-  left                        : 20px
-  transition                  : left 0.18s ease, width 0.18s ease
-  width                       : calc(100% - 4px)
diff --git a/components/switch/index.jsx b/components/switch/index.jsx
index 620e8270..5abaf628 100644
--- a/components/switch/index.jsx
+++ b/components/switch/index.jsx
@@ -1,70 +1,99 @@
-/* global React */
-
-import { addons } from 'react/addons';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import Ripple from '../ripple';
 import style from './style';
+import events from '../utils/events';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Switch',
 
   propTypes: {
+    checked: React.PropTypes.bool,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     label: React.PropTypes.string,
+    name: React.PropTypes.string,
+    onBlur: React.PropTypes.func,
     onChange: React.PropTypes.func,
-    value: React.PropTypes.bool
+    onFocus: React.PropTypes.func
   },
 
   getDefaultProps () {
     return {
-      className: ''
+      checked: false,
+      className: '',
+      disabled: false
     };
   },
 
   getInitialState () {
-    return {
-      value: this.props.value
-    };
+    return { checked: this.props.checked };
   },
 
-  componentWillReceiveProps (next_props) {
-    if (next_props.value) {
-      this.setState({value: next_props.value});
-    }
+  handleChange (event) {
+    this.setState({checked: !this.state.checked}, () => {
+      if (this.props.onChange) this.props.onChange(event, this);
+    });
   },
 
-  onClick (event) {
-    if (!this.props.disabled) {
-      this.setState({value: !this.state.value});
-      setTimeout(() => {
-        if (this.props.onChange) this.props.onChange(event, this);
-      }, 10);
-    }
+  handleClick (event) {
+    events.pauseEvent(event);
+    if (!this.props.disabled) this.handleChange(event);
+  },
+
+  handleInputClick (event) {
+    events.pauseEvent(event);
+  },
+
+  handleMouseDown (event) {
+    if (!this.props.disabled) this.refs.ripple.start(event);
   },
 
   render () {
-    let className = `${style.root} ${this.props.className}`;
-    if (this.state.value) className += ' checked';
-    if (this.props.disabled) className += ' disabled';
+    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
+    let switchClassName = style[this.state.checked ? 'switch-on' : 'switch-off'];
+    if (this.props.className) labelClassName += ` ${this.props.className}`;
 
     return (
-      <div
-        data-react-toolbox='switch'
-        className={className}
-        onClick={this.onClick}
+      <label
+        data-react-toolbox='checkbox'
+        className={labelClassName}
+        onClick={this.handleClick}
       >
-        <span></span>
-        { this.props.label ? <label>{this.props.label}</label> : null }
-      </div>
+        <input
+          {...this.props}
+          ref='input'
+          type='checkbox'
+          checked={this.state.checked}
+          className={style.input}
+          onChange={this.handleChange}
+          onClick={this.handleInputClick}
+        />
+        <span role='switch' className={switchClassName}>
+          <span role='thumb' className={style.thumb} onMouseDown={this.handleMouseDown}>
+            <Ripple ref='ripple' role='ripple' className={style.ripple} spread={2.4} centered />
+          </span>
+        </span>
+        { this.props.label ? <span className={style.text}>{this.props.label}</span> : null }
+      </label>
     );
   },
 
-  getValue () {
-    return this.state.value;
+  blur () {
+    this.refs.input.blur();
   },
 
-  setValue (data) {
-    this.setState({value: data});
+  focus () {
+    this.refs.input.focus();
+  },
+
+  getValue () {
+    return this.state.checked;
+  },
+
+  setValue (value) {
+    this.setState({checked: value});
   }
 });
diff --git a/components/switch/style.scss b/components/switch/style.scss
new file mode 100644
index 00000000..ecbf0820
--- /dev/null
+++ b/components/switch/style.scss
@@ -0,0 +1,150 @@
+@import "../variables";
+@import "../mixins";
+
+$switch-color: unquote("rgb(#{$color-primary})") !default;
+$switch-text-color: unquote("rgb(#{$color-black})") !default;
+$switch-thumb-off-color: unquote("rgb(#{$palette-grey-50})") !default;
+$switch-track-on-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
+$switch-track-off-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$switch-off-ripple-color: unquote("rgba(#{$color-black}, 0.4)") !default;
+$switch-on-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$switch-off-focus-color: unquote("rgba(#{$color-black}, 0.1)") !default;
+$switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
+$switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+$switch-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+
+$switch-total-height: 2.4 * $unit !default;
+$switch-track-length: 3.6 * $unit !default;
+$switch-track-height: 1.4 * $unit !default;
+$switch-thumb-size: 2 * $unit !default;
+$switch-thumb-on-color: $switch-color !default;
+$switch-focus-init-size: .8 * $unit !default;
+$switch-focus-size: $switch-total-height * 2 !default;
+$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2;
+
+.field {
+  position: relative;
+  display: block;
+  height: $switch-total-height;
+  margin-bottom: 1.5 * $unit;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.text {
+  display: inline-block;
+  padding-left: $unit;
+  font-size: 1.4 * $unit;
+  line-height: $switch-total-height;
+  color: $switch-text-color;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+%switch {
+  position: relative;
+  display: inline-block;
+  width: $switch-track-length;
+  height: $switch-track-height;
+  margin-top: ($switch-total-height - $switch-track-height) / 2;
+  vertical-align: top;
+  cursor: pointer;
+  border-radius: $switch-track-height;
+}
+
+.thumb {
+  @include material-animation-default(.28s);
+  position: absolute;
+  top: ($switch-track-height - $switch-thumb-size) / 2;
+  width: $switch-thumb-size;
+  height: $switch-thumb-size;
+  cursor: pointer;
+  border-radius: 50%;
+  transition-property: left;
+}
+
+.ripple {
+  background-color: $switch-color;
+  opacity: .3;
+  transition-duration: 650ms;
+}
+
+.switch-on {
+  @extend %switch;
+  background: $switch-track-on-color;
+
+  .thumb {
+    @include shadow-3dp();
+    left: $switch-track-length - $switch-thumb-size;
+    background: $switch-thumb-on-color;
+  }
+}
+
+.switch-off {
+  @extend %switch;
+  background: $switch-track-off-color;
+
+  .thumb {
+    @include shadow-2dp();
+    left: 0;
+    background: $switch-thumb-off-color;
+  }
+
+  .ripple {
+    background: $switch-off-ripple-color;
+  }
+}
+
+%thumb-focus {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  display: inline-block;
+  width: $switch-focus-init-size;
+  height: $switch-focus-init-size;
+  content: "";
+  background-color: transparent;
+  border-radius: 50%;
+  transform: translate(- $switch-focus-init-size / 2, - $switch-focus-init-size / 2);
+}
+
+.input {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+
+  &:focus:not(:active) {
+    + .switch-on > .thumb:before {
+      @extend %thumb-focus;
+      background-color: $switch-on-focus-color;
+      box-shadow: 0 0 0 $switch-focus-diff $switch-on-focus-color;
+    }
+
+    + .switch-off > .thumb:before {
+      @extend %thumb-focus;
+      background-color: $switch-off-focus-color;
+      box-shadow: 0 0 0 $switch-focus-diff $switch-off-focus-color;
+    }
+  }
+}
+
+.disabled {
+  @extend .field;
+
+  .text {
+    color: $switch-disabled-text-color;
+  }
+
+  .switch-on, .switch-off {
+    cursor: auto;
+    background: $switch-disabled-track-color;
+  }
+
+  .thumb {
+    cursor: auto;
+    background-color: $switch-disabled-thumb-color;
+    border-color: transparent;
+  }
+}
diff --git a/components/switch/style.styl b/components/switch/style.styl
deleted file mode 100644
index d9287b3d..00000000
--- a/components/switch/style.styl
+++ /dev/null
@@ -1,47 +0,0 @@
-@import '../constants'
-
-SIZE = (SPACE / 1.25)
-
-:local(.root)
-  position                            : relative
-  margin-bottom                       : SPACE
-  height                              : SIZE
-  width                               : WIDTH = (2.5 * SIZE)
-  background-color                    : DIVIDER
-  border-radius                       : SPACE
-  transition                            background-color ANIMATION_DURATION ANIMATION_EASE
-  > *
-    pointer-events                    : none
-  > span
-    position                          : absolute
-    top                               : -(SIZE / 5)
-    right                             : (SPACE)
-    width                             : (SIZE * 1.35)
-    height                            : (SIZE * 1.35)
-    border-radius                     : 50%
-    background-color                  : WHITE
-    transition-property                 background-color, box-shadow, right
-    transition-duration                 ANIMATION_DURATION
-    transition-timing-function          ANIMATION_EASE
-  > label
-    display                           : block
-    margin-left                       : WIDTH + (SPACE / 2)
-    font-size                         : FONT_SIZE_SMALL
-    color                             : FORM_TEXT
-
-  // -- Style
-  &:not(.disabled)
-    cursor                            : pointer
-    > span
-      box-shadow                      : ZDEPTH_SHADOW_1
-  &.disabled
-    background-color                  : lighten(DIVIDER, 50%)
-    > span
-      background-color                : DIVIDER
-
-  &.checked
-    background-color                  : alpha(PRIMARY, 25%)
-    > span
-      background-color                : PRIMARY
-      right                           : 0
-      box-shadow                      : ZDEPTH_SHADOW_2
diff --git a/components/tabs/style.scss b/components/tabs/style.scss
new file mode 100644
index 00000000..dafa3643
--- /dev/null
+++ b/components/tabs/style.scss
@@ -0,0 +1,72 @@
+@import "../variables";
+
+$tab-text: $color-black !default;
+$tab-text-color: unquote("rgb(#{$tab-text})") !default;
+$tab-text-inactive-color: unquote("rgba(#{$tab-text}, 0.70)") !default;
+$tab-pointer-height: .2 * $unit;
+$tab-pointer-color: unquote("rgb(#{$color-primary})") !default;
+$tab-navigation-border-color: $color-divider;
+$tab-text-height: 1.4 * $unit;
+$tab-label-height: 4.8 * $unit;
+$tab-label-h-padding: 1.2 * $unit;
+$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2;
+$tab-label-disabled-opacity: .2;
+
+.root {
+  position: relative;
+}
+
+.navigation {
+  box-shadow: inset 0 -1px $tab-navigation-border-color;
+}
+
+.label {
+  padding: $tab-label-v-padding $tab-label-h-padding;
+  font-size: $tab-text-height;
+  font-weight: $font-weight-semi-bold;
+  line-height: 1;
+  color: $tab-text-inactive-color;
+  text-transform: uppercase;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: box-shadow, color;
+
+  &.active {
+    color: $tab-text-color;
+  }
+
+  &.disabled {
+    opacity: $tab-label-disabled-opacity;
+  }
+
+  &:not(.disabled) {
+    cursor: pointer;
+  }
+
+  &.hidden {
+    display: none;
+  }
+}
+
+.pointer {
+  position: absolute;
+  width: 0;
+  height: $tab-pointer-height;
+  margin-top: - $tab-pointer-height;
+  background-color: $tab-pointer-color;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: left, width;
+}
+
+.tab {
+  padding: $tab-label-v-padding $tab-label-h-padding;
+
+  &:not(.active) {
+    display: none;
+  }
+
+  &.active {
+    display: block;
+  }
+}
diff --git a/components/tabs/style.styl b/components/tabs/style.styl
deleted file mode 100644
index e7f88c0c..00000000
--- a/components/tabs/style.styl
+++ /dev/null
@@ -1,43 +0,0 @@
-@import '../constants'
-
-:local(.root)
-  position                                : relative
-  > nav
-    box-shadow                            : inset 0 -1px DIVIDER
-    > label
-      padding                             : (OFFSET / 2) OFFSET
-      font-size                           : FONT_SIZE_TINY
-      font-weight                         : FONT_WEIGHT_BOLD
-      text-transform                      : Uppercase
-      color                               : TEXT_SECONDARY
-      transition-property                 : box-shadow, color
-      transition-duration                 : ANIMATION_DURATION
-      transition-timing-function          : ANIMATION_EASE
-      &.active
-        color                             : TEXT
-        // box-shadow                        : inset 0 (-(OFFSET / 10)) PRIMARY
-      &.disabled
-        opacity                           : 0.2
-      &:not(.disabled)
-        cursor                            : pointer
-      &.hidden
-        display                           : none
-
-:local(.pointer)
-  HEIGHT = (OFFSET / 10)
-  position                                : absolute
-  margin-left                             : -(OFFSET)
-  margin-top                              : -(HEIGHT)
-  height                                  : HEIGHT
-  width                                   : 128px
-  background-color                        : PRIMARY
-  transition-property                     : left, width
-  transition-duration                     : ANIMATION_DURATION
-  transition-timing-function              : ANIMATION_EASE
-
-:local(.tab)
-  padding                                 : (OFFSET / 2) OFFSET
-  &:not(.active)
-    display                               : none
-  &.active
-    display                               : block
diff --git a/components/tabs/tab.jsx b/components/tabs/tab.jsx
index 3fab6e6b..f14234c1 100644
--- a/components/tabs/tab.jsx
+++ b/components/tabs/tab.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import style from './style';
 
 export default React.createClass({
@@ -32,9 +31,9 @@ export default React.createClass({
 
   render () {
     let className = `${style.tab} ${this.props.className}`;
-    if (this.props.active) className += ' active';
-    if (this.props.disabled) className += ' disabled';
-    if (this.props.hidden) className += ' hidden';
+    if (this.props.active) className += ` ${style.active}`;
+    if (this.props.disabled) className += ` ${style.disabled}`;
+    if (this.props.hidden) className += ` ${style.hidden}`;
 
     return (
       <section
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
index 6ab1d550..bfc32d04 100644
--- a/components/tabs/tabs.jsx
+++ b/components/tabs/tabs.jsx
@@ -1,19 +1,9 @@
-/* global React */
-
-import { addons } from 'react/addons';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import style from './style';
 
-function _pointerPosition (index = 0, navigation) {
-  const label = navigation.children[index].getBoundingClientRect();
-  return {
-    top: `${navigation.getBoundingClientRect().height}px`,
-    left: `${label.left}px`,
-    width: `${label.width}px`
-  };
-}
-
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'Tabs',
 
@@ -39,7 +29,7 @@ export default React.createClass({
 
   componentDidMount () {
     this.setState({
-      pointer: _pointerPosition(this.state.index, this.refs.navigation.getDOMNode())
+      pointer: this._pointerPosition(this.state.index, this.refs.navigation)
     });
   },
 
@@ -47,27 +37,45 @@ export default React.createClass({
     const index = next_props.index || this.state.index;
     this.setState({
       index: index,
-      pointer: _pointerPosition(index, this.refs.navigation.getDOMNode())
+      pointer: this._pointerPosition(index, this.refs.navigation)
     });
   },
 
+  _pointerPosition (index = 0, navigation) {
+    const startPoint = this.refs.tabs.getBoundingClientRect().left;
+    const label = navigation.children[index].getBoundingClientRect();
+
+    return {
+      top: `${navigation.getBoundingClientRect().height}px`,
+      left: `${label.left - startPoint}px`,
+      width: `${label.width}px`
+    };
+  },
+
   onClick (index) {
     this.setState({
       index: index,
-      pointer: _pointerPosition(index, this.refs.navigation.getDOMNode())
+      pointer: this._pointerPosition(index, this.refs.navigation)
     });
     if (this.props.onChange) this.props.onChange(this);
   },
 
+  renderLabels (labels) {
+    return labels.map((props) => {
+      return <label {...props}>{ props.label }</label>;
+    });
+  },
+
   render () {
     let labels = [];
+
     const tabs = this.props.children.map((tab, index) => {
       let active = this.state.index === index;
+      let className = `${style.label} ${tab.props.className}`;
 
-      let className = tab.props.className;
-      if (active) className += ' active';
-      if (tab.props.disabled) className += ' disabled';
-      if (tab.props.hidden) className += ' hidden';
+      if (active) className += ` ${style.active}`;
+      if (tab.props.disabled) className += ` ${style.disabled}`;
+      if (tab.props.hidden) className += ` ${style.hidden}`;
 
       labels.push({
         className: className,
@@ -79,16 +87,15 @@ export default React.createClass({
       return React.cloneElement(tab, {active: active, key: index, tabIndex: index });
     });
 
+    let className = style.root;
+    if (this.props.className) className += ` ${this.props.className}`;
+
     return (
-      <div
-        data-react-toolbox='tabs'
-        className={style.root + ' ' + this.props.className}
-        data-flex='vertical'
-      >
-        <nav ref='navigation' data-flex='horizontal'>
-          { labels.map((props) => { return <label {...props}>{props.label}</label>; }) }
+      <div data-react-toolbox='tabs' ref='tabs' className={className} data-flex='vertical'>
+        <nav className={style.navigation} ref='navigation' data-flex='horizontal'>
+          { this.renderLabels(labels) }
         </nav>
-        <span className={style.pointer} style={this.state.pointer}></span>
+        <span className={style.pointer} style={this.state.pointer} />
         { tabs }
       </div>
     );
diff --git a/components/time_picker/dialog.jsx b/components/time_picker/dialog.jsx
index ff95c3af..5037de16 100644
--- a/components/time_picker/dialog.jsx
+++ b/components/time_picker/dialog.jsx
@@ -1,13 +1,12 @@
-/* global React */
-
-import { addons } from 'react/addons';
-import css from './style';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import style from './style';
 import time from '../utils/time';
 import Clock from '../clock';
 import Dialog from '../dialog';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'TimePickerDialog',
 
@@ -31,8 +30,8 @@ export default React.createClass({
       display: 'hours',
       time: this.props.initialTime,
       actions: [
-        { label: 'Cancel', type: 'flat accent', onClick: this.onTimeCancel },
-        { label: 'Ok', type: 'flat accent', onClick: this.onTimeSelected }
+        { label: 'Cancel', className: style.button, onClick: this.onTimeCancel },
+        { label: 'Ok', className: style.button, onClick: this.onTimeSelected }
       ]
     };
   },
@@ -77,25 +76,28 @@ export default React.createClass({
 
   renderAMPMLabels () {
     if (this.props.format === 'ampm') {
-      return (<div className={css.ampm}>
-          <span className={css.am} onClick={this.toggleTimeMode}>AM</span>
-          <span className={css.pm} onClick={this.toggleTimeMode}>PM</span>
-        </div>);
+      return (
+        <div className={style.ampm}>
+          <span className={style.am} onClick={this.toggleTimeMode}>AM</span>
+          <span className={style.pm} onClick={this.toggleTimeMode}>PM</span>
+        </div>
+      );
     }
   },
 
   render () {
-    let className = ` display-${this.state.display}`;
-    className += ` format-${time.getTimeMode(this.state.time)}`;
+    const display = `display-${this.state.display}`;
+    const format = `format-${time.getTimeMode(this.state.time)}`;
+    const className = `${style.dialog} ${style[display]} ${style[format]}`;
 
     return (
-      <Dialog ref="dialog" className={className} type={css.dialog} actions={this.state.actions}>
-        <header className={css.header}>
-          <span className={css.hours} onClick={this.displayHours}>
+      <Dialog ref="dialog" className={className} type="custom" actions={this.state.actions}>
+        <header className={style.header}>
+          <span className={style.hours} onClick={this.displayHours}>
             { ('0' + this.formatHours()).slice(-2) }
           </span>
-          <span className={css.separator}>:</span>
-          <span className={css.minutes} onClick={this.displayMinutes}>
+          <span className={style.separator}>:</span>
+          <span className={style.minutes} onClick={this.displayMinutes}>
             { ('0' + this.state.time.getMinutes()).slice(-2) }
           </span>
           { this.renderAMPMLabels() }
@@ -105,7 +107,8 @@ export default React.createClass({
           display={this.state.display}
           format={this.props.format}
           initialTime={this.props.initialTime}
-          onChange={this.onClockChange} />
+          onChange={this.onClockChange}
+        />
       </Dialog>
     );
   }
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.jsx
index 4f6da7ba..26a9158a 100644
--- a/components/time_picker/index.jsx
+++ b/components/time_picker/index.jsx
@@ -1,12 +1,13 @@
-/* global React */
-
-import { addons } from 'react/addons';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import time from '../utils/time';
+import style from './style';
+import events from '../utils/events';
 import Input from '../input';
 import TimeDialog from './dialog';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
+  mixins: [PureRenderMixin],
 
   displayName: 'TimePicker',
 
@@ -32,7 +33,8 @@ export default React.createClass({
     this.setState({value: newTime});
   },
 
-  openTimeDialog () {
+  openTimeDialog (event) {
+    events.pauseEvent(event);
     this.refs.dialog.show();
   },
 
@@ -48,19 +50,22 @@ export default React.createClass({
 
   render () {
     return (
-      <div>
+      <div data-react-toolbox='time-picker'>
         <Input
-            ref="input"
-            type="text"
-            disabled={true}
-            onClick={this.openTimeDialog}
-            placeholder="Pick up time"
-            value={this.formatTime()} />
+          ref='input'
+          type='text'
+          className={style.input}
+          readOnly={true}
+          onMouseDown={this.openTimeDialog}
+          placeholder='Pick up time'
+          value={this.formatTime()}
+        />
         <TimeDialog
-            ref="dialog"
-            initialTime={this.state.value}
-            format={this.props.format}
-            onTimeSelected={this.onTimeSelected} />
+          ref='dialog'
+          initialTime={this.state.value}
+          format={this.props.format}
+          onTimeSelected={this.onTimeSelected}
+        />
       </div>
     );
   }
diff --git a/components/time_picker/style.scss b/components/time_picker/style.scss
new file mode 100644
index 00000000..9fcdf1e2
--- /dev/null
+++ b/components/time_picker/style.scss
@@ -0,0 +1,82 @@
+@import "../variables";
+
+$timepicker-primary: $color-primary;
+$timepicker-primary-contrast: $color-primary-contrast;
+$timepicker-primary-dark: $color-primary-dark;
+$timepicker-primary-color: unquote("rgb(#{$timepicker-primary})") !default;
+$timepicker-primary-hover-color: unquote("rgba(#{$timepicker-primary}, 0.20)") !default;
+$timepicker-primary-contrast-color: unquote("rgb(#{$timepicker-primary-contrast})") !default;
+$timepicker-primary-dark-color: unquote("rgb(#{$timepicker-primary-dark})") !default;
+$timepicker-ampm-height: 2.2 * $unit;
+$timepicker-ampm-width: 4 * $unit;
+$timepicker-dialog-width: 30 * $unit;
+
+.input > [role="input"] {
+  cursor: pointer;
+}
+
+.header {
+  position: relative;
+  width: 100%;
+  padding: 10px;
+  font-size: 52px;
+  color: $timepicker-primary-contrast-color;
+  text-align: center;
+  background: $timepicker-primary-color;
+}
+
+.hours, .minutes {
+  display: inline-block;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.separator {
+  margin: 0 5px;
+  opacity: .6;
+}
+
+.ampm {
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  width: $timepicker-ampm-width;
+  height: $timepicker-ampm-height * 2;
+  margin-top: - $timepicker-ampm-height;
+  font-size: 16px;
+  line-height: $timepicker-ampm-height;
+  text-align: center;
+}
+
+.am, .pm {
+  display: block;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.dialog {
+  > [role="content"] {
+    width: $timepicker-dialog-width;
+
+    > [role="body"] {
+      padding: 0;
+    }
+
+    > [role="navigation"] > .button {
+      color: $timepicker-primary-color;
+
+      &:hover {
+        background: $timepicker-primary-hover-color;
+      }
+
+      &:focus:not(:active) {
+        background: $timepicker-primary-hover-color;
+      }
+    }
+  }
+
+  &.display-hours .hours, &.display-minutes .minutes, &.format-am .am,
+  &.format-pm .pm {
+    opacity: 1;
+  }
+}
diff --git a/components/time_picker/style.styl b/components/time_picker/style.styl
deleted file mode 100644
index 8c042439..00000000
--- a/components/time_picker/style.styl
+++ /dev/null
@@ -1,60 +0,0 @@
-@import '../constants'
-
-AMPM_HEIGHT     = 22px
-AMPM_WIDTH      = 40px
-PICKER_WIDTH    = 330px
-
-// Picker dialog
-:local(.dialog)
-  padding           : 0
-  width             : PICKER_WIDTH
-  > nav
-    margin-top      : 0
-    padding-bottom  : 10px
-
-:local(.header)
-  background        : ACCENT
-  color             : WHITE
-  font-size         : 52px
-  padding           : 10px
-  text-align        : center
-  position          : relative
-  width             : 100%
-
-:local(.hours), :local(.minutes)
-  cursor            : pointer
-  display           : inline-block
-  opacity           : .6
-
-:local(.separator)
-  margin            : 0 5px
-  opacity           : .6
-
-:local(.ampm)
-  font-size         : 16px
-  height            : AMPM_HEIGHT * 2
-  line-height       : AMPM_HEIGHT
-  margin-top        : - AMPM_HEIGHT
-  position          : absolute
-  right             : 20px
-  text-align        : center
-  top               : 50%
-  width             : AMPM_WIDTH
-
-:local(.am), :local(.pm)
-  cursor            : pointer
-  display           : block
-  opacity           : .6
-
-// Modifiers
-:local(.dialog).display-hours :local(.hours)
-  opacity           : 1
-
-:local(.dialog).display-minutes :local(.minutes)
-  opacity           : 1
-
-:local(.dialog).format-am :local(.am)
-  opacity           : 1
-
-:local(.dialog).format-pm :local(.pm)
-  opacity           : 1
diff --git a/components/utils/testing.js b/components/utils/testing.js
index 370d6152..64e77152 100644
--- a/components/utils/testing.js
+++ b/components/utils/testing.js
@@ -1,6 +1,5 @@
-/* global React */
-
-const TestUtils = React.addons.TestUtils;
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
 
 module.exports = {
 
diff --git a/components/variables.scss b/components/variables.scss
new file mode 100644
index 00000000..5d7f3889
--- /dev/null
+++ b/components/variables.scss
@@ -0,0 +1,67 @@
+@import "./colors";
+
+//-- Color configuration
+$color-divider: unquote("rgb(#{$palette-grey-200})") !default;
+$color-background: unquote("rgb(#{$color-white})") !default;
+$color-overlay: unquote("rgb(#{$color-black})");
+$color-overlay-opacity: 0.5;
+$color-text: unquote("rgb(#{$palette-grey-900})") !default;
+$color-text-secondary: unquote("rgb(#{$palette-grey-600})") !default;
+
+$color-primary: $palette-blue-500 !default;
+$color-primary-dark: $palette-blue-700 !default;
+$color-accent: $palette-pink-a200 !default;
+$color-accent-dark: $palette-pink-700 !default;
+$color-primary-contrast: $color-dark-contrast !default;
+$color-accent-contrast: $color-dark-contrast !default;
+
+//-- Unit
+$unit: 1rem;
+
+// Sizes
+$input-height: 3.2 * $unit;
+$offset: 1.6 * $unit;
+$border-radius: 0.2 * $unit;
+$items-overflow-max-height: 45vh;
+
+// -- Fonts
+$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
+$font-size: 1.6 * $unit !default;
+$font-size-tiny: 1.2 * $unit !default;
+$font-size-small: 1.4 * $unit !default;
+$font-size-normal: $font-size !default;
+$font-size-big: 1.8 * $unit !default;
+$font-weight-thin: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-semi-bold: 500 !default;
+$font-weight-bold: 700 !default;
+
+//-- Shadows
+$shadow-key-umbra-opacity: 0.2 !default;
+$shadow-key-penumbra-opacity: 0.14 !default;
+$shadow-ambient-shadow-opacity: 0.12 !default;
+
+//-- Depth 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);
+
+//-- Animation
+$animation-duration: .35s;
+$animation-delay: $animation-duration / 5;
+$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
+$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
+$animation-curve-default: $animation-curve-fast-out-slow-in !default;
+
+//-- Input spaces
+$input-margin-bottom: $unit * .8;
+
+//-- Indexes
+$z-index-higher: 200;
+$z-index-high: 100;
+$z-index-normal: 1;
+$z-index-low: -100;
+$z-index-lower: -200;
diff --git a/components/vendor.styl b/components/vendor.styl
deleted file mode 100644
index fa93e452..00000000
--- a/components/vendor.styl
+++ /dev/null
@@ -1,163 +0,0 @@
-vendor(prop, args)
-  for vendor in webkit moz ms
-    -{vendor}-{prop} args
-  {prop} args
-
-vendorValue(prop, args)
-  {prop} -webkit- + args
-  {prop} -moz- + args
-  {prop} -ms- + args
-  {prop} args
-
-vendorNoMS(prop, args)
-  for vendor in webkit moz
-    -{vendor}-{prop} args
-  {prop} args
-
-vendorValueNoMS(prop, args)
-  {prop} -webkit- + args
-  {prop} -moz- + args
-  {prop} args
-
-border-radius()
-  vendor('border-radius', arguments)
-
-box-shadow()
-  vendor('box-shadow', arguments)
-
-background-size()
-  vendor('background-size', arguments)
-
-text-shadow()
-  vendor('text-shadow', arguments)
-
-backface-visibility()
-  vendor('backface-visibility', arguments)
-
-perspective()
-  vendor('perspective', arguments)
-
-/* ==================== ANIMATION =================== */
-animation()
-  vendor('animation', arguments)
-
-animation-name()
-  vendor('animation-name', arguments)
-
-animation-duration()
-  vendor('animation-duration', arguments)
-
-animation-timing-function()
-  vendor('animation-timing-function', arguments)
-
-animation-delay()
-  vendor('animation-delay', arguments)
-
-animation-iteration-count()
-  vendor('animation-iteration-count', arguments)
-
-animation-direction()
-  vendor('animation-direction', arguments)
-
-animation-fill-mode()
-  vendor('animation-fill-mode', arguments)
-
-animation-play-state()
-  vendor('animation-play-state', arguments)
-
-animation-fill-mode()
-  vendor('animation-fill-mode', arguments)
-
-/* ====================== FLEXBOX ====================== */
-display-flex()
-  display: -webkit-box
-  display: -moz-box
-  display: -ms-flexbox
-  display: -webkit-flex
-  display: flex
-
-flex()
-  vendor('flex', arguments)
-
-flex-direction()
-  vendor('flex-direction', arguments)
-
-flex-grow()
-  vendor('flex-grow', arguments)
-
-flex-flow()
-  vendor('flex-flow', arguments)
-
-flex-wrap()
-  vendor('flex-wrap', arguments)
-
-flex-shrink()
-  vendor('flex-shrink', arguments)
-
-justify-content()
-  vendor('justify-content', arguments)
-
-align-content()
-  vendor('align-content', arguments)
-
-align-items()
-  vendor('align-items', arguments)
-
-order()
-  vendor('order', arguments)
-
-align-self()
-  vendor('align-self', arguments)
-
-/* ====================== TRANSITIONS ====================== */
-transition()
-  vendor('transition', arguments)
-
-transition-delay()
-  vendor('transition-delay', arguments)
-
-transition-property()
-  vendor('transition-property', arguments)
-
-transition-duration()
-  vendor('transition-duration', arguments)
-
-transition-timing-function()
-  vendor('transition-timing-function', arguments)
-
-transform()
-  vendor('transform', arguments)
-
-transform-origin()
-  vendor('transform-origin', arguments)
-
-transform-style()
-  vendor('transform-style', arguments)
-
-/* ====================== COLUMNS ====================== */
-columns()
-  vendorNoMS('columns', arguments)
-
-column-count()
-  vendorNoMS('column-count', arguments)
-
-column-gap()
-  vendorNoMS('column-gap', arguments)
-
-column-rule()
-  vendorNoMS('column-rule', arguments)
-
-column-rule-color()
-  vendorNoMS('column-rule-color', arguments)
-
-column-rule-style()
-  vendorNoMS('column-rule-style', arguments)
-
-column-rule-width()
-  vendorNoMS('column-rule-width', arguments)
-
-column-span()
-  vendorNoMS('column-span', arguments)
-
-column-width()
-  vendorNoMS('column-width', arguments)
diff --git a/example/src/app.jsx b/example/src/app.jsx
index 0b2d5835..8487a024 100644
--- a/example/src/app.jsx
+++ b/example/src/app.jsx
@@ -1,4 +1,4 @@
-/* global React */
+import React from 'react';
 
 // React-Toolbox full dependency way:
 // import {Button, Form} from 'react-toolbox'
diff --git a/karma.conf.js b/karma.conf.js
index 4ee2389f..e56a3eea 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -11,17 +11,16 @@ module.exports = function (config) {
     files: [
       './node_modules/phantomjs-polyfill/bind-polyfill.js',
       './node_modules/babel-core/browser-polyfill.js',
-      './node_modules/react/dist/react-with-addons.js',
       'tests.webpack.js'
     ],
     reporters: ['dots'],
     preprocessors: {'tests.webpack.js': ['webpack']},
     webpack: {
-      resolve: { extensions: ['', '.jsx', '.cjsx', '.coffee', '.js', '.json', '.styl'] },
+      resolve: { extensions: ['', '.jsx', '.scss', '.js', '.json'] },
       module: {
         loaders: [
           { test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loader: 'babel' },
-          { test: /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[hash:base64:5]!stylus-loader') }
+          { test: /(\.scss|\.css)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass') },
         ]
       },
       watch: true,
diff --git a/package.json b/package.json
index 767e502d..c8a26e08 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.6.28",
+  "version": "0.10.9",
   "description": "A set of complementary tools to ReactJS.",
   "homepage": "http://zetapath.com",
   "author": "Javi Jimenez Villar <hi@soyjavi.com> (http://soyjavi.com/)",
@@ -30,14 +30,17 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "react": "^0.13.2"
+    "react": "^0.14",
+    "react-addons-pure-render-mixin": "^0.14.0",
+    "react-addons-css-transition-group": "^0.14.0",
+    "react-dom": "^0.14.0"
   },
   "devDependencies": {
     "autoprefixer-core": "^5.1.11",
     "babel-core": "^5.8.23",
     "babel-loader": "^5.3.2",
     "babel-runtime": "^5.8.20",
-    "css-loader": "^0.14.5",
+    "css-loader": "^0.16.0",
     "eslint": "^1.3.1",
     "eslint-plugin-react": "^3.3.1",
     "expect": "^1.8.0",
@@ -49,13 +52,16 @@
     "karma-phantomjs-launcher": "~0.1",
     "karma-webpack": "^1.7.0",
     "node-libs-browser": "^0.5.2",
+    "node-sass": "^3.3.3",
+    "normalize.css": "^3.0.3",
     "phantomjs-polyfill": "0.0.1",
     "postcss-loader": "^0.4.3",
+    "react-addons-test-utils": "^0.14.0",
     "react-hot-loader": "^1.3.0",
+    "sass-loader": "^2.0.1",
     "sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
     "style-loader": "^0.12.3",
-    "stylus-loader": "^1.2.0",
-    "webpack": "1.10.1",
+    "webpack": "^1.12.0",
     "webpack-dev-server": "*"
   },
   "repository": "github:react-toolbox/react-toolbox"
diff --git a/spec/components/autocomplete.jsx b/spec/components/autocomplete.jsx
index af24176f..6f77fd54 100644
--- a/spec/components/autocomplete.jsx
+++ b/spec/components/autocomplete.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import Autocomplete from '../../components/autocomplete';
 
 export default React.createClass({
@@ -28,8 +27,8 @@ export default React.createClass({
 
     return (
       <section>
-        <h2>Autocomplete</h2>
-        <p>lorem ipsum...</p>
+        <h5>Autocomplete</h5>
+        <p>You can have a multiple or simple autocomplete.</p>
 
         <Autocomplete
           ref="autocomplete_multiple"
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index 8322cb53..eff45eaf 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -1,24 +1,22 @@
-/* global React */
-
+import React from 'react';
 import Button from '../../components/button';
 
 export default React.createClass({
   displayName: 'ButtonTest',
 
-  onClick (ref, method){
-    this.refs[ref][method]();
-  },
-
   render () {
     return (
       <section>
-        <h2>Buttons</h2>
+        <h5>Buttons</h5>
         <p>lorem ipsum...</p>
-        <Button className="accent" label="Flat button" />
-        <Button className="primary" type="raised" label="Raised" />
-        <Button className="accent" type="raised" label="Raised" icon="assignment_turned_in" />
-        <Button className="primary" type="floating" icon="add" />
-        <Button className="accent mini" type="floating" icon="add" />
+        <Button type="raised" className="primary" label="Bookmark" icon="bookmark" />
+        <Button type="flat" className="accent" label="Inbox" icon="inbox" />
+        <Button type="floating" className="primary" icon="add" />
+        <Button type="floating" className="primary" disabled icon="add" />
+        <Button type="floating" className="accent mini" icon="add" />
+        <Button type="flat" className="primary" icon="add" label="Add this" />
+        <Button type="raised" className="primary" label="Bookmark" icon="bookmark" loading />
+        <Button type="flat" disabled className="" icon="add" label="Add this" />
       </section>
     );
   }
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 8b7502b0..a2d0abf9 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import Card from '../../components/card';
 
 export default React.createClass({
@@ -15,28 +14,25 @@ export default React.createClass({
 
   render () {
     const text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
-    const legend = 'Lorem Ipsum is simply dummy text';
     const actions = [
-      { label: 'Save', icon: 'add', onClick: this.onActionClick },
-      { label: 'Close', onClick: this.onActionClick }];
+      { label: 'Save', icon: 'add', className: 'flat accent', onClick: this.onActionClick },
+      { label: 'Close', className: 'flat', onClick: this.onActionClick }];
 
     return (
       <section>
-        <h2>Cards</h2>
-        <h3>Basic properties</h3>
-
+        <h5>Cards</h5>
         <Card title='Default Card' />
         <Card title='Default Card loading' loading />
+        <Card type='wide' title='Wide card' />
         <Card title='Default Card with text' text={text} />
-        <Card title='Default Card with legend' legend={legend} />
         <Card title='Default Card with actions' actions={actions} />
-        <Card title='Default Card with text and image' text={text} image='http://cdn.tapquo.com/photos/soyjavi.jpg' />
+        <Card title='Default Card with text and image' text={text} image='https://avatars2.githubusercontent.com/u/559654?v=3&s=460' />
+        <Card title='Default Card with text, image and color' text={text} color='#e91e63' image='https://avatars2.githubusercontent.com/u/559654?v=3&s=460' />
+        <Card title='Default Card with text, image and color' text={text} color='#00bcd4' image='https://avatars2.githubusercontent.com/u/1634922?v=3&s=460' />
         <Card title='Default Card with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} />
-        <Card title='Default Card loading with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} loading />
-        <h3>Sizes using type property</h3>
-        <Card type='small' title='Small Card with text and onClick event' text={text} color='#00bcd4' onClick={this.onClick} />
-        <Card type='square' title='Square Card with text and onClick event' text={text} color='#00bcd4' onClick={this.onClick} />
-        <Card type='wide' title='Wide card with text and onClick event' text={text} color='#00bcd4' onClick={this.onClick} />
+        <Card type='wide' title='Wide Card loading with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} loading />
+        <Card type='image' title='javivelasco.jpg' image='https://avatars2.githubusercontent.com/u/1634922?v=3&s=460' />
+        <Card type='event' title='Featured event: May 24, 2016 7-11pm' color='#00bcd4' />
       </section>
     );
   }
diff --git a/spec/components/checkbox.jsx b/spec/components/checkbox.jsx
new file mode 100644
index 00000000..dc358f20
--- /dev/null
+++ b/spec/components/checkbox.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Checkbox from '../../components/checkbox';
+
+export default React.createClass({
+  handleChange (event, instance) {
+    console.log('Changed!', instance.getValue());
+  },
+
+  handleFocus () {
+    console.log('Focused');
+  },
+
+  handleBlur () {
+    console.log('Blur');
+  },
+
+  render () {
+    return (
+      <section>
+        <h5>Checkbox</h5>
+        <p style={{marginBottom: '10px'}}>Lorem ipsum...</p>
+
+        <Checkbox
+          label="Checked checkbox"
+          checked
+          onChange={this.handleChange}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+        />
+        <Checkbox
+          label="Not checked biatch"
+          onChange={this.handleChange}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+        />
+        <Checkbox
+          label="Disabled checkbox"
+          checked
+          disabled
+          onChange={this.handleChange}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+        />
+      </section>
+    );
+  }
+});
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index 6fd3f6d3..afd9a20d 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import Button from '../../components/button';
 import Dialog from '../../components/dialog';
 
@@ -8,9 +7,10 @@ export default React.createClass({
 
   getInitialState () {
     return {
-      actions: [{
-        label: 'Cancel', style: 'transparent', onClick: this.onClose
-      }]
+      title: 'Use Google\'s location service?',
+      actions: [
+        { label: 'Disagree', type: 'flat', className: 'primary', onClick: this.onClose },
+        { label: 'Agree', type: 'flat', className: 'primary', onClick: this.onClose }]
     };
   },
 
@@ -25,11 +25,11 @@ export default React.createClass({
   render () {
     return (
       <section>
-        <h2>Dialog</h2>
+        <h5>Dialog</h5>
         <p>lorem ipsum...</p>
         <Button type='raised' label='Show Dialog' onClick={this.onShow} />
-        <Dialog ref='dialog' type='profile' title='Your profile' className='small' actions={this.state.actions}>
-          <p>Welcome to your first Dialog</p>
+        <Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}>
+          <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
         </Dialog>
       </section>
     );
diff --git a/spec/components/drawer.jsx b/spec/components/drawer.jsx
index 3eca92fb..0e7c72cd 100644
--- a/spec/components/drawer.jsx
+++ b/spec/components/drawer.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import Button from '../../components/button';
 import Drawer from '../../components/drawer';
 
@@ -13,9 +12,11 @@ export default React.createClass({
   render () {
     return (
       <section>
-        <h2>Drawer</h2>
+        <h5>Drawer</h5>
+        <p>You can navigate using a drawer to the left or right. They can be auto-closable or not.</p>
+
         <Drawer ref='left' hideable={true}>
-          <h2>Officia deserunt mollit.</h2>
+          <h5>Officia deserunt mollit.</h5>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </Drawer>
@@ -25,8 +26,8 @@ export default React.createClass({
         </Drawer>
 
         <nav>
-          <Button className='accent' label='Show drawer left' type='raised' onClick={this.onClick.bind(null, 'left', 'show')} />
-          <Button className='primary' label='Show drawer left' type='raised' onClick={this.onClick.bind(null, 'right', 'show')} />
+          <Button className='accent' label='Drawer left hideable' type='raised' onClick={this.onClick.bind(null, 'left', 'show')} />
+          <Button className='primary' label='Drawer right' type='raised' onClick={this.onClick.bind(null, 'right', 'show')} />
         </nav>
       </section>
     );
diff --git a/spec/components/dropdown.jsx b/spec/components/dropdown.jsx
index f5c06e13..9a6bbeb3 100644
--- a/spec/components/dropdown.jsx
+++ b/spec/components/dropdown.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import Dropdown from '../../components/dropdown';
 
 export default React.createClass({
@@ -44,7 +43,7 @@ export default React.createClass({
   render () {
     return (
       <section>
-        <h2>Dropdown</h2>
+        <h5>Dropdown</h5>
         <p>lorem ipsum...</p>
         <Dropdown dataSource={this.state.countries} label="Countries" onChange={this.onChange}/>
         <Dropdown dataSource={this.state.countries} disabled={true} onChange={this.onChange}/>
diff --git a/spec/components/font_icon.jsx b/spec/components/font_icon.jsx
index 69f862e6..8541ef92 100644
--- a/spec/components/font_icon.jsx
+++ b/spec/components/font_icon.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import FontIcon from '../../components/font_icon';
 
 export default React.createClass({
diff --git a/spec/components/form.jsx b/spec/components/form.jsx
index 952108ae..9df30024 100644
--- a/spec/components/form.jsx
+++ b/spec/components/form.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import Form from '../../components/form';
 
 export default React.createClass({
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
new file mode 100644
index 00000000..69a99d8a
--- /dev/null
+++ b/spec/components/input.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import Input from '../../components/input';
+
+export default React.createClass({
+  displayName: 'InputTest',
+
+  render () {
+    return (
+      <section>
+        <h5>Inputs</h5>
+        <p>lorem ipsum...</p>
+        <Input type="text" label="Firstname" icon="bookmark" />
+        <Input type="email" label="Label fixed" icon="bookmark" floating={false} />
+        <Input type="text" label="Phone Number" icon="bookmark" />
+        <Input type="text" label="Disabled field" disabled />
+      </section>
+    );
+  }
+});
diff --git a/spec/components/link.jsx b/spec/components/link.jsx
new file mode 100644
index 00000000..5e335096
--- /dev/null
+++ b/spec/components/link.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import Link from '../../components/link';
+
+export default React.createClass({
+  displayName: 'LinkTest',
+
+  render () {
+    return (
+      <section>
+        <h5>Links</h5>
+        <p>lorem ipsum...</p>
+        <Link label="Github" route="http://www.github.com" icon="bookmark" />
+        <Link label="Inbox" route="http://mail.google.com" icon="inbox" />
+      </section>
+    );
+  }
+});
diff --git a/spec/components/list.jsx b/spec/components/list.jsx
new file mode 100644
index 00000000..1a57ba74
--- /dev/null
+++ b/spec/components/list.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import List from '../../components/list';
+
+export default React.createClass({
+  displayName: 'ListTest',
+
+  getInitialState () {
+    return {
+      countries: [
+        { value: 'ES-es', label: 'Spain', img: 'http://' },
+        { value: 'TH-th', label: 'Thailand', img: 'http://' },
+        { value: 'EN-gb', label: 'England', img: 'http://' },
+        { value: 'EN-en', label: 'USA', img: 'http://' },
+        { value: 'FR-fr', label: 'France', img: 'http://' }
+      ],
+      selected: 'TH-th'
+    };
+  },
+
+  onChange (dropdown) {
+    console.log('[DROPDOWN]', dropdown.getValue());
+  },
+
+  customDropdownItem (data) {
+    const style = {
+      width: 32,
+      height: 32,
+      backgroundColor: '#ccc',
+      marginRight: 8
+    };
+
+    return (
+      <div data-flex="horizontal grow" data-flex-content="center">
+        <img src={data.img} data-flex-grow="min" style={style} />
+        <div data-flex-grow="max" data-flex="vertical" >
+          <strong>{data.label}</strong>
+          <small>{data.value}</small>
+        </div>
+      </div>
+    );
+  },
+
+  render () {
+    return (
+      <section>
+        <h5>List</h5>
+        <p>lorem ipsum...</p>
+        <List dataSource={this.state.countries} value={this.state.selected} template={this.customDropdownItem} onChange={this.onChange}/>
+      </section>
+    );
+  }
+});
diff --git a/spec/components/navigation.jsx b/spec/components/navigation.jsx
new file mode 100644
index 00000000..b4c89e91
--- /dev/null
+++ b/spec/components/navigation.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Navigation from '../../components/navigation';
+
+export default React.createClass({
+  displayName: 'NavigationTest',
+
+  getInitialState () {
+    return {
+      routes: [
+        { label: 'Github', route: 'http://www.github.com', icon: 'bookmark' },
+        { label: 'Mail', route: 'http://mail.google.com', icon: 'inbox' }
+      ]
+    };
+  },
+
+  render () {
+    return (
+      <section>
+        <h5>Navigation</h5>
+        <p>lorem ipsum...</p>
+
+        <Navigation type='vertical' routes={this.state.routes} />
+      </section>
+    );
+  }
+});
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index 03d58507..704de4b8 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import DatePicker from '../../components/date_picker';
 import TimePicker from '../../components/time_picker';
 
@@ -13,11 +12,14 @@ export default React.createClass({
 
     return (
       <section>
-        <h2>Pickers</h2>
+        <h5>Pickers</h5>
+        <p>Date pickers and time pickers with Material flavour.</p>
+
         <DatePicker />
         <DatePicker value={datetime} />
-        <TimePicker value={datetime} />
-        <TimePicker format="ampm" />
+
+        <TimePicker />
+        <TimePicker value={datetime} format='ampm' />
       </section>
     );
   }
diff --git a/spec/components/progress.jsx b/spec/components/progress.jsx
index 7bfb1c53..3b1706e8 100644
--- a/spec/components/progress.jsx
+++ b/spec/components/progress.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import ProgressBar from '../../components/progress_bar';
 
 export default React.createClass({
@@ -43,14 +42,13 @@ export default React.createClass({
   render () {
     return (
       <section>
-        <h2>Progress bars</h2>
-
-        <p>Determinate</p>
-        <ProgressBar mode="determinate" value={this.state.progress} buffer={this.state.buffer}/>
-        <p>Indeterminate...</p>
-        <ProgressBar mode="indeterminate"/>
-        <p>Circular</p>
-        <ProgressBar type="circular" mode="indeterminate"/>
+        <h5>Progress bars</h5>
+        <p style={{margin: '10px auto'}}>Determinate</p>
+        <ProgressBar mode='determinate' value={this.state.progress} buffer={this.state.buffer}/>
+        <p style={{margin: '10px auto'}}>Indeterminate...</p>
+        <ProgressBar mode='indeterminate'/>
+        <p style={{margin: '10px auto'}}>Circular</p>
+        <ProgressBar type='circular' mode='indeterminate'/>
       </section>
     );
   }
diff --git a/spec/components/radio_group.jsx b/spec/components/radio_group.jsx
new file mode 100644
index 00000000..59a24356
--- /dev/null
+++ b/spec/components/radio_group.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import RadioGroup from '../../components/radio_group';
+import RadioButton from '../../components/radio_button';
+
+export default React.createClass({
+  handleChange (event, instance) {
+    console.log('Changed!', { comic: instance.getValue()});
+  },
+
+  handleFocus () {
+    console.log('Focused V for a Vendetta');
+  },
+
+  handleBlur () {
+    console.log('Blurred Watchmen');
+  },
+
+  render () {
+    return (
+      <section>
+        <h5>Radio Button</h5>
+        <p style={{marginBottom: '10px'}}>Lorem ipsum...</p>
+
+        <RadioGroup ref='group' name='comic' value='vvendetta' onChange={this.handleChange}>
+          <RadioButton label='The Walking Dead' value='thewalkingdead'/>
+          <RadioButton label='From Hell' value='fromhell' disabled/>
+          <RadioButton label='V for a Vendetta' value='vvendetta' onFocus={this.handleFocus}/>
+          <RadioButton label='Watchmen' value='watchmen' onBlur={this.handleBlur}/>
+        </RadioGroup>
+      </section>
+    );
+  }
+});
diff --git a/spec/components/slider.jsx b/spec/components/slider.jsx
index 8c7bdbc2..e1ce3913 100644
--- a/spec/components/slider.jsx
+++ b/spec/components/slider.jsx
@@ -1,5 +1,4 @@
-/* global React */
-
+import React from 'react';
 import Slider from '../../components/slider';
 
 export default React.createClass({
@@ -8,14 +7,13 @@ export default React.createClass({
   render () {
     return (
       <section>
-        <h2 style={{marginTop: '1rem'}}>Sliders</h2>
+        <h5>Sliders</h5>
         <p>Normal slider</p>
         <Slider />
         <p>With steps, initial value and editable</p>
         <Slider value={5} min={0} max={10} editable />
         <p>Pinned and with snaps</p>
-
-        <Slider pinned value={1} min={0} max={10} step={1} editable />
+        <Slider pinned snaps value={1} min={0} max={10} step={1} editable />
       </section>
     );
   }
diff --git a/spec/components/switch.jsx b/spec/components/switch.jsx
index e9c1af05..27e3cf6e 100644
--- a/spec/components/switch.jsx
+++ b/spec/components/switch.jsx
@@ -1,24 +1,21 @@
-/* global React */
-
+import React from 'react';
 import Switch from '../../components/switch';
 
 export default React.createClass({
   displayName: 'SwitchTest',
 
   onChange (event, instance) {
-    console.log('[SWITCH]', instance.getValue());
+    console.log('[Switch] Changed', instance.getValue());
   },
 
   render () {
     return (
       <section>
-        <h2>Switches</h2>
-        <p>Default</p>
-        <Switch />
-        <p>With properties</p>
-        <Switch value={true} label="Online" onChange={this.onChange} />
-        <p>Disabled</p>
-        <Switch disabled/>
+        <h5>Switches</h5>
+        <p style={{marginBottom: '10px'}}>This is more beautiful than the old fashion checkboxes...</p>
+        <Switch label="Push notifications" />
+        <Switch checked label="Mail notifications" onChange={this.onChange} />
+        <Switch disabled label="Nothing, thanks"/>
       </section>
     );
   }
diff --git a/spec/components/tabs.jsx b/spec/components/tabs.jsx
index 390cc399..c5eb4b8b 100644
--- a/spec/components/tabs.jsx
+++ b/spec/components/tabs.jsx
@@ -1,7 +1,5 @@
-/* global React */
-
-import { Tabs } from '../../components/tabs';
-import { Tab } from '../../components/tabs';
+import React from 'react';
+import { Tabs, Tab } from '../../components/tabs';
 
 export default React.createClass({
   displayName: 'TabsTest',
@@ -9,13 +7,15 @@ export default React.createClass({
   render () {
     return (
       <section>
-        <h2>Tabs</h2>
-        <Tabs>
-          <Tab label='Primary'><small>primary</small></Tab>
-          <Tab label='Secondary'><small>secondary</small></Tab>
-          <Tab label='Third' disabled><small>third</small></Tab>
-          <Tab label='Fourth' hidden><small>Fourth</small></Tab>
-          <Tab label='Fifth'><small>Fifth</small></Tab>
+      <h5>Tabs</h5>
+      <p>This tabs can be disabled or hidden</p>
+
+      <Tabs>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary'><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
         </Tabs>
       </section>
     );
diff --git a/spec/index.html b/spec/index.html
index 406b78fd..2cf0c701 100644
--- a/spec/index.html
+++ b/spec/index.html
@@ -16,12 +16,18 @@
     <link href="../build/react-toolbox.commons.css" rel='stylesheet' type='text/css'>
     <link href="../build/react-toolbox.test.css" rel='stylesheet' type='text/css'>
     <style>
-      app > h1, app > section { margin: 2rem; }
-      app [data-component-card] { margin: 0 1rem 1rem 0;}
+      app { padding: 1.6rem; }
+      app > h1, app > h3 { line-height: 100%; }
+      app h5 { margin-top: 3.2rem; }
+      app p { margin-bottom: 1rem; opacity: 0.5;}
+      app [data-react-toolbox='card'] {
+        margin: 1.6rem 1.6rem 0 0;
+        display: inline-block;
+      }
     </style>
   </head>
   <body>
-    <script src="../node_modules/react/dist/react-with-addons.js"></script>
+    <div id="toolbox-test"></div>
     <script src="../build/react-toolbox.test.js"></script>
   </body>
 </html>
diff --git a/spec/index.jsx b/spec/index.jsx
index 8b81d231..5d2f89e7 100644
--- a/spec/index.jsx
+++ b/spec/index.jsx
@@ -1,17 +1,19 @@
-/* global React */
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-import Drawer from './components/drawer';
 import Autocomplete from './components/autocomplete';
 import Button from './components/button';
 import Card from './components/card';
+import Checkbox from './components/checkbox';
 import Dialog from './components/dialog';
+import Drawer from './components/drawer';
 import Dropdown from './components/dropdown';
-import FontIcon from './components/font_icon';
-import Form from './components/form';
+import Input from './components/input';
+import Pickers from './components/pickers';
 import Progress from './components/progress';
+import RadioGroup from './components/radio_group';
 import Slider from './components/slider';
 import Switch from './components/switch';
-import Pickers from './components/pickers';
 import Tabs from './components/tabs';
 
 const Test = React.createClass({
@@ -19,24 +21,26 @@ const Test = React.createClass({
 
   render () {
     return (
-      <app data-toolbox={true}>
-        <h1>React-Toolbox <small>New way for create</small></h1>
-          <Drawer />
-          <Autocomplete />
-          <Button />
-          <Card />
-          <Dialog />
-          <Dropdown />
-          <FontIcon />
-          <Form />
-          <Progress />
-          <Slider />
-          <Switch />
-          <Tabs />
-          <Pickers />
+      <app data-react-toolbox-app>
+        <h1>React Toolbox</h1>
+        <h3>Component Spec v0.10.9</h3>
+        <Autocomplete />
+        <Button />
+        <Card />
+        <Checkbox />
+        <Dialog />
+        <Drawer />
+        <Dropdown />
+        <Input />
+        <Pickers />
+        <Progress />
+        <RadioGroup />
+        <Slider />
+        <Switch />
+        <Tabs />
       </app>
     );
   }
 });
 
-React.render(<Test/>, document.body);
+ReactDOM.render(<Test/>, document.getElementById('toolbox-test'));
diff --git a/webpack.config.js b/webpack.config.js
index 7e2d3560..463d8f78 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,11 +6,11 @@ var environment = process.env.NODE_ENV;
 module.exports = {
   cache: true,
   resolve: {
-    extensions: ['', '.jsx', '.cjsx', '.coffee', '.js', '.json', '.styl']
+    extensions: ['', '.jsx', '.scss', '.js', '.json']
   },
   context: __dirname,
   entry: {
-    commons: ['./components/commons.styl'],
+    commons: ['./components/commons'],
     test: ['webpack/hot/dev-server', './spec/index.jsx']
   },
   output: {
@@ -26,10 +26,10 @@ module.exports = {
   module: {
     noParse: [node_modules + '/react/dist/*.js'],
     loaders: [
-      { test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loaders: ['react-hot', 'babel'] },
-      { test: /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!stylus-loader!') }
+      { test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loaders: ['babel'] },
+      { test: /(\.scss|\.css)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass') }
     ]
   },
   postcss: [require('autoprefixer-core')],
-  plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: false})]
+  plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: true})]
 };