Merge branch 'dev'
* dev: Get rid of jsx extensions 🔮 Fix linter error for layouts Fix #407 Fix #425 Fix #442 Fix checking if key exists in Autocomplete Remove App from components index Add inputClassName prop to DatePicker and TimePicker Adapt pickers to calculate position with scroll Update linting Remove unneeded App Refactor Overlay into two components and make activable components render only when needed Use sass lint Lint spec files Bugfix: style for svg icons in button Reduce list unneeded markup Update documentation dependencies Update dependencies, linter and rules updates package.json to work with react 15 Make drawer compliant with material design guidelines.old
Javi Velasco
commit
547aceb4e4
|
|
@ -3,9 +3,7 @@ files: [
|
|||
]
|
||||
|
||||
plugins:
|
||||
|
||||
prerelease:
|
||||
|
||||
'Linting config files':
|
||||
plugin: 'bumped-finepack'
|
||||
|
||||
|
|
@ -18,7 +16,6 @@ plugins:
|
|||
command: 'npm run prepublish'
|
||||
|
||||
postrelease:
|
||||
|
||||
'Commiting new version':
|
||||
plugin: 'bumped-terminal'
|
||||
command: 'git add package.json && git commit package.json -m "$newVersion release" && git push origin master'
|
||||
|
|
|
|||
318
.csscomb.json
318
.csscomb.json
|
|
@ -1,318 +0,0 @@
|
|||
{
|
||||
"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": false,
|
||||
"sort-order": [
|
||||
[
|
||||
"$variable",
|
||||
"$extend",
|
||||
"$include",
|
||||
"composes",
|
||||
"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-align",
|
||||
"flex-direction",
|
||||
"flex-flow",
|
||||
"flex-grow",
|
||||
"flex-order",
|
||||
"flex-pack",
|
||||
"flex-wrap",
|
||||
"align-content",
|
||||
"align-items",
|
||||
"justify-content",
|
||||
"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",
|
||||
"transform-style",
|
||||
"-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",
|
||||
"backface-visibility",
|
||||
"will-change",
|
||||
"fill"
|
||||
]
|
||||
]
|
||||
}
|
||||
20
.eslintrc
20
.eslintrc
|
|
@ -32,7 +32,7 @@
|
|||
"comma-style": [2, "last"],
|
||||
"complexity": [0, 11],
|
||||
"constructor-super": [2],
|
||||
"consistent-return": [2],
|
||||
"consistent-return": [0],
|
||||
"consistent-this": [0, "that"],
|
||||
"curly": [2, "multi-line"],
|
||||
"default-case": [2],
|
||||
|
|
@ -44,7 +44,6 @@
|
|||
"func-names": [0],
|
||||
"func-style": [0, "declaration"],
|
||||
"generator-star-spacing": [2, "after"],
|
||||
"strict": [2, "always"],
|
||||
"guard-for-in": [0],
|
||||
"handle-callback-err": [0],
|
||||
"key-spacing": [2, {
|
||||
|
|
@ -79,7 +78,6 @@
|
|||
"no-else-return": [0],
|
||||
"no-empty": [2],
|
||||
"no-empty-character-class": [2],
|
||||
"no-empty-label": [2],
|
||||
"no-eq-null": [0],
|
||||
"no-eval": [2],
|
||||
"no-ex-assign": [2],
|
||||
|
|
@ -166,23 +164,16 @@
|
|||
"no-with": [2],
|
||||
"one-var": [0],
|
||||
"operator-assignment": [0, "always"],
|
||||
"operator-linebreak": [2, "after"],
|
||||
"operator-linebreak": [2, "before"],
|
||||
"padded-blocks": [0],
|
||||
"prefer-const": [2],
|
||||
"prefer-spread": [2],
|
||||
"quote-props": [0],
|
||||
"radix": [0],
|
||||
"semi": [2],
|
||||
"semi-spacing": [2, {
|
||||
"before": false,
|
||||
"after": true
|
||||
}],
|
||||
"sort-vars": [0],
|
||||
"space-after-keywords": [2, "always"],
|
||||
"space-before-function-paren": [2, {
|
||||
"anonymous": "always",
|
||||
"named": "always"
|
||||
}],
|
||||
"keyword-spacing": [2, {"after": true}],
|
||||
"space-before-function-paren": [2, { "anonymous": "always", "named": "always" }],
|
||||
"space-before-blocks": [0, "always"],
|
||||
"space-in-brackets": [0, "never", {
|
||||
"singleValue": true,
|
||||
|
|
@ -194,7 +185,6 @@
|
|||
}],
|
||||
"space-in-parens": [2, "never"],
|
||||
"space-infix-ops": [2],
|
||||
"space-return-throw-case": [2],
|
||||
"space-unary-ops": [2, {
|
||||
"words": true,
|
||||
"nonwords": false
|
||||
|
|
@ -220,7 +210,7 @@
|
|||
"react/jsx-no-duplicate-props": 1,
|
||||
"react/jsx-no-undef": 1,
|
||||
"react/jsx-pascal-case": 1,
|
||||
"react/jsx-sort-prop-types": 1,
|
||||
"react/sort-prop-types": 1,
|
||||
"react/jsx-sort-props": 0,
|
||||
"react/jsx-uses-react": 1,
|
||||
"react/jsx-uses-vars": 1,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,401 @@
|
|||
options:
|
||||
formatter: stylish
|
||||
merge-default-rules: false
|
||||
rules:
|
||||
border-zero: 1
|
||||
brace-style:
|
||||
- 1
|
||||
- allow-single-line: true
|
||||
class-name-format:
|
||||
- 0
|
||||
- convention: hyphenatedlowercase
|
||||
clean-import-paths:
|
||||
- 1
|
||||
- filename-extension: false
|
||||
leading-underscore: false
|
||||
empty-line-between-blocks:
|
||||
- 0
|
||||
- ignore-single-line-rulesets: true
|
||||
extends-before-declarations: 0
|
||||
extends-before-mixins: 0
|
||||
final-newline:
|
||||
- 1
|
||||
- include: true
|
||||
force-attribute-nesting: 0
|
||||
force-element-nesting: 0
|
||||
force-pseudo-nesting: 0
|
||||
function-name-format:
|
||||
- 1
|
||||
- allow-leading-underscore: true
|
||||
convention: hyphenatedlowercase
|
||||
hex-length:
|
||||
- 1
|
||||
- style: short
|
||||
hex-notation:
|
||||
- 1
|
||||
- style: lowercase
|
||||
id-name-format:
|
||||
- 0
|
||||
- convention: hyphenatedlowercase
|
||||
indentation:
|
||||
- 1
|
||||
- size: 2
|
||||
leading-zero:
|
||||
- 0
|
||||
- include: false
|
||||
mixin-name-format:
|
||||
- 1
|
||||
- allow-leading-underscore: true
|
||||
convention: hyphenatedlowercase
|
||||
mixins-before-declarations: 0
|
||||
nesting-depth: 0
|
||||
no-color-keyword: 1
|
||||
no-color-literals: 0
|
||||
no-css-comments: 1
|
||||
no-debug: 1
|
||||
no-duplicate-properties:
|
||||
- 1
|
||||
- exclude: []
|
||||
no-empty-rulesets: 1
|
||||
no-ids: 1
|
||||
no-important: 0
|
||||
no-invalid-hex: 1
|
||||
no-mergeable-selectors: 0
|
||||
no-misspelled-properties:
|
||||
- 1
|
||||
- extra-properties:
|
||||
- composes
|
||||
no-qualifying-elements:
|
||||
- 0
|
||||
- allow-element-with-attribute: false
|
||||
allow-element-with-class: false
|
||||
allow-element-with-id: false
|
||||
no-trailing-zero: 1
|
||||
no-url-protocols: 1
|
||||
placeholder-in-extend: 0
|
||||
placeholder-name-format:
|
||||
- 0
|
||||
- convention: hyphenatedlowercase
|
||||
property-sort-order:
|
||||
- 1
|
||||
- ignore-custom-properties: false
|
||||
order:
|
||||
- $variable
|
||||
- $extend
|
||||
- $include
|
||||
- composes
|
||||
- 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-align
|
||||
- flex-direction
|
||||
- flex-flow
|
||||
- flex-grow
|
||||
- flex-order
|
||||
- flex-pack
|
||||
- flex-wrap
|
||||
- align-content
|
||||
- align-items
|
||||
- justify-content
|
||||
- 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
|
||||
- transform-style
|
||||
- '-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
|
||||
- backface-visibility
|
||||
- will-change
|
||||
- fill
|
||||
quotes:
|
||||
- 1
|
||||
- style: double
|
||||
shorthand-values: 1
|
||||
single-line-per-selector: 0
|
||||
space-after-bang:
|
||||
- 1
|
||||
- include: false
|
||||
space-after-colon: 1
|
||||
space-after-comma: 0
|
||||
space-before-bang:
|
||||
- 1
|
||||
- include: true
|
||||
space-before-brace:
|
||||
- 1
|
||||
- include: true
|
||||
space-before-colon: 1
|
||||
space-between-parens:
|
||||
- 1
|
||||
- include: false
|
||||
trailing-semicolon: 1
|
||||
url-quotes: 1
|
||||
variable-name-format:
|
||||
- 1
|
||||
- allow-leading-underscore: true
|
||||
convention: hyphenatedlowercase
|
||||
zero-unit: 1
|
||||
473
.scss-lint.yml
473
.scss-lint.yml
|
|
@ -1,473 +0,0 @@
|
|||
scss_files: "./components/**/*.scss"
|
||||
|
||||
exclude: "./node_modules"
|
||||
|
||||
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: [
|
||||
"$variable",
|
||||
"$extend",
|
||||
"$include",
|
||||
"composes",
|
||||
"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-align",
|
||||
"flex-direction",
|
||||
"flex-flow",
|
||||
"flex-grow",
|
||||
"flex-order",
|
||||
"flex-pack",
|
||||
"flex-wrap",
|
||||
"align-content",
|
||||
"align-items",
|
||||
"justify-content",
|
||||
"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",
|
||||
"transform-style",
|
||||
"-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",
|
||||
"backface-visibility",
|
||||
"will-change",
|
||||
"fill"
|
||||
]
|
||||
|
||||
PropertySpelling:
|
||||
enabled: true
|
||||
extra_properties: [composes]
|
||||
|
||||
QualifyingElement:
|
||||
enabled: false
|
||||
allow_element_with_attribute: false
|
||||
allow_element_with_class: false
|
||||
allow_element_with_id: false
|
||||
|
||||
SelectorDepth:
|
||||
enabled: false
|
||||
|
||||
SelectorFormat:
|
||||
enabled: false
|
||||
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,6 +1,6 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- "4.2.1"
|
||||
- "4.3.2"
|
||||
script:
|
||||
- npm run lint
|
||||
- npm test
|
||||
|
|
|
|||
24
README.md
24
README.md
|
|
@ -39,25 +39,7 @@ The previous code creates a React button component based on React Toolbox button
|
|||
|
||||
React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
|
||||
|
||||
In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
|
||||
|
||||
## App component
|
||||
|
||||
There are some components in React Toolbox that require special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved by wrapping your app with a non intrusive `App` wrapper component:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ToolboxApp from 'react-toolbox/lib/app';
|
||||
import App from './my-app';
|
||||
|
||||
ReactDOM.render(
|
||||
<ToolboxApp>
|
||||
<App />
|
||||
</ToolboxApp>
|
||||
, document.getElementById('app'));
|
||||
|
||||
```
|
||||
In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
|
||||
|
||||
## Customization
|
||||
|
||||
|
|
@ -67,7 +49,7 @@ Since React Toolbox styles are written in CSS, it's pretty easy to customize you
|
|||
|
||||
Thanks to the power of SASS, all components in React Toolbox are configured from a variables file. The best way to customize your build is to create a custom configuration SASS file overriding configuration variables like colors or sizes.
|
||||
|
||||
With [toolbox-loader](https://github.com/react-toolbox/toolbox-loader) you can tell webpack where your configuration file is and it will prepend your config to each SASS build. This will result in your customized CSS for React Toolbox Components. For now you can browse the configuration files and override what you want.
|
||||
With [toolbox-loader](https://github.com/react-toolbox/toolbox-loader) you can tell webpack where your configuration file is and it will prepend your config to each SASS build. This will result in your customized CSS for React Toolbox Components. For now you can browse the configuration files and override what you want.
|
||||
|
||||
### Via `className` property
|
||||
|
||||
|
|
@ -106,7 +88,7 @@ To start the documentation site locally, you'll need to install the dependencies
|
|||
git clone https://github.com/react-toolbox/react-toolbox.git
|
||||
npm install
|
||||
cd docs/
|
||||
npm install
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -32,11 +32,11 @@ $shadow-key-penumbra-opacity: 0.14 !default;
|
|||
$shadow-ambient-shadow-opacity: 0.12 !default;
|
||||
|
||||
//-- Depth Shadows
|
||||
$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24);
|
||||
$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23);
|
||||
$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23);
|
||||
$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22);
|
||||
$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22);
|
||||
$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.24);
|
||||
$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.23);
|
||||
$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,.19), 0 6px 10px rgba(0,0,0,.23);
|
||||
$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.22);
|
||||
$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,.3), 0 15px 20px rgba(0,0,0,.22);
|
||||
|
||||
//-- Animation
|
||||
$animation-duration: .35s;
|
||||
|
|
@ -53,3 +53,29 @@ $z-index-high: 100 !default;
|
|||
$z-index-normal: 1 !default;
|
||||
$z-index-low: -100 !default;
|
||||
$z-index-lower: -200 !default;
|
||||
|
||||
//-- Breakpoints
|
||||
// height of app bar
|
||||
// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
|
||||
$standard-increment-mobile: (5.6 * $unit) !default;
|
||||
$standard-increment-desktop: (6.4 * $unit) !default;
|
||||
|
||||
// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids
|
||||
$baseline-grid: (0.8 * $unit) !default;
|
||||
$layout-gutter-width-sm: ($baseline-grid * 2) !default;
|
||||
$layout-gutter-width: ($baseline-grid * 3) !default;
|
||||
|
||||
// https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
|
||||
// 4 columns
|
||||
$layout-breakpoint-xxs: 480px !default;
|
||||
// 8 columns
|
||||
$layout-breakpoint-xs: 600px !default;
|
||||
// 12 columns
|
||||
$layout-breakpoint-sm-tablet: 720px !default;
|
||||
$layout-breakpoint-sm: 840px !default;
|
||||
$layout-breakpoint-md: 960px !default;
|
||||
$layout-breakpoint-lg-tablet: 1024px !default;
|
||||
$layout-breakpoint-lg: 1280px !default;
|
||||
$layout-breakpoint-xl: 1440px !default;
|
||||
$layout-breakpoint-xxl: 1600px !default;
|
||||
$layout-breakpoint-xxxl: 1920px !default;
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
}
|
||||
|
||||
.enterActive, .leaveActive {
|
||||
transition: transform, opacity;
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
transition-duration: 500ms;
|
||||
transition: transform, opacity;
|
||||
}
|
||||
|
||||
.enter {
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
}
|
||||
|
||||
.enterActive, .leaveActive {
|
||||
transition: transform, opacity;
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
transition-duration: 500ms;
|
||||
transition: transform, opacity;
|
||||
}
|
||||
|
||||
.enter {
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
import React from 'react';
|
||||
import style from './style';
|
||||
|
||||
const App = ({className, children}) => (
|
||||
<div data-react-toolbox='app' className={`${style.root} ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
App.propTypes = {
|
||||
children: React.PropTypes.node,
|
||||
className: React.PropTypes.string
|
||||
};
|
||||
|
||||
App.defaultProps = {
|
||||
className: ''
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
@ -1 +0,0 @@
|
|||
export default from './App';
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.root {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-high;
|
||||
z-index: $z-index-highest;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ class Autocomplete extends React.Component {
|
|||
}
|
||||
|
||||
query (key) {
|
||||
return !this.props.multiple && this.props.value ? this.source().get(key) : '';
|
||||
return !this.props.multiple && key ? this.source().get(key) : '';
|
||||
}
|
||||
|
||||
suggestions () {
|
||||
|
|
@ -113,8 +113,8 @@ class Autocomplete extends React.Component {
|
|||
const query = this.state.query.toLowerCase().trim() || '';
|
||||
const values = this.values();
|
||||
for (const [key, value] of this.source()) {
|
||||
if (value.toLowerCase().trim().startsWith(query) &&
|
||||
(!values.has(key) || !this.props.multiple)) {
|
||||
if (value.toLowerCase().trim().startsWith(query)
|
||||
&& (!values.has(key) || !this.props.multiple)) {
|
||||
suggest.set(key, value);
|
||||
}
|
||||
}
|
||||
|
|
@ -72,6 +72,7 @@
|
|||
right: $input-chevron-offset;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-top: $size solid $input-text-bottom-border-color;
|
||||
border-right: $border;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
$button-neutral-color: $color-white !default;
|
||||
$button-neutral-color-contrast: $palette-grey-900 !default;
|
||||
$button-neutral-color-hover: rgba($palette-grey-900, 0.20) !default;
|
||||
$button-neutral-color-hover: rgba($palette-grey-900, .2) !default;
|
||||
$button-primary-color-contrast: $color-primary-contrast !default;
|
||||
$button-primary-color-hover: rgba($color-primary, 0.20) !default;
|
||||
$button-primary-color-hover: rgba($color-primary, .2) !default;
|
||||
$button-primary-color: $color-primary !default;
|
||||
$button-accent-color-contrast: $color-primary-contrast !default;
|
||||
$button-accent-color-hover: rgba($color-accent, 0.20) !default;
|
||||
$button-accent-color-hover: rgba($color-accent, .2) !default;
|
||||
$button-accent-color: $color-accent !default;
|
||||
$button-disabled-text-color: rgba($color-black, 0.26) !default;
|
||||
$button-disabled-background-color: rgba($color-black, 0.12) !default;
|
||||
|
|
|
|||
|
|
@ -17,9 +17,7 @@
|
|||
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;
|
||||
transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -31,7 +29,7 @@
|
|||
> svg {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
height: $button-height;
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
|
|
@ -96,8 +94,7 @@
|
|||
height: $button-floating-height;
|
||||
font-size: $button-floating-font-size;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
|
||||
0 1px 1px 0 rgba(0, 0, 0, .24);
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
|
||||
.icon {
|
||||
line-height: $button-floating-height;
|
||||
}
|
||||
|
|
@ -161,5 +158,5 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include btn-colors('primary', $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
|
||||
@include btn-colors('accent', $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
|
||||
@include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
|
||||
@include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import ClassNames from 'classnames';
|
||||
import Ripple from '../ripple';
|
||||
import style from './style';
|
||||
|
|
@ -11,6 +11,12 @@ const Check = ({checked, children, onMouseDown}) => {
|
|||
return <div data-react-toolbox='check' onMouseDown={onMouseDown} className={className}>{children}</div>;
|
||||
};
|
||||
|
||||
Check.propTypes = {
|
||||
checked: PropTypes.bool,
|
||||
children: PropTypes.any,
|
||||
onMouseDown: PropTypes.func
|
||||
};
|
||||
|
||||
export default Ripple({
|
||||
className: style.ripple,
|
||||
spread: 2.6,
|
||||
|
|
@ -34,7 +34,7 @@ class Checkbox extends React.Component {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { onChange, ...others } = this.props;
|
||||
const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
|
||||
const className = ClassNames(style.field, {
|
||||
[style.disabled]: this.props.disabled
|
||||
}, this.props.className);
|
||||
|
|
@ -3,7 +3,7 @@ $chip-padding: 1.2 * $unit !default;
|
|||
$chip-margin-right: 0.25 * $unit !default;
|
||||
$chip-background: $palette-grey-200 !default;
|
||||
|
||||
$chip-icon-font-size: 2.0 * $unit !default;
|
||||
$chip-icon-font-size: 2 * $unit !default;
|
||||
$chip-icon-margin-right: 0.8 * $unit !default;
|
||||
|
||||
$chip-color: $color-text-secondary !default;
|
||||
|
|
|
|||
|
|
@ -3,24 +3,24 @@
|
|||
@import "./config";
|
||||
|
||||
.chip {
|
||||
background-color: $chip-background;
|
||||
border-radius: $chip-height;
|
||||
color: $chip-color;
|
||||
display: inline-block;
|
||||
padding: 0 $chip-padding;
|
||||
margin-right: $chip-margin-right;
|
||||
font-size: $chip-font-size;
|
||||
line-height: $chip-height;
|
||||
margin-right: $chip-margin-right;
|
||||
padding: 0 $chip-padding;
|
||||
color: $chip-color;
|
||||
background-color: $chip-background;
|
||||
border-radius: $chip-height;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
padding-left: 0;
|
||||
|
||||
> [data-react-toolbox="avatar"] {
|
||||
width: $chip-height;
|
||||
height: $chip-height;
|
||||
margin-right: $chip-icon-margin-right;
|
||||
vertical-align: middle;
|
||||
width: $chip-height;
|
||||
|
||||
> span {
|
||||
font-size: $chip-icon-font-size;
|
||||
|
|
@ -34,14 +34,14 @@
|
|||
}
|
||||
|
||||
.delete {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: $chip-remove-size;
|
||||
margin: $chip-remove-margin;
|
||||
padding: $chip-remove-margin;
|
||||
position: absolute;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
width: $chip-remove-size;
|
||||
height: $chip-remove-size;
|
||||
padding: $chip-remove-margin;
|
||||
margin: $chip-remove-margin;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.delete:hover .deleteIcon {
|
||||
|
|
@ -49,9 +49,9 @@
|
|||
}
|
||||
|
||||
.deleteIcon {
|
||||
vertical-align: top;
|
||||
background: $chip-remove-background;
|
||||
border-radius: $chip-remove-size;
|
||||
vertical-align: top;
|
||||
|
||||
.deleteX {
|
||||
fill: transparent;
|
||||
|
|
|
|||
|
|
@ -33,10 +33,9 @@ class Calendar extends React.Component {
|
|||
}
|
||||
|
||||
scrollToActive () {
|
||||
this.refs.years.scrollTop =
|
||||
this.refs.activeYear.offsetTop -
|
||||
this.refs.years.offsetHeight / 2 +
|
||||
this.refs.activeYear.offsetHeight / 2;
|
||||
this.refs.years.scrollTop = this.refs.activeYear.offsetTop
|
||||
- this.refs.years.offsetHeight / 2
|
||||
+ this.refs.activeYear.offsetHeight / 2;
|
||||
}
|
||||
|
||||
handleDayClick = (day) => {
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import DatePickerDialog from './DatePickerDialog';
|
||||
import events from '../utils/events';
|
||||
import Input from '../input';
|
||||
|
|
@ -10,6 +11,7 @@ class DatePicker extends React.Component {
|
|||
autoOk: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
error: React.PropTypes.string,
|
||||
inputClassName: React.PropTypes.string,
|
||||
inputFormat: React.PropTypes.func,
|
||||
label: React.PropTypes.string,
|
||||
maxDate: React.PropTypes.object,
|
||||
|
|
@ -37,14 +39,14 @@ class DatePicker extends React.Component {
|
|||
};
|
||||
|
||||
render () {
|
||||
const { value } = this.props;
|
||||
const { inputClassName, value } = this.props;
|
||||
const inputFormat = this.props.inputFormat || time.formatDate;
|
||||
const date = value ? inputFormat(value) : null;
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='date-picker'>
|
||||
<Input
|
||||
className={style.input}
|
||||
className={classnames(style.input, {[inputClassName]: inputClassName })}
|
||||
error={this.props.error}
|
||||
onMouseDown={this.handleInputMouseDown}
|
||||
label={this.props.label}
|
||||
|
|
@ -2,7 +2,7 @@ $datepicker-primary: $color-primary !default;
|
|||
$datepicker-primary-contrast: $color-primary-contrast !default;
|
||||
$datepicker-primary-dark: $color-primary-dark !default;
|
||||
$datepicker-primary-color: $datepicker-primary !default;
|
||||
$datepicker-primary-hover-color: rgba($datepicker-primary, 0.20) !default;
|
||||
$datepicker-primary-hover-color: rgba($datepicker-primary, .2) !default;
|
||||
$datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
|
||||
$datepicker-primary-dark-color: $datepicker-primary-dark !default;
|
||||
$datepicker-dialog-width: 33 * $unit !default;
|
||||
|
|
@ -18,7 +18,7 @@ $calendar-primary: $color-primary !default;
|
|||
$calendar-primary-contrast: $color-primary-contrast !default;
|
||||
$calendar-primary-color: $calendar-primary !default;
|
||||
$calendar-primary-contrast-color: $calendar-primary-contrast !default;
|
||||
$calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
|
||||
$calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
|
||||
$calendar-arrows-color: $palette-grey-600 !default;
|
||||
$calendar-arrows-font-size: 2 * $unit !default;
|
||||
$calendar-year-font-size: 2.4 !default;
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ class DatePickerTest extends React.Component {
|
|||
|:-----|:-----|:-----|:-----|
|
||||
| `autoOk` | `Boolean` | `false` | Automatically selects a date upon clicking on a day|
|
||||
| `className` | `String` | | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
|
||||
| `inputClassName`| `String` | | This class will be applied to `Input` component of `DatePicker`. |
|
||||
| `inputFormat` | `Function` | | Function to format the date displayed on the input. |
|
||||
| `label` | `String` | | The text string to use for the floating label element in the input component.|
|
||||
| `maxDate` | `Date` | | Date object with the maximum selectable date. |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import ClassNames from 'classnames';
|
||||
import ActivableRenderer from '../hoc/ActivableRenderer';
|
||||
import Button from '../button';
|
||||
import Overlay from '../overlay';
|
||||
import style from './style';
|
||||
|
|
@ -28,11 +29,11 @@ const Dialog = (props) => {
|
|||
{props.title ? <h6 className={style.title}>{props.title}</h6> : null}
|
||||
{props.children}
|
||||
</section>
|
||||
{actions ?
|
||||
<nav role='navigation' className={style.navigation}>
|
||||
{actions}
|
||||
</nav> :
|
||||
null
|
||||
{actions
|
||||
? <nav role='navigation' className={style.navigation}>
|
||||
{actions}
|
||||
</nav>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
</Overlay>
|
||||
|
|
@ -59,4 +60,4 @@ Dialog.defaultProps = {
|
|||
type: 'normal'
|
||||
};
|
||||
|
||||
export default Dialog;
|
||||
export default ActivableRenderer()(Dialog);
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import ClassNames from 'classnames';
|
||||
import ActivableRenderer from '../hoc/ActivableRenderer';
|
||||
import Overlay from '../overlay';
|
||||
import style from './style';
|
||||
|
||||
|
|
@ -33,4 +34,4 @@ Drawer.defaultProps = {
|
|||
type: 'left'
|
||||
};
|
||||
|
||||
export default Drawer;
|
||||
export default ActivableRenderer()(Drawer);
|
||||
|
|
@ -46,6 +46,7 @@
|
|||
right: $input-chevron-offset;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-top: $size solid $input-text-bottom-border-color;
|
||||
border-right: $border;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
const ActivableRendererFactory = (options = {delay: 500}) => (ActivableComponent) => {
|
||||
return class ActivableRenderer extends Component {
|
||||
static propTypes = {
|
||||
active: PropTypes.bool.isRequired,
|
||||
children: PropTypes.any,
|
||||
delay: PropTypes.number
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
delay: options.delay
|
||||
}
|
||||
|
||||
state = {
|
||||
active: this.props.active,
|
||||
rendered: this.props.active
|
||||
};
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (nextProps.active && !this.props.active) this.renderAndActivate();
|
||||
if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
|
||||
}
|
||||
|
||||
renderAndActivate () {
|
||||
if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
|
||||
this.setState({ rendered: true, active: false }, () => {
|
||||
setTimeout(() => this.setState({ active: true }), 20);
|
||||
});
|
||||
}
|
||||
|
||||
deactivateAndUnrender () {
|
||||
this.setState({ rendered: true, active: false }, () => {
|
||||
this.unrenderTimeout = setTimeout(() => {
|
||||
this.setState({ rendered: false });
|
||||
this.unrenderTimeout = null;
|
||||
}, this.props.delay);
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
const { delay, ...others } = this.props; // eslint-disable-line no-unused-vars
|
||||
const { active, rendered } = this.state;
|
||||
return rendered
|
||||
? <ActivableComponent {...others} active={active} />
|
||||
: null;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default ActivableRendererFactory;
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
class Portal extends Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.any,
|
||||
container: PropTypes.any,
|
||||
lockBody: PropTypes.bool
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
lockBody: true
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this._renderOverlay();
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (this._overlayTarget && nextProps.container !== this.props.container) {
|
||||
this._portalContainerNode.removeChild(this._overlayTarget);
|
||||
this._portalContainerNode = getContainer(nextProps.container);
|
||||
this._portalContainerNode.appendChild(this._overlayTarget);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
this._renderOverlay();
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this._unrenderOverlay();
|
||||
this._unmountOverlayTarget();
|
||||
}
|
||||
|
||||
_mountOverlayTarget () {
|
||||
if (!this._overlayTarget) {
|
||||
this._overlayTarget = document.createElement('div');
|
||||
this._portalContainerNode = getContainer(this.props.container);
|
||||
this._portalContainerNode.appendChild(this._overlayTarget);
|
||||
}
|
||||
}
|
||||
|
||||
_unmountOverlayTarget () {
|
||||
if (this._overlayTarget) {
|
||||
this._portalContainerNode.removeChild(this._overlayTarget);
|
||||
this._overlayTarget = null;
|
||||
}
|
||||
this._portalContainerNode = null;
|
||||
}
|
||||
|
||||
_renderOverlay () {
|
||||
const overlay = !this.props.children
|
||||
? null
|
||||
: React.Children.only(this.props.children);
|
||||
|
||||
if (overlay !== null) {
|
||||
if (this.props.lockBody) document.body.style.overflow = 'hidden';
|
||||
this._mountOverlayTarget();
|
||||
this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer(
|
||||
this, overlay, this._overlayTarget
|
||||
);
|
||||
} else {
|
||||
this._unrenderOverlay();
|
||||
this._unmountOverlayTarget();
|
||||
}
|
||||
}
|
||||
|
||||
_unrenderOverlay () {
|
||||
if (this._overlayTarget) {
|
||||
if (this.props.lockBody) document.body.style.overflow = 'scroll';
|
||||
ReactDOM.unmountComponentAtNode(this._overlayTarget);
|
||||
this._overlayInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
getMountNode () {
|
||||
return this._overlayTarget;
|
||||
}
|
||||
|
||||
getOverlayDOMNode () {
|
||||
if (!this.isMounted()) {
|
||||
throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
|
||||
}
|
||||
|
||||
if (this._overlayInstance) {
|
||||
if (this._overlayInstance.getWrappedDOMNode) {
|
||||
return this._overlayInstance.getWrappedDOMNode();
|
||||
} else {
|
||||
return ReactDOM.findDOMNode(this._overlayInstance);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
render () {
|
||||
return null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getContainer (container) {
|
||||
const _container = typeof container === 'function' ? container() : container;
|
||||
return ReactDOM.findDOMNode(_container) || document.body;
|
||||
}
|
||||
|
||||
export default Portal;
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import './utils/polyfills'; // Import polyfills for IE11
|
||||
export App from './app';
|
||||
export AppBar from './app_bar';
|
||||
export Autocomplete from './autocomplete';
|
||||
export Avatar from './avatar';
|
||||
|
|
@ -14,6 +13,7 @@ export Dropdown from './dropdown';
|
|||
export FontIcon from './font_icon';
|
||||
export Form from './form';
|
||||
export Input from './input';
|
||||
export { Layout, NavDrawer, Panel, Sidebar } from './layout';
|
||||
export Link from './link';
|
||||
export List from './list/List';
|
||||
export ListItem from './list/ListItem';
|
||||
|
|
|
|||
|
|
@ -83,11 +83,12 @@ class Input extends React.Component {
|
|||
{InputElement}
|
||||
{icon ? <FontIcon className={style.icon} value={icon} /> : null}
|
||||
<span className={style.bar}></span>
|
||||
{labelText ?
|
||||
<label className={labelClassName}>
|
||||
{labelText}
|
||||
{required ? <span className={style.required}> * </span> : null}
|
||||
</label> : null}
|
||||
{labelText
|
||||
? <label className={labelClassName}>
|
||||
{labelText}
|
||||
{required ? <span className={style.required}> * </span> : null}
|
||||
</label>
|
||||
: null}
|
||||
{hint ? <span className={style.hint}>{hint}</span> : null}
|
||||
{error ? <span className={style.error}>{error}</span> : null}
|
||||
{maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
color: $input-text-highlight-color;
|
||||
}
|
||||
}
|
||||
&:focus, &.filled, &[type='date'], &[type='time'] {
|
||||
&:focus, &.filled, &[type="date"], &[type="time"] {
|
||||
~ .label:not(.fixed) {
|
||||
top: $input-focus-label-top;
|
||||
font-size: $input-label-font-size;
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
transition-duration: $animation-duration;
|
||||
transition-property: top, font-size, color;
|
||||
&.fixed ~ .hint {
|
||||
display: none
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import style from './style';
|
||||
|
||||
const Layout = ({ className, children }) => (
|
||||
<div data-react-toolbox='layout' className={classnames(style.root, className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const ALLOWED = [
|
||||
'Panel',
|
||||
'NavDrawer|Panel',
|
||||
'NavDrawer|Panel|Sidebar',
|
||||
'Panel|Sidebar'
|
||||
];
|
||||
|
||||
function getChildName (child) {
|
||||
if (child.type) {
|
||||
return child.type.name || child.type;
|
||||
}
|
||||
if (!child.constructor || !child.constructor.name) {
|
||||
return 'UNKNOWN';
|
||||
}
|
||||
return child.constructor.name;
|
||||
}
|
||||
|
||||
Layout.propTypes = {
|
||||
children (props, propName, componentName) {
|
||||
// Accept only [NavDrawer]Pane[Sidebar]
|
||||
const children = props[propName];
|
||||
if (React.Children.count(children) > 3) {
|
||||
return new Error(
|
||||
'`' + componentName + '` '
|
||||
+ 'should have a Pane for a child, optionally preceded and/or followed by a Drawer.'
|
||||
);
|
||||
}
|
||||
|
||||
const names = React.Children.map(children, getChildName).join('|');
|
||||
if (!(~ALLOWED.indexOf(names))) {
|
||||
return new Error(
|
||||
'`' + componentName + '` '
|
||||
+ 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.'
|
||||
);
|
||||
}
|
||||
},
|
||||
className: React.PropTypes.string
|
||||
};
|
||||
|
||||
Layout.defaultProps = {
|
||||
className: ''
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import style from './style';
|
||||
|
||||
const NavDrawer = (props) => {
|
||||
const rootClasses = classnames([style.navDrawer], {
|
||||
[style['permanent-' + props.permanentAt]]: props.permanentAt,
|
||||
[style.wide]: (props.width === 'wide'),
|
||||
[style.active]: props.active,
|
||||
[style.pinned]: props.pinned
|
||||
}, props.className);
|
||||
|
||||
const drawerClasses = classnames(style.drawerContent, {
|
||||
[style.scrollY]: props.scrollY
|
||||
});
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='nav-drawer' className={rootClasses} onClick={props.onOverlayClick}>
|
||||
<div data-react-toolbox='nav-drawer-scrim' className={style.scrim}>
|
||||
<aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
|
||||
{props.children}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
NavDrawer.propTypes = {
|
||||
active: React.PropTypes.bool,
|
||||
children: React.PropTypes.any,
|
||||
className: React.PropTypes.string,
|
||||
onOverlayClick: React.PropTypes.func,
|
||||
permanentAt: React.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
|
||||
pinned: React.PropTypes.bool,
|
||||
scrollY: React.PropTypes.bool,
|
||||
width: React.PropTypes.oneOf(['normal', 'wide'])
|
||||
};
|
||||
|
||||
NavDrawer.defaultProps = {
|
||||
active: false,
|
||||
className: '',
|
||||
scrollY: false,
|
||||
width: 'normal'
|
||||
};
|
||||
|
||||
export default NavDrawer;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import style from './style';
|
||||
|
||||
const Panel = ({ children, className, scrollY }) => {
|
||||
const _className = classnames(style.panel, {
|
||||
[style.scrollY]: scrollY
|
||||
}, className);
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='panel' className={_className}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Panel.propTypes = {
|
||||
children: React.PropTypes.any,
|
||||
className: React.PropTypes.string,
|
||||
scrollY: React.PropTypes.bool
|
||||
};
|
||||
|
||||
Panel.defaultProps = {
|
||||
className: '',
|
||||
scrollY: false
|
||||
};
|
||||
|
||||
export default Panel;
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import style from './style';
|
||||
|
||||
const Sidebar = (props) => {
|
||||
const wrapperClasses = classnames(style.sidebar, style[`width-${props.width}`], {
|
||||
[style.pinned]: props.pinned
|
||||
}, props.className);
|
||||
|
||||
const innerClasses = classnames(style.sidebarContent, {
|
||||
[style.scrollY]: props.scrollY
|
||||
});
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='sidebar' className={wrapperClasses}>
|
||||
<aside data-react-toolbox='sidebar-content' className={innerClasses}>
|
||||
{props.children}
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Sidebar.propTypes = {
|
||||
children: React.PropTypes.any,
|
||||
className: React.PropTypes.string,
|
||||
pinned: React.PropTypes.bool,
|
||||
scrollY: React.PropTypes.bool,
|
||||
width: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
|
||||
};
|
||||
|
||||
Sidebar.defaultProps = {
|
||||
className: '',
|
||||
pinned: false,
|
||||
scrollY: false,
|
||||
width: 5
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
$drawer-background-color: $palette-grey-50 !default;
|
||||
$drawer-border-color: $palette-grey-300 !default;
|
||||
$drawer-text-color: $palette-grey-800 !default;
|
||||
|
||||
$drawer-overlay-color: $color-black !default;
|
||||
$drawer-overlay-opacity: .6 !default;
|
||||
|
||||
// from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav
|
||||
$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
|
||||
$navigation-drawer-max-desktop-width: 40 * $unit !default;
|
||||
|
||||
// Mobile:
|
||||
// Width = Screen width − 56 dp
|
||||
// Maximum width: 320dp
|
||||
$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
|
||||
|
||||
// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
|
||||
$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
@mixin open() {
|
||||
transition-delay: $animation-delay;
|
||||
& > .scrim {
|
||||
& > .drawerContent {
|
||||
pointer-events: all;
|
||||
transition-delay: $animation-delay;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin permanent() {
|
||||
@include open();
|
||||
|
||||
width: $navigation-drawer-desktop-width;
|
||||
max-width: $navigation-drawer-desktop-width;
|
||||
|
||||
&.wide {
|
||||
width: $navigation-drawer-max-desktop-width;
|
||||
max-width: $navigation-drawer-max-desktop-width;
|
||||
}
|
||||
|
||||
&.active {
|
||||
& > .scrim {
|
||||
width: 0;
|
||||
background-color: rgba($drawer-overlay-color, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export { default as Layout } from './Layout';
|
||||
export { default as Panel } from './Panel';
|
||||
export { default as NavDrawer } from './NavDrawer';
|
||||
export { default as Sidebar } from './Sidebar';
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
# Layout
|
||||
|
||||
A Layout is a container that can hold a main content area with an optional
|
||||
navigation drawer (on the left) and/or sidebar (on the right). According to
|
||||
the [material design spec](https://www.google.com/design/spec/layout/structure.html#structure-side-nav),
|
||||
the left drawer is typically used for navigation or identity-based content,
|
||||
while the right sidebar is secondary content related to the main content.
|
||||
|
||||
<!-- example -->
|
||||
```jsx
|
||||
import { AppBar, Checkbox, IconButton } from 'react-toolbox';
|
||||
import { Layout, NavDrawer, Panel, Sidebar } from 'react-toolbox';
|
||||
|
||||
class LayoutTest extends React.Component {
|
||||
state = {
|
||||
drawerActive: false,
|
||||
drawerPinned: false,
|
||||
sidebarPinned: false
|
||||
};
|
||||
|
||||
toggleDrawerActive = () => {
|
||||
this.setState({ drawerActive: !this.state.drawerActive });
|
||||
};
|
||||
|
||||
toggleDrawerPinned = () => {
|
||||
this.setState({ drawerPinned: !this.state.drawerPinned });
|
||||
}
|
||||
|
||||
toggleSidebar = () => {
|
||||
this.setState({ sidebarPinned: !this.state.sidebarPinned });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Layout>
|
||||
<NavDrawer active={this.state.drawerActive}
|
||||
pinned={this.state.drawerPinned} permanentAt='xxxl'
|
||||
onOverlayClick={ this.toggleDrawerActive }>
|
||||
<p>
|
||||
Navigation, account switcher, etc. go here.
|
||||
</p>
|
||||
</NavDrawer>
|
||||
<Panel>
|
||||
<AppBar><IconButton icon='menu' inverse={ true } onClick={ this.toggleDrawerActive }/></AppBar>
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
|
||||
<h1>Main Content</h1>
|
||||
<p>Main content goes here.</p>
|
||||
<Checkbox label='Pin drawer' checked={this.state.drawerPinned} onChange={this.toggleDrawerPinned} />
|
||||
<Checkbox label='Show sidebar' checked={this.state.sidebarPinned} onChange={this.toggleSidebar} />
|
||||
</div>
|
||||
</Panel>
|
||||
<Sidebar pinned={ this.state.sidebarPinned } width={ 5 }>
|
||||
<div><IconButton icon='close' onClick={ this.toggleSidebar }/></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<p>Supplemental content goes here.</p>
|
||||
</div>
|
||||
</Sidebar>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<!--component-docgen-start-->
|
||||
|
||||
## Layout
|
||||
|
||||
The primary layout component. This acts as the main container
|
||||
that all subcomponents are placed within. The layout is typically placed
|
||||
so as to fill the entire screen, although it does not have to be.
|
||||
|
||||
### Breakpoints and Increments
|
||||
|
||||
The Layout's subcomponents can alter their appearance and behavior based
|
||||
on the current screen size. The layout uses the screen breakpoints described
|
||||
in the [material design spec](https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints),
|
||||
namely:
|
||||
|
||||
| Width | Abreviation | Typical Device |
|
||||
|:-----|:-----|:-----|
|
||||
| 480px | `xxs` | Phone (portrait) |
|
||||
| 600px | `xs` | Small tablet, phone (landscape) |
|
||||
| 720px | `sm-tablet` | Small tablet (portrait) |
|
||||
| 840px | `sm` | Large tablet (portrait) |
|
||||
| 960px | `md` | Small tablet (landscape) |
|
||||
| 1024px | `lg-tablet` | Large tablet (landscape) |
|
||||
| 1280px | `lg` | Large tablet (landscape), desktop |
|
||||
| 1440px | `xl` | desktop |
|
||||
| 1600px | `xxl` | desktop |
|
||||
| 1920px | `xxxl` | desktop |
|
||||
|
||||
The components also make use of [standard increments](https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments),
|
||||
which is a unit equal to the height of the action bar. At mobile sizes (< `xs`) the increment is
|
||||
56px. On larger screens, it is 64px.
|
||||
|
||||
### Content Area Layout
|
||||
|
||||
The content areas of all three of the subcomponents (`NavDrawer`, `Panel`, and `Sidebar`)
|
||||
use flexbox column layouts set to fill the entire height of the containing `Layout`.
|
||||
The column layout lends itself well to the fixed header/scrolling content that will frequently
|
||||
inhabit these components. By default, these components also do not scroll content vertically
|
||||
so that you can control where scrolling occurs. (For example, see the content of the `Panel`
|
||||
in the sample.)
|
||||
|
||||
If the column layout does not suit your needs, simply fill the content area with an element
|
||||
with `flex` set to 1, and use whatever layout you like within it.
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `children` | `Nodes` | | A `Panel`, optionally preceded by a `NavDrawer` and/or followed by a `Sidebar` |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
## NavDrawer
|
||||
|
||||
The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides
|
||||
in from the left and usually holds [the application's main navigation](https://www.google.com/design/spec/layout/structure.html#structure-side-nav).
|
||||
The drawer's width is based on the screen size:
|
||||
|
||||
| Breakpoint | Drawer Width | Notes |
|
||||
|:-----|:-----|:-----|
|
||||
| < `xs` | 280px or (Screen width - 85px) | whichever is smaller |
|
||||
| > `xs` | 320px | |
|
||||
| > `xs` | 400px | If property `width` is set to `wide` |
|
||||
|
||||
The drawer can be docked to the left side of the screen or can float temporarily
|
||||
as an overlay. You can control the drawer's display manually `active` and `pinned` properties,
|
||||
and can also specify a breakpoint at which the drawer automatically becomes permanently docked.
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `width` | `enum`(`'normal'`,`'wide'`) | `normal` | 320px or 400px. Only applicable above the `sm` breakpoint. |
|
||||
| `active` | `bool` | `false` | If true, the drawer will be shown as an overlay. |
|
||||
| `pinned` | `bool` | `false` | If true, the drawer will be pinned open. `pinned` takes precedence over `active`. |
|
||||
| `permanentAt` | `enum`(`'sm'`,`'md'`,`'lg'`,`'xl'`,`'xxl'`,`'xxxl'`) | | The breakpoint at which the drawer is automatically pinned. |
|
||||
| `scrollY` | `bool` | `false` | If true, the drawer will vertically scroll all content. |
|
||||
| `onOverlayClick` | `Function` | | Callback function to be invoked when the overlay is clicked.|
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
## Panel
|
||||
|
||||
The `Panel` is the main content area within a `Layout`. It is a full-height
|
||||
flexbox column that takes up all remaining horizontal space after the `NavDrawer`
|
||||
and `Sidebar` are laid out.
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `scrollY` | `bool` | `false` | If true, the panel will vertically scroll all content. |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
## Sidebar
|
||||
|
||||
The `Sidebar` is an extra drawer that docks to the right side of the `Layout`.
|
||||
The sidebar's width can be set either to a multiple of the "standard increment"
|
||||
(1 - 12 increments) or as a percentage of the parent `Layout` width (25%, 33%, 50%, 66%, 75%, 100%).
|
||||
Regardless of the width set, at mobile screen sizes the sidebar acts like a full-screen dialog that
|
||||
covers the entire screen (see [examples](https://www.google.com/design/spec/layout/structure.html#structure-side-nav)).
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `width` | `enum`(`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,`12`,`25`,`33`,`50`,`66`,`75`,`100`) | `5` | Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100) |
|
||||
| `pinned` | `bool` | `false` | If true, the sidebar will be pinned open. |
|
||||
| `scrollY` | `bool` | `false` | If true, the sidebar will vertically scroll all content. |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
## Nesting Layouts
|
||||
|
||||
The `Layout` is meant to be used near the top level of your application,
|
||||
so that it occupies the entire screen. However, it is possible to nest one
|
||||
layout inside another:
|
||||
|
||||
```jsx
|
||||
<Layout>
|
||||
<NavDrawer>[navigation here]<NavDrawer>
|
||||
<Panel>
|
||||
<Layout>
|
||||
<Panel>
|
||||
[main content here]
|
||||
</Panel>
|
||||
<Sidebar>
|
||||
[supplemental info here]
|
||||
</Sidebar>
|
||||
</Layout>
|
||||
</Panel>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
The main reason you would want to do something like this would be so that
|
||||
the navigation could be rendered at a high level, while the contents of the
|
||||
inner `Layout` would be controlled by react-router or something like that.
|
||||
|
|
@ -0,0 +1,309 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
@import "./mixins";
|
||||
|
||||
.root {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
overflow-y: hidden;
|
||||
|
||||
.navDrawer {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: width, min-width;
|
||||
|
||||
.scrim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-highest;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: rgba($drawer-overlay-color, 0);
|
||||
transition: background-color $animation-duration $animation-curve-default, width 10ms linear $animation-duration;
|
||||
}
|
||||
|
||||
.drawerContent {
|
||||
@include shadow-2dp();
|
||||
display: flex;
|
||||
width: $navigation-drawer-mobile-width;
|
||||
max-width: $navigation-drawer-max-mobile-width;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
color: $drawer-text-color;
|
||||
pointer-events: none;
|
||||
background-color: $drawer-background-color;
|
||||
border-right: 1px solid $drawer-border-color;
|
||||
transition: transform $animation-duration $animation-curve-default;
|
||||
transform: translateX(-100%);
|
||||
|
||||
&.scrollY {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
@include open();
|
||||
width: $navigation-drawer-mobile-width;
|
||||
max-width: $navigation-drawer-max-mobile-width;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:not(.pinned) {
|
||||
@include open();
|
||||
.scrim {
|
||||
width: 100%;
|
||||
background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
|
||||
transition: background-color $animation-duration $animation-curve-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Larger than mobile width drawer
|
||||
@media screen and (min-width: $layout-breakpoint-xs) {
|
||||
&.pinned {
|
||||
width: $navigation-drawer-desktop-width;
|
||||
max-width: $navigation-drawer-desktop-width;
|
||||
}
|
||||
|
||||
.drawerContent {
|
||||
width: $navigation-drawer-desktop-width;
|
||||
max-width: $navigation-drawer-desktop-width;
|
||||
}
|
||||
|
||||
&.wide {
|
||||
&.pinned {
|
||||
width: $navigation-drawer-max-desktop-width;
|
||||
max-width: $navigation-drawer-max-desktop-width;
|
||||
}
|
||||
|
||||
.drawerContent {
|
||||
width: $navigation-drawer-max-desktop-width;
|
||||
max-width: $navigation-drawer-max-desktop-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Permanent screen, ignore .active and make part of layout
|
||||
@media screen and (min-width: $layout-breakpoint-sm) {
|
||||
&.permanent-sm {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-md) {
|
||||
&.permanent-md {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-lg) {
|
||||
&.permanent-lg {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xl) {
|
||||
&.permanent-xl {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xxl) {
|
||||
&.permanent-xxl {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xxxl) {
|
||||
&.permanent-xxxl {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .root {
|
||||
.scrim {
|
||||
z-index: $z-index-highest - 1;
|
||||
}
|
||||
& .root {
|
||||
.scrim {
|
||||
z-index: $z-index-highest - 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
overflow-y: hidden;
|
||||
|
||||
&.scrollY {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $z-index-highest - 1;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
color: $drawer-text-color;
|
||||
background-color: $drawer-background-color;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: width;
|
||||
|
||||
.sidebarContent {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
overflow-y: hidden;
|
||||
|
||||
&.scrollY {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
$increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
|
||||
|
||||
@each $increment in $increments {
|
||||
&.width-#{$increment} {
|
||||
$mobile: $standard-increment-mobile * $increment;
|
||||
$desktop: $standard-increment-desktop * $increment;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@if $increment < 10 {
|
||||
@media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
|
||||
position: relative;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: $mobile;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: $mobile;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
|
||||
position: relative;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: $desktop;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: $desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $increment < 11 {
|
||||
@media screen and (min-width: $layout-breakpoint-sm-tablet) {
|
||||
position: relative;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: $desktop;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: $desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-sm) {
|
||||
position: relative;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: $desktop;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: $desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$percentages: (25, 33, 50, 66, 75);
|
||||
|
||||
&.width-100 {
|
||||
position: absolute;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@each $pct in $percentages {
|
||||
&.width-#{$pct} {
|
||||
position: absolute;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-sm-tablet) {
|
||||
@each $pct in $percentages {
|
||||
&.width-#{$pct} {
|
||||
position: relative;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: $pct * 1%;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: $pct * 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -52,14 +52,14 @@ class ListItem extends React.Component {
|
|||
}
|
||||
|
||||
render () {
|
||||
const {onMouseDown, to, onClick, ripple, ...other} = this.props;
|
||||
const {className, onMouseDown, to, onClick, ripple, ...other} = this.props; //eslint-disable-line no-unused-vars
|
||||
const children = this.groupChildren();
|
||||
const content = <ListItemLayout {...children} {...other}/>;
|
||||
let className = style.listItem;
|
||||
if (this.props.className) className += ` ${this.props.className}`;
|
||||
let finalClassName = style.listItem;
|
||||
if (className) finalClassName += ` ${className}`;
|
||||
|
||||
return (
|
||||
<li className={className} onClick={this.handleClick} onMouseDown={onMouseDown}>
|
||||
<li className={finalClassName} onClick={this.handleClick} onMouseDown={onMouseDown}>
|
||||
{to ? <a href={this.props.to}>{content}</a> : content}
|
||||
{children.ignored}
|
||||
</li>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import style from './style';
|
||||
|
||||
const ListItemAction = ({action}) => {
|
||||
|
|
@ -13,6 +13,7 @@ const ListItemAction = ({action}) => {
|
|||
};
|
||||
|
||||
ListItemAction.propTypes = {
|
||||
action: PropTypes.object
|
||||
};
|
||||
|
||||
ListItemAction.defaultProps = {
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import style from './style';
|
||||
import classnames from 'classnames';
|
||||
import ListItemText from './ListItemText';
|
||||
|
||||
const types = ['auto', 'normal', 'large'];
|
||||
|
|
@ -16,7 +17,7 @@ class ListItemContent extends React.Component {
|
|||
const {type, children, caption, legend} = this.props;
|
||||
|
||||
let count = React.Children.count(children);
|
||||
[caption, legend].forEach(s => count += s ? 1 : 0);
|
||||
[caption, legend].forEach(s => { count += s ? 1 : 0; });
|
||||
const typeIndex = Math.min(count, types.length);
|
||||
|
||||
return type || types[typeIndex];
|
||||
|
|
@ -24,16 +25,15 @@ class ListItemContent extends React.Component {
|
|||
|
||||
render () {
|
||||
const {children, caption, legend} = this.props;
|
||||
|
||||
const className = `${style.itemContentRoot} ${style[this.getType()]}`;
|
||||
const className = classnames(style.itemContentRoot, {
|
||||
[style[this.getType()]]: style[this.getType()]
|
||||
});
|
||||
|
||||
return (
|
||||
<span className={className}>
|
||||
<span className={style.itemContent}>
|
||||
{caption && <ListItemText primary>{caption}</ListItemText>}
|
||||
{legend && <ListItemText>{legend}</ListItemText>}
|
||||
{children}
|
||||
</span>
|
||||
{caption && <ListItemText primary>{caption}</ListItemText>}
|
||||
{legend && <ListItemText>{legend}</ListItemText>}
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -22,12 +22,13 @@ const ListItemLayout = (props) => {
|
|||
...props.rightActions
|
||||
];
|
||||
const content = props.itemContent || <ListItemContent caption={props.caption} legend={props.legend} />;
|
||||
const emptyActions = (item) => !item[0] && !item[1];
|
||||
|
||||
return (
|
||||
<span className={className}>
|
||||
<ListItemActions type='left'>{leftActions}</ListItemActions>
|
||||
{!emptyActions(leftActions) > 0 && <ListItemActions type='left'>{leftActions}</ListItemActions>}
|
||||
{content}
|
||||
<ListItemActions type='right'>{rightActions}</ListItemActions>
|
||||
{!emptyActions(leftActions) > 0 && <ListItemActions type='right'>{rightActions}</ListItemActions>}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
|
@ -6,7 +6,7 @@ const ListItemText = ({className, primary, children, ...other}) => {
|
|||
const _className = ClassNames(style.itemText, {[style.primary]: primary}, className);
|
||||
|
||||
return (
|
||||
<span className={_className} {...other}>
|
||||
<span data-react-toolbox="list-item-text" className={_className} {...other}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
.listItem {
|
||||
position: relative;
|
||||
> [data-react-toolbox='ripple'] {
|
||||
> [data-react-toolbox="ripple"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -61,18 +61,18 @@
|
|||
&:not(.checkboxItem) {
|
||||
opacity: .5;
|
||||
}
|
||||
> .checkbox > [data-react-toolbox='label'] {
|
||||
> .checkbox > [data-react-toolbox="label"] {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
[data-react-toolbox='font-icon'] {
|
||||
[data-react-toolbox="font-icon"] {
|
||||
width: $list-item-icon-size;
|
||||
}
|
||||
& :last-child {
|
||||
> [data-react-toolbox='font-icon'] {
|
||||
> [data-react-toolbox="font-icon"] {
|
||||
margin-right: $list-item-right-icon-margin;
|
||||
}
|
||||
}
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
> [data-react-toolbox='font-icon'] {
|
||||
> [data-react-toolbox="font-icon"] {
|
||||
font-size: $list-item-icon-font-size;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
|
@ -113,18 +113,13 @@
|
|||
display: block;
|
||||
flex-grow: 1;
|
||||
&.large {
|
||||
display: flex;
|
||||
height: $list-item-min-height-legend;
|
||||
|
||||
.itemContent {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -133,10 +128,10 @@
|
|||
align-items: center;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
> [data-react-toolbox='check'] {
|
||||
> [data-react-toolbox="check"] {
|
||||
margin-right: $list-item-right-checkbox-margin;
|
||||
}
|
||||
> [data-react-toolbox='label'] {
|
||||
> [data-react-toolbox="label"] {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -149,9 +144,9 @@
|
|||
display: block;
|
||||
|
||||
&:not(.primary) {
|
||||
padding-top: $list-item-legend-margin-top;
|
||||
font-size: $font-size-small;
|
||||
color: $color-text-secondary;
|
||||
padding-top: $list-item-legend-margin-top;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -106,7 +106,9 @@ class Menu extends React.Component {
|
|||
};
|
||||
|
||||
calculatePosition () {
|
||||
const {top, left, height, width} = ReactDOM.findDOMNode(this).parentNode.getBoundingClientRect();
|
||||
const parentNode = ReactDOM.findDOMNode(this).parentNode;
|
||||
if (!parentNode) return;
|
||||
const {top, left, height, width} = parentNode.getBoundingClientRect();
|
||||
const {height: wh, width: ww} = utils.getViewport();
|
||||
const toTop = top < ((wh / 2) - height / 2);
|
||||
const toLeft = left < ((ww / 2) - width / 2);
|
||||
|
|
@ -125,7 +127,7 @@ class Menu extends React.Component {
|
|||
} else if (position === POSITION.BOTTOM_LEFT) {
|
||||
return { clip: `rect(${height}px 0 ${height}px 0)` };
|
||||
} else if (position === POSITION.TOP_LEFT) {
|
||||
return { clip: `rect(0 0 0 0)` };
|
||||
return { clip: 'rect(0 0 0 0)' };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,14 +2,14 @@
|
|||
@import "./config";
|
||||
|
||||
.horizontal {
|
||||
> [data-react-toolbox='button'], > [data-react-toolbox='link'] {
|
||||
> [data-react-toolbox="button"], > [data-react-toolbox="link"] {
|
||||
display: inline-block;
|
||||
margin: 0 $navigation-space / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical {
|
||||
> [data-react-toolbox='button'], > [data-react-toolbox='link'] {
|
||||
> [data-react-toolbox="button"], > [data-react-toolbox="link"] {
|
||||
display: block;
|
||||
margin: $navigation-space / 2;
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
.vertical, .horizontal {
|
||||
padding: $navigation-space / 2;
|
||||
|
||||
> [data-react-toolbox='link'] {
|
||||
> [data-react-toolbox="link"] {
|
||||
color: $navigation-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Portal from '../hoc/Portal';
|
||||
import ClassNames from 'classnames';
|
||||
import style from './style';
|
||||
|
||||
|
|
@ -18,26 +18,18 @@ class Overlay extends React.Component {
|
|||
};
|
||||
|
||||
componentDidMount () {
|
||||
this.app = document.querySelector('[data-react-toolbox="app"]') || document.body;
|
||||
this.node = document.createElement('div');
|
||||
this.node.setAttribute('data-react-toolbox', 'overlay');
|
||||
this.app.appendChild(this.node);
|
||||
this.handleRender();
|
||||
if (this.props.active) {
|
||||
this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
this.handleRender();
|
||||
if (this.props.active && !this.escKeyListener) {
|
||||
this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
ReactDOM.unmountComponentAtNode(this.node);
|
||||
this.app.removeChild(this.node);
|
||||
if (this.escKeyListener) {
|
||||
document.body.removeEventListener('keydown', this.handleEscKey);
|
||||
this.escKeyListener = null;
|
||||
|
|
@ -50,24 +42,20 @@ class Overlay extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
handleRender () {
|
||||
render () {
|
||||
const className = ClassNames(style.root, {
|
||||
[style.active]: this.props.active,
|
||||
[style.invisible]: this.props.invisible
|
||||
}, this.props.className);
|
||||
|
||||
const overlay = (
|
||||
<div className={className}>
|
||||
<div className={style.overlay} onClick={this.props.onClick} />
|
||||
{this.props.children}
|
||||
</div>
|
||||
return (
|
||||
<Portal>
|
||||
<div className={className}>
|
||||
<div className={style.overlay} onClick={this.props.onClick} />
|
||||
{this.props.children}
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
ReactDOM.unstable_renderSubtreeIntoContainer(this, overlay, this.node);
|
||||
}
|
||||
|
||||
render () {
|
||||
return React.DOM.noscript();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import Ripple from '../ripple';
|
||||
import style from './style';
|
||||
|
||||
|
|
@ -7,6 +7,12 @@ const Radio = ({checked, children, onMouseDown}) => {
|
|||
return <div data-react-toolbox='radio' onMouseDown={onMouseDown} className={className}>{children}</div>;
|
||||
};
|
||||
|
||||
Radio.propTypes = {
|
||||
checked: PropTypes.bool,
|
||||
children: PropTypes.any,
|
||||
onMouseDown: PropTypes.func
|
||||
};
|
||||
|
||||
export default Ripple({
|
||||
className: style.ripple,
|
||||
spread: 2.6,
|
||||
|
|
@ -38,7 +38,7 @@ class RadioButton extends React.Component {
|
|||
|
||||
render () {
|
||||
const className = ClassNames(style[this.props.disabled ? 'disabled' : 'field'], this.props.className);
|
||||
const { onChange, ...others } = this.props;
|
||||
const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
|
||||
|
||||
return (
|
||||
<label data-react-toolbox='radio-button' className={className}>
|
||||
|
|
@ -87,10 +87,10 @@ const Ripple = (options = {}) => {
|
|||
} else {
|
||||
const {
|
||||
children,
|
||||
ripple,
|
||||
ripple, //eslint-disable-line no-unused-vars
|
||||
rippleClassName: className,
|
||||
rippleCentered: centered,
|
||||
rippleSpread: spread,
|
||||
rippleCentered: centered, //eslint-disable-line no-unused-vars
|
||||
rippleSpread: spread, //eslint-disable-line no-unused-vars
|
||||
...other
|
||||
} = this.props;
|
||||
|
||||
|
|
@ -4,8 +4,8 @@
|
|||
.container {
|
||||
position: relative;
|
||||
width: calc(100% - #{$slider-knob-size});
|
||||
height: $slider-knob-size;
|
||||
margin-right: $slider-knob-size;
|
||||
height: $slider-knob-size;
|
||||
user-select: none;
|
||||
&:not(:last-child) {
|
||||
margin-right: $slider-side-separation + $slider-knob-size;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import ClassNames from 'classnames';
|
||||
import ActivableRenderer from '../hoc/ActivableRenderer';
|
||||
import Button from '../button';
|
||||
import FontIcon from '../font_icon';
|
||||
import Overlay from '../overlay';
|
||||
|
|
@ -21,24 +22,13 @@ class Snackbar extends React.Component {
|
|||
type: React.PropTypes.string
|
||||
};
|
||||
|
||||
state = {
|
||||
curTimeout: null
|
||||
};
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (nextProps.active && nextProps.timeout) {
|
||||
if (this.state.curTimeout) clearTimeout(this.state.curTimeout);
|
||||
|
||||
const curTimeout = setTimeout(() => {
|
||||
if (this.curTimeout) clearTimeout(this.curTimeout);
|
||||
this.curTimeout = setTimeout(() => {
|
||||
nextProps.onTimeout();
|
||||
this.setState({
|
||||
curTimeout: null
|
||||
});
|
||||
this.curTimeout = null;
|
||||
}, nextProps.timeout);
|
||||
|
||||
this.setState({
|
||||
curTimeout
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,4 +50,4 @@ class Snackbar extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Snackbar;
|
||||
export default ActivableRenderer()(Snackbar);
|
||||
|
|
@ -38,7 +38,7 @@ class Switch extends React.Component {
|
|||
render () {
|
||||
let className = style[this.props.disabled ? 'disabled' : 'field'];
|
||||
const switchClassName = style[this.props.checked ? 'on' : 'off'];
|
||||
const { onChange, ...others } = this.props;
|
||||
const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
|
||||
if (this.props.className) className += ` ${this.props.className}`;
|
||||
|
||||
return (
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import Ripple from '../ripple';
|
||||
import style from './style';
|
||||
|
||||
|
|
@ -6,6 +6,10 @@ const Thumb = ({children, onMouseDown}) => (
|
|||
<span role='thumb' className={style.thumb} onMouseDown={onMouseDown}>{children}</span>
|
||||
);
|
||||
|
||||
Thumb.propTypes = {
|
||||
children: PropTypes.any
|
||||
};
|
||||
|
||||
export default Ripple({
|
||||
className: style.ripple,
|
||||
spread: 2.6,
|
||||
|
|
@ -28,6 +28,7 @@ TableHead.propTypes = {
|
|||
className: React.PropTypes.string,
|
||||
model: React.PropTypes.object,
|
||||
onSelect: React.PropTypes.func,
|
||||
selectable: React.PropTypes.bool,
|
||||
selected: React.PropTypes.bool
|
||||
};
|
||||
|
||||
|
|
@ -21,13 +21,11 @@ class Tabs extends React.Component {
|
|||
};
|
||||
|
||||
componentDidMount () {
|
||||
!this.props.disableAnimatedBottomBorder &&
|
||||
this.updatePointer(this.props.index);
|
||||
!this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
!this.props.disableAnimatedBottomBorder &&
|
||||
this.updatePointer(nextProps.index);
|
||||
!this.props.disableAnimatedBottomBorder && this.updatePointer(nextProps.index);
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
|
|
@ -86,11 +84,13 @@ class Tabs extends React.Component {
|
|||
return this.props.index === idx;
|
||||
});
|
||||
|
||||
return React.cloneElement(contents[activeIdx], {
|
||||
key: activeIdx,
|
||||
active: true,
|
||||
tabIndex: activeIdx
|
||||
});
|
||||
if (contents && contents[activeIdx]) {
|
||||
return React.cloneElement(contents[activeIdx], {
|
||||
key: activeIdx,
|
||||
active: true,
|
||||
tabIndex: activeIdx
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
|
|
@ -8,4 +8,4 @@ $tab-pointer-color: $color-primary !default;
|
|||
$tab-pointer-height: .2 * $unit !default;
|
||||
$tab-text: $color-black !default;
|
||||
$tab-text-color: $tab-text !default;
|
||||
$tab-text-inactive-color: rgba($tab-text, 0.70) !default;
|
||||
$tab-text-inactive-color: rgba($tab-text, .7) !default;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue