From 353bcea1edc37a9ba72ac462c42bf4faf591be08 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Fri, 2 Oct 2015 17:39:26 +0200 Subject: [PATCH 01/64] Migrate button, ripple and font icon styles to sass and add sass tooling --- .csscomb.json | 308 ++ .editorconfig | 13 + .eslintrc | 2 +- .scss-lint.yml | 458 +++ components/button/index.jsx | 30 +- components/button/style.scss | 170 + components/button/style.styl | 85 - components/colors.scss | 166 + components/commons.scss | 157 + components/commons.styl | 119 - components/constants.styl | 3 +- components/font_icon/font_icon.md | 2 +- components/font_icon/index.jsx | 10 +- components/font_icon/style.scss | 6378 +++++++++++++++++++++++++++++ components/font_icon/style.styl | 1609 -------- components/mixins.scss | 61 + components/normalize.styl | 149 - components/ripple/index.jsx | 27 +- components/ripple/style.scss | 67 + components/ripple/style.styl | 47 - components/variables.scss | 22 + components/vendor.styl | 163 - package.json | 8 +- spec/components/button.jsx | 17 +- spec/index.jsx | 40 +- webpack.config.js | 11 +- 26 files changed, 7876 insertions(+), 2246 deletions(-) create mode 100644 .csscomb.json create mode 100644 .editorconfig create mode 100644 .scss-lint.yml create mode 100644 components/button/style.scss delete mode 100644 components/button/style.styl create mode 100644 components/colors.scss create mode 100644 components/commons.scss delete mode 100644 components/commons.styl create mode 100644 components/font_icon/style.scss delete mode 100644 components/font_icon/style.styl create mode 100644 components/mixins.scss delete mode 100644 components/normalize.styl create mode 100644 components/ripple/style.scss delete mode 100644 components/ripple/style.styl create mode 100644 components/variables.scss delete mode 100644 components/vendor.styl 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..00056d70 --- /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: [] + + 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/button/index.jsx b/components/button/index.jsx index 232fab30..ebf80366 100644 --- a/components/button/index.jsx +++ b/components/button/index.jsx @@ -1,11 +1,12 @@ /* global React */ import { addons } from 'react/addons'; -import css from './style'; import FontIcon from '../font_icon'; import Ripple from '../ripple'; +import CSSModules from 'react-css-modules'; +import style from './style.scss'; -export default React.createClass({ +const Button = React.createClass({ mixins: [addons.PureRenderMixin], displayName: 'Button', @@ -14,6 +15,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, @@ -36,22 +39,23 @@ export default React.createClass({ if (this.props.onClick) this.props.onClick(event, this); }, - render () { - let className = this.props.className; - if (this.props.type) className += ` ${this.props.type}`; - if (this.state.focused) className += ' focused'; + handleMouseDown (event) { + this.refs.ripple.start(event); + }, + render () { return ( ); }, @@ -60,3 +64,5 @@ export default React.createClass({ this.setState({loading: value}); } }); + +export default CSSModules(Button, style); diff --git a/components/button/style.scss b/components/button/style.scss new file mode 100644 index 00000000..54837495 --- /dev/null +++ b/components/button/style.scss @@ -0,0 +1,170 @@ +@import "../variables"; +@import "../mixins"; + +//-- Variables +$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-floating-height: $unit * 5.6; +$button-floating-height-mini: $unit * 4; + +//-- Mixins and commons +%button { + position: relative; + z-index: 1; + display: inline-block; + height: $unit * 3.6; + flex-direction: row; + margin: 0 $unit * .8; + 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; + font-size: 1.4 * $unit; + text-transform: uppercase; + border-radius: 3px; + + .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 { + font-weight: 500; + vertical-align: middle; +} + +.flat { + @extend %button; + @extend %squared; + background: transparent; + + &:hover { + 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(); + } + + &[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(); + } + + &[disabled] { + @extend %disabled; + @include shadow-2dp(); + background-color: $button-solid-disabled-background-color; + } + + .icon { + line-height: $button-floating-height; + } +} + +//-- Global modifiers +: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; + } + } +} + +: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; + } + } +} + +: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/colors.scss b/components/colors.scss new file mode 100644 index 00000000..2cd53652 --- /dev/null +++ b/components/colors.scss @@ -0,0 +1,166 @@ +//-- 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); + +$color-black: "0,0,0"; +$color-white: "255,255,255"; + +$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..3861d8c6 --- /dev/null +++ b/components/commons.scss @@ -0,0 +1,157 @@ +@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,700'); +@import "normalize.css"; + +//-- 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); +} + +//-- 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 index 5e16d289..2dc6b1e9 100644 --- a/components/constants.styl +++ b/components/constants.styl @@ -1,6 +1,5 @@ -@import './vendor.styl' - // -- Colors + PRIMARY = #E91E63 PRIMARY_DARK = darken(PRIMARY, 25%) PRIMARY_LIGHT = lighten(PRIMARY, 25%) 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..5a52e5d7 100644 --- a/components/font_icon/index.jsx +++ b/components/font_icon/index.jsx @@ -2,8 +2,9 @@ import { addons } from 'react/addons'; import style from './style'; +import CSSModules from 'react-css-modules'; -export default React.createClass({ +const FontIcon = React.createClass({ mixins: [addons.PureRenderMixin], displayName: 'FontIcon', @@ -28,10 +29,13 @@ export default React.createClass({ render () { return ( ); } }); + +export default CSSModules(FontIcon, style); 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/mixins.scss b/components/mixins.scss new file mode 100644 index 00000000..ca2372ab --- /dev/null +++ b/components/mixins.scss @@ -0,0 +1,61 @@ +//-- 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; +} 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/ripple/index.jsx b/components/ripple/index.jsx index b05f8c56..469f7553 100644 --- a/components/ripple/index.jsx +++ b/components/ripple/index.jsx @@ -1,22 +1,21 @@ /* global React */ import { addons } from 'react/addons'; -import style from './style'; +import CSSModules from 'react-css-modules'; +import style from './style.scss'; -export default React.createClass({ +const Ripple = React.createClass({ mixins: [addons.PureRenderMixin], displayName: 'Ripple', propTypes: { - auto: React.PropTypes.bool, className: React.PropTypes.string, loading: React.PropTypes.bool }, getDefaultProps () { return { - auto: true, className: '', loading: false }; @@ -33,6 +32,7 @@ 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 @@ -41,6 +41,7 @@ export default React.createClass({ }, end () { + document.removeEventListener('mouseup', this.end); this.setState({active: false}); }, @@ -55,23 +56,23 @@ export default React.createClass({ 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 className = this.props.className; + let styleName = this.props.loading ? 'loading' : 'normal'; + if (this.state.active) className += ` ${style.active}`; + if (this.state.restarting) className += ` ${style.restarting}`; return ( - - + ); } }); + +export default CSSModules(Ripple, style); diff --git a/components/ripple/style.scss b/components/ripple/style.scss new file mode 100644 index 00000000..0e03d8a8 --- /dev/null +++ b/components/ripple/style.scss @@ -0,0 +1,67 @@ +@import "../variables"; + +//-- Variables +$ripple-duration: 1.2s; +$ripple-final-opacity: .3; +$ripple-size: 15 * $unit; + +//-- Mixins +%ripple { + position: absolute; + background-color: currentColor; + border-radius: 50%; + transition-timing-function: $animation-curve-linear-out-slow-in; + transition-duration: $ripple-duration; + transition-property: height, width; + transform: translateX(-50%) translateY(-50%); +} + +//-- Local Styles +.wrapper { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.normal { + @extend %ripple; + width: 0; + height: 0; + opacity: $ripple-final-opacity; + + &:not(.active) { + opacity: 0; + transition-property: opacity, height, width; + + &.restarting { + transition-property: none; + } + } +} + +.loading { + @extend %ripple; + top: 50%; + left: 50%; + width: $ripple-size; + height: $ripple-size; + opacity: 0; + animation-name: ripple; + animation-duration: $ripple-duration; + animation-timing-function: $animation-curve-linear-out-slow-in; + animation-iteration-count: infinite; +} + +@keyframes ripple { + 0% { + width: 0; + height: 0; + opacity: $ripple-final-opacity; + } + + 100% { + opacity: 0; + } +} 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/variables.scss b/components/variables.scss new file mode 100644 index 00000000..14077b1f --- /dev/null +++ b/components/variables.scss @@ -0,0 +1,22 @@ +@import "./colors"; + +//-- Color configuration +$color-primary: $palette-blue-500 !default; +$color-primary-dark: $palette-blue-700 !default; +$color-accent: $palette-pink-a200 !default; +$color-primary-contrast: $color-dark-contrast !default; +$color-accent-contrast: $color-dark-contrast !default; + +//-- Units and config +$unit: 1rem; + +//-- Shadows +$shadow-key-umbra-opacity: 0.2 !default; +$shadow-key-penumbra-opacity: 0.14 !default; +$shadow-ambient-shadow-opacity: 0.12 !default; + +//-- Animation +$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; 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/package.json b/package.json index 767e502d..34ef7e77 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "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 +49,17 @@ "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-css-modules": "^3.2.3", "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/button.jsx b/spec/components/button.jsx index 8322cb53..503e4bae 100644 --- a/spec/components/button.jsx +++ b/spec/components/button.jsx @@ -5,20 +5,19 @@ import Button from '../../components/button'; export default React.createClass({ displayName: 'ButtonTest', - onClick (ref, method){ - this.refs[ref][method](); - }, - render () { return (

Buttons

lorem ipsum...

-
); } diff --git a/spec/index.jsx b/spec/index.jsx index 8b81d231..ab6feac1 100644 --- a/spec/index.jsx +++ b/spec/index.jsx @@ -1,18 +1,18 @@ /* global React */ -import Drawer from './components/drawer'; -import Autocomplete from './components/autocomplete'; +// import Drawer from './components/drawer'; +// import Autocomplete from './components/autocomplete'; import Button from './components/button'; -import Card from './components/card'; -import Dialog from './components/dialog'; -import Dropdown from './components/dropdown'; -import FontIcon from './components/font_icon'; -import Form from './components/form'; -import Progress from './components/progress'; -import Slider from './components/slider'; -import Switch from './components/switch'; -import Pickers from './components/pickers'; -import Tabs from './components/tabs'; +// import Card from './components/card'; +// import Dialog from './components/dialog'; +// import Dropdown from './components/dropdown'; +// import FontIcon from './components/font_icon'; +// import Form from './components/form'; +// import Progress from './components/progress'; +// import Slider from './components/slider'; +// import Switch from './components/switch'; +// import Pickers from './components/pickers'; +// import Tabs from './components/tabs'; const Test = React.createClass({ displayName: 'App', @@ -20,20 +20,8 @@ const Test = React.createClass({ render () { return ( -

React-Toolbox New way for create

- - - ); }, @@ -61,5 +63,3 @@ const Button = React.createClass({ this.setState({loading: value}); } }); - -export default CSSModules(Button, style); diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx index 2da0b5ff..979627ea 100644 --- a/components/drawer/index.jsx +++ b/components/drawer/index.jsx @@ -1,10 +1,9 @@ /* global React */ import { addons } from 'react/addons'; -import CSSModules from 'react-css-modules'; import style from './style.scss'; -const Drawer = React.createClass({ +export default React.createClass({ mixins: [addons.PureRenderMixin], displayName: 'Drawer', @@ -34,13 +33,14 @@ const Drawer = React.createClass({ }, render () { - let styleName = 'drawer'; - if (this.state.active) styleName += '-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 ( -
-
-