Migrate button, ripple and font icon styles to sass and add sass tooling
parent
44d96682d9
commit
353bcea1ed
|
@ -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"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
|
@ -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
|
|
@ -55,7 +55,7 @@
|
||||||
"max-statements": [0, 10],
|
"max-statements": [0, 10],
|
||||||
"new-parens": [2],
|
"new-parens": [2],
|
||||||
"new-cap": [2, {
|
"new-cap": [2, {
|
||||||
"capIsNewExceptions": ["ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
|
"capIsNewExceptions": ["CSSModules", "ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
|
||||||
}],
|
}],
|
||||||
"newline-after-var": [0],
|
"newline-after-var": [0],
|
||||||
"no-alert": [2],
|
"no-alert": [2],
|
||||||
|
|
|
@ -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
|
|
@ -1,11 +1,12 @@
|
||||||
/* global React */
|
/* global React */
|
||||||
|
|
||||||
import { addons } from 'react/addons';
|
import { addons } from 'react/addons';
|
||||||
import css from './style';
|
|
||||||
import FontIcon from '../font_icon';
|
import FontIcon from '../font_icon';
|
||||||
import Ripple from '../ripple';
|
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],
|
mixins: [addons.PureRenderMixin],
|
||||||
|
|
||||||
displayName: 'Button',
|
displayName: 'Button',
|
||||||
|
@ -14,6 +15,8 @@ export default React.createClass({
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
icon: React.PropTypes.string,
|
icon: React.PropTypes.string,
|
||||||
|
primary: React.PropTypes.bool,
|
||||||
|
accent: React.PropTypes.bool,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
loading: React.PropTypes.bool,
|
loading: React.PropTypes.bool,
|
||||||
ripple: React.PropTypes.bool,
|
ripple: React.PropTypes.bool,
|
||||||
|
@ -36,22 +39,23 @@ export default React.createClass({
|
||||||
if (this.props.onClick) this.props.onClick(event, this);
|
if (this.props.onClick) this.props.onClick(event, this);
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
handleMouseDown (event) {
|
||||||
let className = this.props.className;
|
this.refs.ripple.start(event);
|
||||||
if (this.props.type) className += ` ${this.props.type}`;
|
},
|
||||||
if (this.state.focused) className += ' focused';
|
|
||||||
|
|
||||||
|
render () {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
className={css.root + ' ' + className}
|
data-toolbox='button'
|
||||||
data-flex='horizontal center'
|
styleName={this.props.type}
|
||||||
data-react-toolbox='button'
|
className={this.props.className}
|
||||||
disabled={this.props.disabled || this.state.loading}
|
disabled={this.props.disabled || this.state.loading}
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
|
onMouseDown={this.handleMouseDown}
|
||||||
>
|
>
|
||||||
{ this.props.icon ? <FontIcon value={this.props.icon}/> : null }
|
{ this.props.ripple ? <Ripple ref='ripple' loading={this.props.loading}/> : null }
|
||||||
{ this.props.label ? <abbr>{this.props.label}</abbr> : null }
|
{ this.props.icon ? <FontIcon styleName='icon' value={this.props.icon}/> : null }
|
||||||
{ this.props.ripple ? <Ripple loading={this.props.loading}/> : null }
|
{ this.props.label ? <abbr styleName='label'>{this.props.label}</abbr> : null }
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -60,3 +64,5 @@ export default React.createClass({
|
||||||
this.setState({loading: value});
|
this.setState({loading: value});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export default CSSModules(Button, style);
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
|
|
@ -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;
|
|
@ -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;
|
||||||
|
}
|
|
@ -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
|
|
|
@ -1,6 +1,5 @@
|
||||||
@import './vendor.styl'
|
|
||||||
|
|
||||||
// -- Colors
|
// -- Colors
|
||||||
|
|
||||||
PRIMARY = #E91E63
|
PRIMARY = #E91E63
|
||||||
PRIMARY_DARK = darken(PRIMARY, 25%)
|
PRIMARY_DARK = darken(PRIMARY, 25%)
|
||||||
PRIMARY_LIGHT = lighten(PRIMARY, 25%)
|
PRIMARY_LIGHT = lighten(PRIMARY, 25%)
|
||||||
|
|
|
@ -10,4 +10,4 @@ var FontIcon = require('react-toolbox/components/font_icon');
|
||||||
|
|
||||||
| Name | Type | Default | Description|
|
| 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.|
|
||||||
|
|
|
@ -2,8 +2,9 @@
|
||||||
|
|
||||||
import { addons } from 'react/addons';
|
import { addons } from 'react/addons';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
import CSSModules from 'react-css-modules';
|
||||||
|
|
||||||
export default React.createClass({
|
const FontIcon = React.createClass({
|
||||||
mixins: [addons.PureRenderMixin],
|
mixins: [addons.PureRenderMixin],
|
||||||
|
|
||||||
displayName: 'FontIcon',
|
displayName: 'FontIcon',
|
||||||
|
@ -28,10 +29,13 @@ export default React.createClass({
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
data-react-toolbox='icon'
|
data-toolbox='icon'
|
||||||
className={`${style.root} ${this.props.className} ${this.props.value}`}
|
className={this.props.className}
|
||||||
|
styleName={this.props.value}
|
||||||
onClick={this.props.onClick}
|
onClick={this.props.onClick}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export default CSSModules(FontIcon, style);
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -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;
|
||||||
|
}
|
|
@ -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
|
|
|
@ -1,22 +1,21 @@
|
||||||
/* global React */
|
/* global React */
|
||||||
|
|
||||||
import { addons } from 'react/addons';
|
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],
|
mixins: [addons.PureRenderMixin],
|
||||||
|
|
||||||
displayName: 'Ripple',
|
displayName: 'Ripple',
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
auto: React.PropTypes.bool,
|
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
loading: React.PropTypes.bool
|
loading: React.PropTypes.bool
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps () {
|
getDefaultProps () {
|
||||||
return {
|
return {
|
||||||
auto: true,
|
|
||||||
className: '',
|
className: '',
|
||||||
loading: false
|
loading: false
|
||||||
};
|
};
|
||||||
|
@ -33,6 +32,7 @@ export default React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
start ({ pageX, pageY }) {
|
start ({ pageX, pageY }) {
|
||||||
|
document.addEventListener('mouseup', this.end);
|
||||||
const {top, left, width} = this._getDescriptor(pageX, pageY);
|
const {top, left, width} = this._getDescriptor(pageX, pageY);
|
||||||
this.setState({active: false, restarting: true, width: 0}, () => {
|
this.setState({active: false, restarting: true, width: 0}, () => {
|
||||||
this.refs.ripple.getDOMNode().offsetWidth; //eslint-disable-line no-unused-expressions
|
this.refs.ripple.getDOMNode().offsetWidth; //eslint-disable-line no-unused-expressions
|
||||||
|
@ -41,6 +41,7 @@ export default React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
end () {
|
end () {
|
||||||
|
document.removeEventListener('mouseup', this.end);
|
||||||
this.setState({active: false});
|
this.setState({active: false});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -55,23 +56,23 @@ export default React.createClass({
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let { left, top, width } = this.state;
|
let { left, top, width } = this.state;
|
||||||
let className = `${style.ripple} ${this.props.className}`;
|
let className = this.props.className;
|
||||||
if (this.state.active) className += ' active';
|
let styleName = this.props.loading ? 'loading' : 'normal';
|
||||||
if (this.state.restarting) className += ' restarting';
|
if (this.state.active) className += ` ${style.active}`;
|
||||||
if (this.props.loading) className += ' loading';
|
if (this.state.restarting) className += ` ${style.restarting}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span styleName='wrapper'>
|
||||||
className={style.root}
|
|
||||||
onMouseDown={this.props.auto ? this.start : null}
|
|
||||||
onMouseUp={this.end}>
|
|
||||||
|
|
||||||
<span
|
<span
|
||||||
ref="ripple"
|
ref="ripple"
|
||||||
|
data-toolbox='ripple'
|
||||||
className={className}
|
className={className}
|
||||||
|
styleName={styleName}
|
||||||
style={{left: left, top: top, width: width, height: width}}>
|
style={{left: left, top: top, width: width, height: width}}>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export default CSSModules(Ripple, style);
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
|
|
@ -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;
|
|
@ -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)
|
|
|
@ -37,7 +37,7 @@
|
||||||
"babel-core": "^5.8.23",
|
"babel-core": "^5.8.23",
|
||||||
"babel-loader": "^5.3.2",
|
"babel-loader": "^5.3.2",
|
||||||
"babel-runtime": "^5.8.20",
|
"babel-runtime": "^5.8.20",
|
||||||
"css-loader": "^0.14.5",
|
"css-loader": "^0.16.0",
|
||||||
"eslint": "^1.3.1",
|
"eslint": "^1.3.1",
|
||||||
"eslint-plugin-react": "^3.3.1",
|
"eslint-plugin-react": "^3.3.1",
|
||||||
"expect": "^1.8.0",
|
"expect": "^1.8.0",
|
||||||
|
@ -49,13 +49,17 @@
|
||||||
"karma-phantomjs-launcher": "~0.1",
|
"karma-phantomjs-launcher": "~0.1",
|
||||||
"karma-webpack": "^1.7.0",
|
"karma-webpack": "^1.7.0",
|
||||||
"node-libs-browser": "^0.5.2",
|
"node-libs-browser": "^0.5.2",
|
||||||
|
"node-sass": "^3.3.3",
|
||||||
|
"normalize.css": "^3.0.3",
|
||||||
"phantomjs-polyfill": "0.0.1",
|
"phantomjs-polyfill": "0.0.1",
|
||||||
"postcss-loader": "^0.4.3",
|
"postcss-loader": "^0.4.3",
|
||||||
|
"react-css-modules": "^3.2.3",
|
||||||
"react-hot-loader": "^1.3.0",
|
"react-hot-loader": "^1.3.0",
|
||||||
|
"sass-loader": "^2.0.1",
|
||||||
"sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
|
"sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
|
||||||
"style-loader": "^0.12.3",
|
"style-loader": "^0.12.3",
|
||||||
"stylus-loader": "^1.2.0",
|
"stylus-loader": "^1.2.0",
|
||||||
"webpack": "1.10.1",
|
"webpack": "^1.12.0",
|
||||||
"webpack-dev-server": "*"
|
"webpack-dev-server": "*"
|
||||||
},
|
},
|
||||||
"repository": "github:react-toolbox/react-toolbox"
|
"repository": "github:react-toolbox/react-toolbox"
|
||||||
|
|
|
@ -5,20 +5,19 @@ import Button from '../../components/button';
|
||||||
export default React.createClass({
|
export default React.createClass({
|
||||||
displayName: 'ButtonTest',
|
displayName: 'ButtonTest',
|
||||||
|
|
||||||
onClick (ref, method){
|
|
||||||
this.refs[ref][method]();
|
|
||||||
},
|
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<section>
|
<section>
|
||||||
<h2>Buttons</h2>
|
<h2>Buttons</h2>
|
||||||
<p>lorem ipsum...</p>
|
<p>lorem ipsum...</p>
|
||||||
<Button className="accent" label="Flat button" />
|
<Button type="raised" className="primary" label="Bookmark" icon="bookmark" />
|
||||||
<Button className="primary" type="raised" label="Raised" />
|
<Button type="flat" className="accent" label="Inbox" icon="inbox" />
|
||||||
<Button className="accent" type="raised" label="Raised" icon="assignment_turned_in" />
|
<Button type="floating" className="primary" icon="add" />
|
||||||
<Button className="primary" type="floating" icon="add" />
|
<Button type="floating" className="primary" disabled icon="add" />
|
||||||
<Button className="accent mini" type="floating" icon="add" />
|
<Button type="floating" className="accent mini" icon="add" />
|
||||||
|
<Button type="flat" className="primary" icon="add" label="Add this" />
|
||||||
|
<Button type="raised" className="primary" label="Bookmark" icon="bookmark" loading />
|
||||||
|
<Button type="flat" disabled className="" icon="add" label="Add this" />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,18 +1,18 @@
|
||||||
/* global React */
|
/* global React */
|
||||||
|
|
||||||
import Drawer from './components/drawer';
|
// import Drawer from './components/drawer';
|
||||||
import Autocomplete from './components/autocomplete';
|
// import Autocomplete from './components/autocomplete';
|
||||||
import Button from './components/button';
|
import Button from './components/button';
|
||||||
import Card from './components/card';
|
// import Card from './components/card';
|
||||||
import Dialog from './components/dialog';
|
// import Dialog from './components/dialog';
|
||||||
import Dropdown from './components/dropdown';
|
// import Dropdown from './components/dropdown';
|
||||||
import FontIcon from './components/font_icon';
|
// import FontIcon from './components/font_icon';
|
||||||
import Form from './components/form';
|
// import Form from './components/form';
|
||||||
import Progress from './components/progress';
|
// import Progress from './components/progress';
|
||||||
import Slider from './components/slider';
|
// import Slider from './components/slider';
|
||||||
import Switch from './components/switch';
|
// import Switch from './components/switch';
|
||||||
import Pickers from './components/pickers';
|
// import Pickers from './components/pickers';
|
||||||
import Tabs from './components/tabs';
|
// import Tabs from './components/tabs';
|
||||||
|
|
||||||
const Test = React.createClass({
|
const Test = React.createClass({
|
||||||
displayName: 'App',
|
displayName: 'App',
|
||||||
|
@ -20,20 +20,8 @@ const Test = React.createClass({
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<app data-toolbox={true}>
|
<app data-toolbox={true}>
|
||||||
<h1>React-Toolbox <small>New way for create</small></h1>
|
<h1>React Toolbox</h1>
|
||||||
<Drawer />
|
<Button />
|
||||||
<Autocomplete />
|
|
||||||
<Button />
|
|
||||||
<Card />
|
|
||||||
<Dialog />
|
|
||||||
<Dropdown />
|
|
||||||
<FontIcon />
|
|
||||||
<Form />
|
|
||||||
<Progress />
|
|
||||||
<Slider />
|
|
||||||
<Switch />
|
|
||||||
<Tabs />
|
|
||||||
<Pickers />
|
|
||||||
</app>
|
</app>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,11 +6,11 @@ var environment = process.env.NODE_ENV;
|
||||||
module.exports = {
|
module.exports = {
|
||||||
cache: true,
|
cache: true,
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['', '.jsx', '.cjsx', '.coffee', '.js', '.json', '.styl']
|
extensions: ['', '.jsx', '.scss', '.js', '.json', '.styl']
|
||||||
},
|
},
|
||||||
context: __dirname,
|
context: __dirname,
|
||||||
entry: {
|
entry: {
|
||||||
commons: ['./components/commons.styl'],
|
commons: ['./components/commons'],
|
||||||
test: ['webpack/hot/dev-server', './spec/index.jsx']
|
test: ['webpack/hot/dev-server', './spec/index.jsx']
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
|
@ -26,10 +26,11 @@ module.exports = {
|
||||||
module: {
|
module: {
|
||||||
noParse: [node_modules + '/react/dist/*.js'],
|
noParse: [node_modules + '/react/dist/*.js'],
|
||||||
loaders: [
|
loaders: [
|
||||||
{ test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loaders: ['react-hot', 'babel'] },
|
{ test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loaders: ['babel'] },
|
||||||
{ test: /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!stylus-loader!') }
|
{ test: /(\.scss|\.css)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass') },
|
||||||
|
{ test: /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!stylus-loader') }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
postcss: [require('autoprefixer-core')],
|
postcss: [require('autoprefixer-core')],
|
||||||
plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: false})]
|
plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: true})]
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue