Migrate button, ripple and font icon styles to sass and add sass tooling
Javi Velasco
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],
|
||||
"new-parens": [2],
|
||||
"new-cap": [2, {
|
||||
"capIsNewExceptions": ["ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
|
||||
"capIsNewExceptions": ["CSSModules", "ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
|
||||
}],
|
||||
"newline-after-var": [0],
|
||||
"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 */
|
||||
|
||||
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 (
|
||||
<button
|
||||
className={css.root + ' ' + className}
|
||||
data-flex='horizontal center'
|
||||
data-react-toolbox='button'
|
||||
data-toolbox='button'
|
||||
styleName={this.props.type}
|
||||
className={this.props.className}
|
||||
disabled={this.props.disabled || this.state.loading}
|
||||
onClick={this.handleClick}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
>
|
||||
{ this.props.icon ? <FontIcon value={this.props.icon}/> : null }
|
||||
{ this.props.label ? <abbr>{this.props.label}</abbr> : null }
|
||||
{ this.props.ripple ? <Ripple loading={this.props.loading}/> : null }
|
||||
{ this.props.ripple ? <Ripple ref='ripple' loading={this.props.loading}/> : null }
|
||||
{ this.props.icon ? <FontIcon styleName='icon' value={this.props.icon}/> : null }
|
||||
{ this.props.label ? <abbr styleName='label'>{this.props.label}</abbr> : null }
|
||||
</button>
|
||||
);
|
||||
},
|
||||
|
|
@ -60,3 +64,5 @@ export default React.createClass({
|
|||
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
|
||||
|
||||
PRIMARY = #E91E63
|
||||
PRIMARY_DARK = darken(PRIMARY, 25%)
|
||||
PRIMARY_LIGHT = lighten(PRIMARY, 25%)
|
||||
|
|
|
|||
|
|
@ -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.|
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<span
|
||||
data-react-toolbox='icon'
|
||||
className={`${style.root} ${this.props.className} ${this.props.value}`}
|
||||
data-toolbox='icon'
|
||||
className={this.props.className}
|
||||
styleName={this.props.value}
|
||||
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 */
|
||||
|
||||
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 (
|
||||
<span
|
||||
className={style.root}
|
||||
onMouseDown={this.props.auto ? this.start : null}
|
||||
onMouseUp={this.end}>
|
||||
|
||||
<span styleName='wrapper'>
|
||||
<span
|
||||
ref="ripple"
|
||||
data-toolbox='ripple'
|
||||
className={className}
|
||||
styleName={styleName}
|
||||
style={{left: left, top: top, width: width, height: width}}>
|
||||
</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-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"
|
||||
|
|
|
|||
|
|
@ -5,20 +5,19 @@ import Button from '../../components/button';
|
|||
export default React.createClass({
|
||||
displayName: 'ButtonTest',
|
||||
|
||||
onClick (ref, method){
|
||||
this.refs[ref][method]();
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<section>
|
||||
<h2>Buttons</h2>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button className="accent" label="Flat button" />
|
||||
<Button className="primary" type="raised" label="Raised" />
|
||||
<Button className="accent" type="raised" label="Raised" icon="assignment_turned_in" />
|
||||
<Button className="primary" type="floating" icon="add" />
|
||||
<Button className="accent mini" type="floating" icon="add" />
|
||||
<Button type="raised" className="primary" label="Bookmark" icon="bookmark" />
|
||||
<Button type="flat" className="accent" label="Inbox" icon="inbox" />
|
||||
<Button type="floating" className="primary" icon="add" />
|
||||
<Button type="floating" className="primary" disabled icon="add" />
|
||||
<Button type="floating" className="accent mini" icon="add" />
|
||||
<Button type="flat" className="primary" icon="add" label="Add this" />
|
||||
<Button type="raised" className="primary" label="Bookmark" icon="bookmark" loading />
|
||||
<Button type="flat" disabled className="" icon="add" label="Add this" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<app data-toolbox={true}>
|
||||
<h1>React-Toolbox <small>New way for create</small></h1>
|
||||
<Drawer />
|
||||
<Autocomplete />
|
||||
<Button />
|
||||
<Card />
|
||||
<Dialog />
|
||||
<Dropdown />
|
||||
<FontIcon />
|
||||
<Form />
|
||||
<Progress />
|
||||
<Slider />
|
||||
<Switch />
|
||||
<Tabs />
|
||||
<Pickers />
|
||||
<h1>React Toolbox</h1>
|
||||
<Button />
|
||||
</app>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ var environment = process.env.NODE_ENV;
|
|||
module.exports = {
|
||||
cache: true,
|
||||
resolve: {
|
||||
extensions: ['', '.jsx', '.cjsx', '.coffee', '.js', '.json', '.styl']
|
||||
extensions: ['', '.jsx', '.scss', '.js', '.json', '.styl']
|
||||
},
|
||||
context: __dirname,
|
||||
entry: {
|
||||
commons: ['./components/commons.styl'],
|
||||
commons: ['./components/commons'],
|
||||
test: ['webpack/hot/dev-server', './spec/index.jsx']
|
||||
},
|
||||
output: {
|
||||
|
|
@ -26,10 +26,11 @@ module.exports = {
|
|||
module: {
|
||||
noParse: [node_modules + '/react/dist/*.js'],
|
||||
loaders: [
|
||||
{ test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loaders: ['react-hot', 'babel'] },
|
||||
{ test: /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!stylus-loader!') }
|
||||
{ test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loaders: ['babel'] },
|
||||
{ test: /(\.scss|\.css)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass') },
|
||||
{ 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')],
|
||||
plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: false})]
|
||||
plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: true})]
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue