Migrate styles to PostCSS (#666)
* Add postcss-next postcss-include and reporter
* Add stylelint
* Add CSS colors
* Add CSS custom media queries
* Use dashes for CSS colors
* Add base CSS variables
* Remove AppBar SASS dependency from spec page
* Migrate AppBar style to PostCSS
* Migrate Avatar style to PostCSS
* Migrate Ripple style to PostCSS
* Remove unneeded media CSS import in Avatar
* Add shadows to CSS variables
* Migrate Button style to PostCSS
* Update webpack test config and linting from npm
* Migrate Input style to PostCSS
* Add missing input config variables for Dropdown and Autocomplete
* Migrate Chip style to PostCSS
* Migrate Autocomplete style to PostCSS
* Migrate Dropdown style to PostCSS
* Migrate animations to PostCSS
* Migrate Card style to PostCSS
* Migrate Checkbox style to PostCSS
* Migrate DataPicker style to PostCSS
* Migrate Dialog style to PostCSS
* Migrate Drawer style to PostCSS
* Add postcss-mixins and postcss-each
* Migrate Layout style to PostCSS
* Fix bug in button theme
* Bugfix in avatar css
* Add some missing nesting notations
* Migrate Link style to PostCSS
* Migrate List style to PostCSS
* Migrate Menu style to PostCSS
* Migrate Navigation style to PostCSS
* Migrate Overlay style to PostCSS
* Migrate ProgressBar style to PostCSS
* Migrate Radio style to PostCSS
* Migrate Slider style to PostCSS
* Migrate Snackbar style to PostCSS
* Migrate Switch style to PostCSS
* Migrate Table style to PostCSS
* Migrate Tabs style to PostCSS
* Migrate TimePicker to PostCSS
* Migrate Tooltip styles to PostCSS
* Update webpack config for testing and tests
* Migrate commons to PostCSS
* Remove sass from main project
* Bye from docs to sass
* Build with CSS
* Remove unneded deps for sass in docs subproject
* Fix tests
* use 4p shadow in AppBar as spec indicates
* Fixed typo in list/config.css
* Fix tests
* Fix linter errors
* Latest build
* Release 2.0.0-beta.0
* Remove sass lint
* fixes old sass var in css config
* Update linter
* New Table implementation
* Fix old sass var in list/config.css
See da0c47041e.
* Remove normalize.css from commons.css
* Update dependencies
* Latest build
* Input ready to accept visible hint
* Prepare slider and progress to be disabled
* Render Snackbar using Portal
* Refactor Dialog, Drawer and Overlay to be used in Layout
* Add inner layer to AppBar
* New layout
* Use Layout in spec
* Latest build
* remove layout playground example
* add smTablet and lgTablet to NavDrawer in Layout readme
* add default prop className to Layout, NavDrawer and Sidebar
* fix css linter errors in card and slider
* Typings for Table component
* Add missing Drawer identifier
* Update lib build
* Adds onQueryChange callback property to Autocomplete
The onQueryChange callback is called when the value of the query changes in Autocomplete.
It is called with the new query value.
* Fix #966
* Fix #965
* Fixes #976
* Updated css-related dependencies
Removed usages of `addDependencyTo` since it's deprecated and not needed anymore.
See https://github.com/postcss/postcss-import#adddependencyto
* Enabled HMR for styles by disabling extracting them to a CSS file
* Remove lib from repo
* Remove lib
* Fixes #1021
* Build using Gulp
* Export ThemeProvider from react-css-themr
* Add CHANGELOG to release command
* Release 2.0.0-beta.1
* Remove immutability helper
* Update dependencies
* Fix Tooltip trying to render after it's been unmounted
* Fixes #1038
* Release 2.0.0-beta.2
* Add ramda, refactor utils and remove slide animation modules
* Remove separate slide animations modules
* Remove box-sizing reset and body rule
* Remove commons.css
* Release 2.0.0-beta.4
* Update dependencies
* Fixes #1061
* More aggresive guard condition for multiple autocomplete
* Fix typeof check in isBrowser function
* Fixes an issue when specs are opened with browsers that do not support Object.entries().
* Import from ramda using the 'import XXX from "ramda/src/XXX"' pattern so that bundle sizes will be smaller for not including the whole ramda package.
* Fix #1032
* Fix tests
* Update yarn.lock
* Fixes #1064
old
Javi Velasco
GitHub
parent
8f61374ddf
commit
81acda7162
|
|
@ -23,7 +23,7 @@ plugins:
|
|||
|
||||
'Commiting new version':
|
||||
plugin: 'bumped-terminal'
|
||||
command: 'git add CHANGELOG.md package.json && git commit package.json -m "Release $newVersion"'
|
||||
command: 'git add CHANGELOG.md package.json && git commit CHANGELOG.md package.json -m "Release $newVersion"'
|
||||
|
||||
'Detecting problem before publish':
|
||||
plugin: 'bumped-terminal'
|
||||
|
|
|
|||
397
.sass-lint.yml
397
.sass-lint.yml
|
|
@ -1,397 +0,0 @@
|
|||
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-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
|
||||
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
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"at-rule-no-unknown": [true, {
|
||||
ignoreAtRules: ["define-mixin", "mixin", "each"]
|
||||
}],
|
||||
"property-no-unknown": [ true, {
|
||||
"ignoreProperties": [
|
||||
"composes",
|
||||
"font-smoothing"
|
||||
]
|
||||
}],
|
||||
"color-hex-case": "lower",
|
||||
"declaration-block-properties-order": "alphabetical",
|
||||
"font-family-name-quotes": "always-where-recommended",
|
||||
"string-quotes": "single",
|
||||
"selector-pseudo-class-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignorePseudoClasses": [
|
||||
"global"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
105
CHANGELOG.md
105
CHANGELOG.md
|
|
@ -1,3 +1,108 @@
|
|||
<a name="2.0.0-beta.0"></a>
|
||||
# 2.0.0-beta.0 (2016-12-07)
|
||||
|
||||
* Add CHANGELOG to release command ([50b7a95](https://github.com/react-toolbox/react-toolbox/commit/50b7a95))
|
||||
* add default prop className to Layout, NavDrawer and Sidebar ([868c284](https://github.com/react-toolbox/react-toolbox/commit/868c284))
|
||||
* Add inner layer to AppBar ([8c541e2](https://github.com/react-toolbox/react-toolbox/commit/8c541e2))
|
||||
* Add missing Drawer identifier ([5616697](https://github.com/react-toolbox/react-toolbox/commit/5616697))
|
||||
* add smTablet and lgTablet to NavDrawer in Layout readme ([3ef9415](https://github.com/react-toolbox/react-toolbox/commit/3ef9415))
|
||||
* Adds onQueryChange callback property to Autocomplete ([e971fb4](https://github.com/react-toolbox/react-toolbox/commit/e971fb4))
|
||||
* Build using Gulp ([fbae545](https://github.com/react-toolbox/react-toolbox/commit/fbae545))
|
||||
* Enabled HMR for styles by disabling extracting them to a CSS file ([52c4829](https://github.com/react-toolbox/react-toolbox/commit/52c4829))
|
||||
* Export ThemeProvider from react-css-themr ([6af337c](https://github.com/react-toolbox/react-toolbox/commit/6af337c))
|
||||
* Fix #965 ([c92b3c8](https://github.com/react-toolbox/react-toolbox/commit/c92b3c8)), closes [#965](https://github.com/react-toolbox/react-toolbox/issues/965)
|
||||
* Fix #966 ([9944ef8](https://github.com/react-toolbox/react-toolbox/commit/9944ef8)), closes [#966](https://github.com/react-toolbox/react-toolbox/issues/966)
|
||||
* fix css linter errors in card and slider ([5ec9d6c](https://github.com/react-toolbox/react-toolbox/commit/5ec9d6c))
|
||||
* Fix old sass var in list/config.css ([7d621ed](https://github.com/react-toolbox/react-toolbox/commit/7d621ed))
|
||||
* Fixes #1021 ([8c250c6](https://github.com/react-toolbox/react-toolbox/commit/8c250c6)), closes [#1021](https://github.com/react-toolbox/react-toolbox/issues/1021)
|
||||
* Fixes #1025 ([c18ffa4](https://github.com/react-toolbox/react-toolbox/commit/c18ffa4)), closes [#1025](https://github.com/react-toolbox/react-toolbox/issues/1025)
|
||||
* Fixes #976 ([0e89b2d](https://github.com/react-toolbox/react-toolbox/commit/0e89b2d)), closes [#976](https://github.com/react-toolbox/react-toolbox/issues/976)
|
||||
* fixes old sass var in css config ([da0c470](https://github.com/react-toolbox/react-toolbox/commit/da0c470))
|
||||
* Input ready to accept visible hint ([577feb3](https://github.com/react-toolbox/react-toolbox/commit/577feb3))
|
||||
* Latest build ([f032f68](https://github.com/react-toolbox/react-toolbox/commit/f032f68))
|
||||
* Latest build ([170ee4d](https://github.com/react-toolbox/react-toolbox/commit/170ee4d))
|
||||
* New layout ([fd79c84](https://github.com/react-toolbox/react-toolbox/commit/fd79c84))
|
||||
* New Table implementation ([7d0035a](https://github.com/react-toolbox/react-toolbox/commit/7d0035a))
|
||||
* Prepare slider and progress to be disabled ([69f7868](https://github.com/react-toolbox/react-toolbox/commit/69f7868))
|
||||
* Refactor Dialog, Drawer and Overlay to be used in Layout ([8e76427](https://github.com/react-toolbox/react-toolbox/commit/8e76427))
|
||||
* remove layout playground example ([76c636d](https://github.com/react-toolbox/react-toolbox/commit/76c636d))
|
||||
* Remove lib ([6874dbb](https://github.com/react-toolbox/react-toolbox/commit/6874dbb))
|
||||
* Remove lib from repo ([d7f743a](https://github.com/react-toolbox/react-toolbox/commit/d7f743a))
|
||||
* Remove normalize.css from commons.css ([1b62b78](https://github.com/react-toolbox/react-toolbox/commit/1b62b78))
|
||||
* Remove sass lint ([532abd1](https://github.com/react-toolbox/react-toolbox/commit/532abd1))
|
||||
* Render Snackbar using Portal ([b293fa1](https://github.com/react-toolbox/react-toolbox/commit/b293fa1))
|
||||
* Typings for Table component ([6540226](https://github.com/react-toolbox/react-toolbox/commit/6540226))
|
||||
* Update dependencies ([67cec5b](https://github.com/react-toolbox/react-toolbox/commit/67cec5b))
|
||||
* Update lib build ([c4f968b](https://github.com/react-toolbox/react-toolbox/commit/c4f968b))
|
||||
* Update linter ([23e538f](https://github.com/react-toolbox/react-toolbox/commit/23e538f))
|
||||
* Updated css-related dependencies ([292b838](https://github.com/react-toolbox/react-toolbox/commit/292b838))
|
||||
* Use Layout in spec ([042ecba](https://github.com/react-toolbox/react-toolbox/commit/042ecba))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.0-beta.0"></a>
|
||||
# 2.0.0-beta.0 (2016-10-06)
|
||||
|
||||
* Add base CSS variables ([05302dd](https://github.com/react-toolbox/react-toolbox/commit/05302dd))
|
||||
* Add CSS colors ([624b875](https://github.com/react-toolbox/react-toolbox/commit/624b875))
|
||||
* Add CSS custom media queries ([c81dee4](https://github.com/react-toolbox/react-toolbox/commit/c81dee4))
|
||||
* Add missing input config variables for Dropdown and Autocomplete ([159da10](https://github.com/react-toolbox/react-toolbox/commit/159da10))
|
||||
* Add postcss-mixins and postcss-each ([1f55336](https://github.com/react-toolbox/react-toolbox/commit/1f55336))
|
||||
* Add postcss-next postcss-include and reporter ([fa35b84](https://github.com/react-toolbox/react-toolbox/commit/fa35b84))
|
||||
* Add shadows to CSS variables ([ac60b21](https://github.com/react-toolbox/react-toolbox/commit/ac60b21))
|
||||
* Add some missing nesting notations ([6b2e71d](https://github.com/react-toolbox/react-toolbox/commit/6b2e71d))
|
||||
* Add stylelint ([990d159](https://github.com/react-toolbox/react-toolbox/commit/990d159))
|
||||
* Bugfix in avatar css ([6c87982](https://github.com/react-toolbox/react-toolbox/commit/6c87982))
|
||||
* Build with CSS ([7ddf7e3](https://github.com/react-toolbox/react-toolbox/commit/7ddf7e3))
|
||||
* Bye from docs to sass ([9e7121b](https://github.com/react-toolbox/react-toolbox/commit/9e7121b))
|
||||
* Fix bug in button theme ([2e16602](https://github.com/react-toolbox/react-toolbox/commit/2e16602))
|
||||
* Fix linter errors ([ca19130](https://github.com/react-toolbox/react-toolbox/commit/ca19130))
|
||||
* Fix tests ([ac922f6](https://github.com/react-toolbox/react-toolbox/commit/ac922f6))
|
||||
* Fix tests ([6dcd36b](https://github.com/react-toolbox/react-toolbox/commit/6dcd36b))
|
||||
* Fixed typo in list/config.css ([7aae2fb](https://github.com/react-toolbox/react-toolbox/commit/7aae2fb))
|
||||
* Latest build ([9b263ff](https://github.com/react-toolbox/react-toolbox/commit/9b263ff))
|
||||
* Migrate animations to PostCSS ([2547c5c](https://github.com/react-toolbox/react-toolbox/commit/2547c5c))
|
||||
* Migrate AppBar style to PostCSS ([a5ad4fc](https://github.com/react-toolbox/react-toolbox/commit/a5ad4fc))
|
||||
* Migrate Autocomplete style to PostCSS ([6c615d6](https://github.com/react-toolbox/react-toolbox/commit/6c615d6))
|
||||
* Migrate Avatar style to PostCSS ([30cf0c8](https://github.com/react-toolbox/react-toolbox/commit/30cf0c8))
|
||||
* Migrate Button style to PostCSS ([b7bd84d](https://github.com/react-toolbox/react-toolbox/commit/b7bd84d))
|
||||
* Migrate Card style to PostCSS ([e9c2824](https://github.com/react-toolbox/react-toolbox/commit/e9c2824))
|
||||
* Migrate Checkbox style to PostCSS ([5f0a25c](https://github.com/react-toolbox/react-toolbox/commit/5f0a25c))
|
||||
* Migrate Chip style to PostCSS ([d3520d7](https://github.com/react-toolbox/react-toolbox/commit/d3520d7))
|
||||
* Migrate commons to PostCSS ([c02f204](https://github.com/react-toolbox/react-toolbox/commit/c02f204))
|
||||
* Migrate DataPicker style to PostCSS ([334620c](https://github.com/react-toolbox/react-toolbox/commit/334620c))
|
||||
* Migrate Dialog style to PostCSS ([c85ea04](https://github.com/react-toolbox/react-toolbox/commit/c85ea04))
|
||||
* Migrate Drawer style to PostCSS ([ae11fae](https://github.com/react-toolbox/react-toolbox/commit/ae11fae))
|
||||
* Migrate Dropdown style to PostCSS ([d6d4dff](https://github.com/react-toolbox/react-toolbox/commit/d6d4dff))
|
||||
* Migrate Input style to PostCSS ([090b098](https://github.com/react-toolbox/react-toolbox/commit/090b098))
|
||||
* Migrate Layout style to PostCSS ([247e973](https://github.com/react-toolbox/react-toolbox/commit/247e973))
|
||||
* Migrate Link style to PostCSS ([95cf291](https://github.com/react-toolbox/react-toolbox/commit/95cf291))
|
||||
* Migrate List style to PostCSS ([f8f1edd](https://github.com/react-toolbox/react-toolbox/commit/f8f1edd))
|
||||
* Migrate Menu style to PostCSS ([955ca1d](https://github.com/react-toolbox/react-toolbox/commit/955ca1d))
|
||||
* Migrate Navigation style to PostCSS ([7524ff0](https://github.com/react-toolbox/react-toolbox/commit/7524ff0))
|
||||
* Migrate Overlay style to PostCSS ([9aa9547](https://github.com/react-toolbox/react-toolbox/commit/9aa9547))
|
||||
* Migrate ProgressBar style to PostCSS ([47c2621](https://github.com/react-toolbox/react-toolbox/commit/47c2621))
|
||||
* Migrate Radio style to PostCSS ([f6bd59b](https://github.com/react-toolbox/react-toolbox/commit/f6bd59b))
|
||||
* Migrate Ripple style to PostCSS ([e4bebc8](https://github.com/react-toolbox/react-toolbox/commit/e4bebc8))
|
||||
* Migrate Slider style to PostCSS ([59c5ada](https://github.com/react-toolbox/react-toolbox/commit/59c5ada))
|
||||
* Migrate Snackbar style to PostCSS ([44849be](https://github.com/react-toolbox/react-toolbox/commit/44849be))
|
||||
* Migrate Switch style to PostCSS ([6cc0dc7](https://github.com/react-toolbox/react-toolbox/commit/6cc0dc7))
|
||||
* Migrate Table style to PostCSS ([c6b19b6](https://github.com/react-toolbox/react-toolbox/commit/c6b19b6))
|
||||
* Migrate Tabs style to PostCSS ([ae0b0fb](https://github.com/react-toolbox/react-toolbox/commit/ae0b0fb))
|
||||
* Migrate TimePicker to PostCSS ([153ab93](https://github.com/react-toolbox/react-toolbox/commit/153ab93))
|
||||
* Migrate Tooltip styles to PostCSS ([ab74c58](https://github.com/react-toolbox/react-toolbox/commit/ab74c58))
|
||||
* Release 2.0.0-beta.0 ([280bf69](https://github.com/react-toolbox/react-toolbox/commit/280bf69))
|
||||
* Remove AppBar SASS dependency from spec page ([1011eb3](https://github.com/react-toolbox/react-toolbox/commit/1011eb3))
|
||||
* Remove sass from main project ([7b562b8](https://github.com/react-toolbox/react-toolbox/commit/7b562b8))
|
||||
* Remove unneded deps for sass in docs subproject ([72fdc19](https://github.com/react-toolbox/react-toolbox/commit/72fdc19))
|
||||
* Remove unneeded media CSS import in Avatar ([359d6be](https://github.com/react-toolbox/react-toolbox/commit/359d6be))
|
||||
* Update webpack config for testing and tests ([5da2583](https://github.com/react-toolbox/react-toolbox/commit/5da2583))
|
||||
* Update webpack test config and linting from npm ([2a735cd](https://github.com/react-toolbox/react-toolbox/commit/2a735cd))
|
||||
* use 4p shadow in AppBar as spec indicates ([1da85d3](https://github.com/react-toolbox/react-toolbox/commit/1da85d3))
|
||||
* Use dashes for CSS colors ([566b349](https://github.com/react-toolbox/react-toolbox/commit/566b349))
|
||||
|
||||
|
||||
|
||||
<a name="1.1.2"></a>
|
||||
## 1.1.2 (2016-08-11)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export { ThemeProvider as default } from 'react-css-themr';
|
||||
|
|
@ -1,301 +0,0 @@
|
|||
//-- Color definitions taken from Material Design Lite
|
||||
|
||||
// Red
|
||||
$palette-red-50: rgb(255,235,238);
|
||||
$palette-red-100: rgb(255,205,210);
|
||||
$palette-red-200: rgb(239,154,154);
|
||||
$palette-red-300: rgb(229,115,115);
|
||||
$palette-red-400: rgb(239,83,80);
|
||||
$palette-red-500: rgb(244,67,54);
|
||||
$palette-red-600: rgb(229,57,53);
|
||||
$palette-red-700: rgb(211,47,47);
|
||||
$palette-red-800: rgb(198,40,40);
|
||||
$palette-red-900: rgb(183,28,28);
|
||||
$palette-red-a100: rgb(255,138,128);
|
||||
$palette-red-a200: rgb(255,82,82);
|
||||
$palette-red-a400: rgb(255,23,68);
|
||||
$palette-red-a700: rgb(213,0,0);
|
||||
|
||||
// Pink
|
||||
$palette-pink-50: rgb(252,228,236);
|
||||
$palette-pink-100: rgb(248,187,208);
|
||||
$palette-pink-200: rgb(244,143,177);
|
||||
$palette-pink-300: rgb(240,98,146);
|
||||
$palette-pink-400: rgb(236,64,122);
|
||||
$palette-pink-500: rgb(233,30,99);
|
||||
$palette-pink-600: rgb(216,27,96);
|
||||
$palette-pink-700: rgb(194,24,91);
|
||||
$palette-pink-800: rgb(173,20,87);
|
||||
$palette-pink-900: rgb(136,14,79);
|
||||
$palette-pink-a100: rgb(255,128,171);
|
||||
$palette-pink-a200: rgb(255,64,129);
|
||||
$palette-pink-a400: rgb(245,0,87);
|
||||
$palette-pink-a700: rgb(197,17,98);
|
||||
|
||||
// Purple
|
||||
$palette-purple-50: rgb(243,229,245);
|
||||
$palette-purple-100: rgb(225,190,231);
|
||||
$palette-purple-200: rgb(206,147,216);
|
||||
$palette-purple-300: rgb(186,104,200);
|
||||
$palette-purple-400: rgb(171,71,188);
|
||||
$palette-purple-500: rgb(156,39,176);
|
||||
$palette-purple-600: rgb(142,36,170);
|
||||
$palette-purple-700: rgb(123,31,162);
|
||||
$palette-purple-800: rgb(106,27,154);
|
||||
$palette-purple-900: rgb(74,20,140);
|
||||
$palette-purple-a100: rgb(234,128,252);
|
||||
$palette-purple-a200: rgb(224,64,251);
|
||||
$palette-purple-a400: rgb(213,0,249);
|
||||
$palette-purple-a700: rgb(170,0,255);
|
||||
|
||||
//Deep Purple
|
||||
$palette-deep-purple-50: rgb(237,231,246);
|
||||
$palette-deep-purple-100: rgb(209,196,233);
|
||||
$palette-deep-purple-200: rgb(179,157,219);
|
||||
$palette-deep-purple-300: rgb(149,117,205);
|
||||
$palette-deep-purple-400: rgb(126,87,194);
|
||||
$palette-deep-purple-500: rgb(103,58,183);
|
||||
$palette-deep-purple-600: rgb(94,53,177);
|
||||
$palette-deep-purple-700: rgb(81,45,168);
|
||||
$palette-deep-purple-800: rgb(69,39,160);
|
||||
$palette-deep-purple-900: rgb(49,27,146);
|
||||
$palette-deep-purple-a100: rgb(179,136,255);
|
||||
$palette-deep-purple-a200: rgb(124,77,255);
|
||||
$palette-deep-purple-a400: rgb(101,31,255);
|
||||
$palette-deep-purple-a700: rgb(98,0,234);
|
||||
|
||||
// Indigo
|
||||
$palette-indigo-50: rgb(232,234,246);
|
||||
$palette-indigo-100: rgb(197,202,233);
|
||||
$palette-indigo-200: rgb(159,168,218);
|
||||
$palette-indigo-300: rgb(121,134,203);
|
||||
$palette-indigo-400: rgb(92,107,192);
|
||||
$palette-indigo-500: rgb(63,81,181);
|
||||
$palette-indigo-600: rgb(57,73,171);
|
||||
$palette-indigo-700: rgb(48,63,159);
|
||||
$palette-indigo-800: rgb(40,53,147);
|
||||
$palette-indigo-900: rgb(26,35,126);
|
||||
$palette-indigo-a100: rgb(140,158,255);
|
||||
$palette-indigo-a200: rgb(83,109,254);
|
||||
$palette-indigo-a400: rgb(61,90,254);
|
||||
$palette-indigo-a700: rgb(48,79,254);
|
||||
|
||||
// Blue
|
||||
$palette-blue-50: rgb(227,242,253);
|
||||
$palette-blue-100: rgb(187,222,251);
|
||||
$palette-blue-200: rgb(144,202,249);
|
||||
$palette-blue-300: rgb(100,181,246);
|
||||
$palette-blue-400: rgb(66,165,245);
|
||||
$palette-blue-500: rgb(33,150,243);
|
||||
$palette-blue-600: rgb(30,136,229);
|
||||
$palette-blue-700: rgb(25,118,210);
|
||||
$palette-blue-800: rgb(21,101,192);
|
||||
$palette-blue-900: rgb(13,71,161);
|
||||
$palette-blue-a100: rgb(130,177,255);
|
||||
$palette-blue-a200: rgb(68,138,255);
|
||||
$palette-blue-a400: rgb(41,121,255);
|
||||
$palette-blue-a700: rgb(41,98,255);
|
||||
|
||||
// Light Blue
|
||||
$palette-light-blue-50: rgb(225,245,254);
|
||||
$palette-light-blue-100: rgb(179,229,252);
|
||||
$palette-light-blue-200: rgb(129,212,250);
|
||||
$palette-light-blue-300: rgb(79,195,247);
|
||||
$palette-light-blue-400: rgb(41,182,246);
|
||||
$palette-light-blue-500: rgb(3,169,244);
|
||||
$palette-light-blue-600: rgb(3,155,229);
|
||||
$palette-light-blue-700: rgb(2,136,209);
|
||||
$palette-light-blue-800: rgb(2,119,189);
|
||||
$palette-light-blue-900: rgb(1,87,155);
|
||||
$palette-light-blue-a100: rgb(128,216,255);
|
||||
$palette-light-blue-a200: rgb(64,196,255);
|
||||
$palette-light-blue-a400: rgb(0,176,255);
|
||||
$palette-light-blue-a700: rgb(0,145,234);
|
||||
|
||||
// Cyan
|
||||
$palette-cyan-50: rgb(224,247,250);
|
||||
$palette-cyan-100: rgb(178,235,242);
|
||||
$palette-cyan-200: rgb(128,222,234);
|
||||
$palette-cyan-300: rgb(77,208,225);
|
||||
$palette-cyan-400: rgb(38,198,218);
|
||||
$palette-cyan-500: rgb(0,188,212);
|
||||
$palette-cyan-600: rgb(0,172,193);
|
||||
$palette-cyan-700: rgb(0,151,167);
|
||||
$palette-cyan-800: rgb(0,131,143);
|
||||
$palette-cyan-900: rgb(0,96,100);
|
||||
$palette-cyan-a100: rgb(132,255,255);
|
||||
$palette-cyan-a200: rgb(24,255,255);
|
||||
$palette-cyan-a400: rgb(0,229,255);
|
||||
$palette-cyan-a700: rgb(0,184,212);
|
||||
|
||||
// Teal
|
||||
$palette-teal-50: rgb(224,242,241);
|
||||
$palette-teal-100: rgb(178,223,219);
|
||||
$palette-teal-200: rgb(128,203,196);
|
||||
$palette-teal-300: rgb(77,182,172);
|
||||
$palette-teal-400: rgb(38,166,154);
|
||||
$palette-teal-500: rgb(0,150,136);
|
||||
$palette-teal-600: rgb(0,137,123);
|
||||
$palette-teal-700: rgb(0,121,107);
|
||||
$palette-teal-800: rgb(0,105,92);
|
||||
$palette-teal-900: rgb(0,77,64);
|
||||
$palette-teal-a100: rgb(167,255,235);
|
||||
$palette-teal-a200: rgb(100,255,218);
|
||||
$palette-teal-a400: rgb(29,233,182);
|
||||
$palette-teal-a700: rgb(0,191,165);
|
||||
|
||||
// Green
|
||||
$palette-green-50: rgb(232,245,233);
|
||||
$palette-green-100: rgb(200,230,201);
|
||||
$palette-green-200: rgb(165,214,167);
|
||||
$palette-green-300: rgb(129,199,132);
|
||||
$palette-green-400: rgb(102,187,106);
|
||||
$palette-green-500: rgb(76,175,80);
|
||||
$palette-green-600: rgb(67,160,71);
|
||||
$palette-green-700: rgb(56,142,60);
|
||||
$palette-green-800: rgb(46,125,50);
|
||||
$palette-green-900: rgb(27,94,32);
|
||||
$palette-green-a100: rgb(185,246,202);
|
||||
$palette-green-a200: rgb(105,240,174);
|
||||
$palette-green-a400: rgb(0,230,118);
|
||||
$palette-green-a700: rgb(0,200,83);
|
||||
|
||||
// Green
|
||||
$palette-light-green-50: rgb(241,248,233);
|
||||
$palette-light-green-100: rgb(220,237,200);
|
||||
$palette-light-green-200: rgb(197,225,165);
|
||||
$palette-light-green-300: rgb(174,213,129);
|
||||
$palette-light-green-400: rgb(156,204,101);
|
||||
$palette-light-green-500: rgb(139,195,74);
|
||||
$palette-light-green-600: rgb(124,179,66);
|
||||
$palette-light-green-700: rgb(104,159,56);
|
||||
$palette-light-green-800: rgb(85,139,47);
|
||||
$palette-light-green-900: rgb(51,105,30);
|
||||
$palette-light-green-a100: rgb(204,255,144);
|
||||
$palette-light-green-a200: rgb(178,255,89);
|
||||
$palette-light-green-a400: rgb(118,255,3);
|
||||
$palette-light-green-a700: rgb(100,221,23);
|
||||
|
||||
// Lime
|
||||
$palette-lime-50: rgb(249,251,231);
|
||||
$palette-lime-100: rgb(240,244,195);
|
||||
$palette-lime-200: rgb(230,238,156);
|
||||
$palette-lime-300: rgb(220,231,117);
|
||||
$palette-lime-400: rgb(212,225,87);
|
||||
$palette-lime-500: rgb(205,220,57);
|
||||
$palette-lime-600: rgb(192,202,51);
|
||||
$palette-lime-700: rgb(175,180,43);
|
||||
$palette-lime-800: rgb(158,157,36);
|
||||
$palette-lime-900: rgb(130,119,23);
|
||||
$palette-lime-a100: rgb(244,255,129);
|
||||
$palette-lime-a200: rgb(238,255,65);
|
||||
$palette-lime-a400: rgb(198,255,0);
|
||||
$palette-lime-a700: rgb(174,234,0);
|
||||
|
||||
// Yellow
|
||||
$palette-yellow-50: rgb(255,253,231);
|
||||
$palette-yellow-100: rgb(255,249,196);
|
||||
$palette-yellow-200: rgb(255,245,157);
|
||||
$palette-yellow-300: rgb(255,241,118);
|
||||
$palette-yellow-400: rgb(255,238,88);
|
||||
$palette-yellow-500: rgb(255,235,59);
|
||||
$palette-yellow-600: rgb(253,216,53);
|
||||
$palette-yellow-700: rgb(251,192,45);
|
||||
$palette-yellow-800: rgb(249,168,37);
|
||||
$palette-yellow-900: rgb(245,127,23);
|
||||
$palette-yellow-a100: rgb(255,255,141);
|
||||
$palette-yellow-a200: rgb(255,255,0);
|
||||
$palette-yellow-a400: rgb(255,234,0);
|
||||
$palette-yellow-a700: rgb(255,214,0);
|
||||
|
||||
// Amber
|
||||
$palette-amber-50: rgb(255,248,225);
|
||||
$palette-amber-100: rgb(255,236,179);
|
||||
$palette-amber-200: rgb(255,224,130);
|
||||
$palette-amber-300: rgb(255,213,79);
|
||||
$palette-amber-400: rgb(255,202,40);
|
||||
$palette-amber-500: rgb(255,193,7);
|
||||
$palette-amber-600: rgb(255,179,0);
|
||||
$palette-amber-700: rgb(255,160,0);
|
||||
$palette-amber-800: rgb(255,143,0);
|
||||
$palette-amber-900: rgb(255,111,0);
|
||||
$palette-amber-a100: rgb(255,229,127);
|
||||
$palette-amber-a200: rgb(255,215,64);
|
||||
$palette-amber-a400: rgb(255,196,0);
|
||||
$palette-amber-a700: rgb(255,171,0);
|
||||
|
||||
// Orange
|
||||
$palette-orange-50: rgb(255,243,224);
|
||||
$palette-orange-100: rgb(255,224,178);
|
||||
$palette-orange-200: rgb(255,204,128);
|
||||
$palette-orange-300: rgb(255,183,77);
|
||||
$palette-orange-400: rgb(255,167,38);
|
||||
$palette-orange-500: rgb(255,152,0);
|
||||
$palette-orange-600: rgb(251,140,0);
|
||||
$palette-orange-700: rgb(245,124,0);
|
||||
$palette-orange-800: rgb(239,108,0);
|
||||
$palette-orange-900: rgb(230,81,0);
|
||||
$palette-orange-a100: rgb(255,209,128);
|
||||
$palette-orange-a200: rgb(255,171,64);
|
||||
$palette-orange-a400: rgb(255,145,0);
|
||||
$palette-orange-a700: rgb(255,109,0);
|
||||
|
||||
// Deep Orange
|
||||
$palette-deep-orange-50: rgb(251,233,231);
|
||||
$palette-deep-orange-100: rgb(255,204,188);
|
||||
$palette-deep-orange-200: rgb(255,171,145);
|
||||
$palette-deep-orange-300: rgb(255,138,101);
|
||||
$palette-deep-orange-400: rgb(255,112,67);
|
||||
$palette-deep-orange-500: rgb(255,87,34);
|
||||
$palette-deep-orange-600: rgb(244,81,30);
|
||||
$palette-deep-orange-700: rgb(230,74,25);
|
||||
$palette-deep-orange-800: rgb(216,67,21);
|
||||
$palette-deep-orange-900: rgb(191,54,12);
|
||||
$palette-deep-orange-a100: rgb(255,158,128);
|
||||
$palette-deep-orange-a200: rgb(255,110,64);
|
||||
$palette-deep-orange-a400: rgb(255,61,0);
|
||||
$palette-deep-orange-a700: rgb(221,44,0);
|
||||
|
||||
// Brown
|
||||
$palette-brown-50: rgb(239,235,233);
|
||||
$palette-brown-100: rgb(215,204,200);
|
||||
$palette-brown-200: rgb(188,170,164);
|
||||
$palette-brown-300: rgb(161,136,127);
|
||||
$palette-brown-400: rgb(141,110,99);
|
||||
$palette-brown-500: rgb(121,85,72);
|
||||
$palette-brown-600: rgb(109,76,65);
|
||||
$palette-brown-700: rgb(93,64,55);
|
||||
$palette-brown-800: rgb(78,52,46);
|
||||
$palette-brown-900: rgb(62,39,35);
|
||||
|
||||
// Grey
|
||||
$palette-grey-50: rgb(250,250,250);
|
||||
$palette-grey-100: rgb(245,245,245);
|
||||
$palette-grey-200: rgb(238,238,238);
|
||||
$palette-grey-300: rgb(224,224,224);
|
||||
$palette-grey-400: rgb(189,189,189);
|
||||
$palette-grey-500: rgb(158,158,158);
|
||||
$palette-grey-600: rgb(117,117,117);
|
||||
$palette-grey-700: rgb(97,97,97);
|
||||
$palette-grey-800: rgb(66,66,66);
|
||||
$palette-grey-900: rgb(33,33,33);
|
||||
|
||||
// Blue Grey
|
||||
$palette-blue-grey-50: rgb(236,239,241);
|
||||
$palette-blue-grey-100: rgb(207,216,220);
|
||||
$palette-blue-grey-200: rgb(176,190,197);
|
||||
$palette-blue-grey-300: rgb(144,164,174);
|
||||
$palette-blue-grey-400: rgb(120,144,156);
|
||||
$palette-blue-grey-500: rgb(96,125,139);
|
||||
$palette-blue-grey-600: rgb(84,110,122);
|
||||
$palette-blue-grey-700: rgb(69,90,100);
|
||||
$palette-blue-grey-800: rgb(55,71,79);
|
||||
$palette-blue-grey-900: rgb(38,50,56);
|
||||
|
||||
$color-black: rgb(0,0,0);
|
||||
$color-white: rgb(255,255,255);
|
||||
|
||||
//-- The two possible colors for overlayed text.
|
||||
$styleguide-generate-template: false !default;
|
||||
$color-dark-contrast: $color-white !default;
|
||||
$color-light-contrast: $color-black !default;
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
//-- Color configuration
|
||||
$color-divider: $palette-grey-200 !default;
|
||||
$color-background: $color-white !default;
|
||||
$color-text: $palette-grey-900 !default;
|
||||
$color-text-secondary: $palette-grey-600 !default;
|
||||
|
||||
$color-primary: $palette-indigo-500 !default;
|
||||
$color-primary-dark: $palette-indigo-700 !default;
|
||||
$color-accent: $palette-pink-a200 !default;
|
||||
$color-accent-dark: $palette-pink-700 !default;
|
||||
$color-primary-contrast: $color-dark-contrast !default;
|
||||
$color-accent-contrast: $color-dark-contrast !default;
|
||||
|
||||
//-- Sizing
|
||||
$unit: 1rem !default;
|
||||
|
||||
// -- Fonts
|
||||
$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
|
||||
$font-size: 1.6 * $unit !default;
|
||||
$font-size-tiny: 1.2 * $unit !default;
|
||||
$font-size-small: 1.4 * $unit !default;
|
||||
$font-size-normal: $font-size !default;
|
||||
$font-size-big: 1.8 * $unit !default;
|
||||
$font-weight-thin: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-semi-bold: 500 !default;
|
||||
$font-weight-bold: 700 !default;
|
||||
|
||||
//-- Shadows
|
||||
$shadow-key-umbra-opacity: 0.2 !default;
|
||||
$shadow-key-penumbra-opacity: 0.14 !default;
|
||||
$shadow-ambient-shadow-opacity: 0.12 !default;
|
||||
|
||||
//-- Depth Shadows
|
||||
$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,.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;
|
||||
$animation-delay: $animation-duration / 5;
|
||||
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
|
||||
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
|
||||
$animation-curve-default: $animation-curve-fast-out-slow-in !default;
|
||||
|
||||
//-- Indexes
|
||||
$z-index-highest: 300 !default;
|
||||
$z-index-higher: 200 !default;
|
||||
$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://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
|
||||
$standard-increment-mobile: (5.6 * $unit) !default;
|
||||
$standard-increment-desktop: (6.4 * $unit) !default;
|
||||
|
||||
// https://material.google.com/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://material.google.com/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;
|
||||
|
|
@ -1,260 +0,0 @@
|
|||
// scss-lint:disable VendorPrefix
|
||||
@mixin typo-preferred-font($use-preferred: true) {
|
||||
@if $use-preferred {
|
||||
font-family: $preferred-font;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 11.2;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
letter-spacing: -.04em;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 5.6;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -.02em;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 4.5;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 4.8;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 3.4;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 4;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-headline($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 2.4;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 3.2;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-title($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 2;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: .02em;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 1.6;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 2.4;
|
||||
letter-spacing: .04em;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 1.6;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 2.8;
|
||||
letter-spacing: .04em;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 1.4;
|
||||
line-height: $unit * 2.4;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $use-preferred {
|
||||
font-weight: 500;
|
||||
} @else {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 1.4;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 2.4;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-caption($color-contrast: false, $use-preferred: false) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 1.2;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
position: relative;
|
||||
font-size: $unit * 2.4;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
line-height: 1.35;
|
||||
letter-spacing: .08em;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: -.5em;
|
||||
content: "“";
|
||||
}
|
||||
|
||||
&:after {
|
||||
margin-left: -.05em;
|
||||
content: "”";
|
||||
}
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-menu($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 1.4;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-button($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 1.4;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
//-- Shadows
|
||||
@mixin focus-shadow() {
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
|
||||
}
|
||||
|
||||
@mixin shadow-2dp() {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-3dp() {
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-4dp() {
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-6dp() {
|
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-8dp() {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-16dp() {
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
//-- Animations
|
||||
@mixin material-animation-fast-out-slow-in($duration: .2s) {
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
transition-duration: $duration;
|
||||
}
|
||||
|
||||
@mixin material-animation-linear-out-slow-in($duration: .2s) {
|
||||
transition-timing-function: $animation-curve-linear-out-slow-in;
|
||||
transition-duration: $duration;
|
||||
}
|
||||
|
||||
@mixin material-animation-fast-out-linear-in($duration: .2s) {
|
||||
transition-timing-function: $animation-curve-fast-out-linear-in;
|
||||
transition-duration: $duration;
|
||||
}
|
||||
|
||||
@mixin material-animation-default($duration: .2s) {
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $duration;
|
||||
}
|
||||
|
||||
@mixin no-webkit-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export SlideLeft from './slide-left.scss';
|
||||
export SlideRight from './slide-right.scss';
|
||||
export ZoomIn from './zoom-in.scss';
|
||||
export ZoomOut from './zoom-out.scss';
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.enter, .leave {
|
||||
position: absolute;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: .35s;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
.enter {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
|
||||
&.enterActive {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.leave {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
&.leaveActive {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
.enter, .leave {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.enterActive, .leaveActive {
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 350ms;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
.enter {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
|
||||
&.enterActive {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.leave {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
|
||||
&.leaveActive {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
|
||||
.enter, .leave {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.enterActive, .leaveActive {
|
||||
transition: transform, opacity;
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.enter {
|
||||
opacity: 0;
|
||||
transform: scale(0.85);
|
||||
|
||||
&.enterActive {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.leave {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
&.leaveActive {
|
||||
opacity: 0;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
|
||||
.enter, .leave {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.enterActive, .leaveActive {
|
||||
transition: transform, opacity;
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.enter {
|
||||
opacity: 0;
|
||||
transform: scale(1.25);
|
||||
|
||||
&.enterActive {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.leave {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
&.leaveActive {
|
||||
opacity: 0;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
}
|
||||
|
|
@ -24,6 +24,7 @@ const factory = (IconButton) => {
|
|||
scrollHide: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
appBar: PropTypes.string,
|
||||
inner: PropTypes.string,
|
||||
fixed: PropTypes.string,
|
||||
flat: PropTypes.string,
|
||||
leftIcon: PropTypes.string,
|
||||
|
|
@ -97,20 +98,22 @@ const factory = (IconButton) => {
|
|||
data-react-toolbox='app-bar'
|
||||
ref={node => {this.rootNode = node;}}
|
||||
>
|
||||
{leftIcon && <IconButton
|
||||
inverse
|
||||
className={classnames(theme.leftIcon)}
|
||||
onClick={onLeftIconClick}
|
||||
icon={leftIcon} />
|
||||
}
|
||||
{title && <h1 className={classnames(theme.title)}>{title}</h1>}
|
||||
{children}
|
||||
{rightIcon && <IconButton
|
||||
inverse
|
||||
className={classnames(theme.rightIcon)}
|
||||
onClick={onRightIconClick}
|
||||
icon={rightIcon} />
|
||||
}
|
||||
<div className={theme.inner}>
|
||||
{leftIcon && <IconButton
|
||||
inverse
|
||||
className={classnames(theme.leftIcon)}
|
||||
onClick={onLeftIconClick}
|
||||
icon={leftIcon} />
|
||||
}
|
||||
{title && <h1 className={classnames(theme.title)}>{title}</h1>}
|
||||
{children}
|
||||
{rightIcon && <IconButton
|
||||
inverse
|
||||
className={classnames(theme.rightIcon)}
|
||||
onClick={onRightIconClick}
|
||||
icon={rightIcon} />
|
||||
}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
$appbar-color: $color-primary-dark !default;
|
||||
$appbar-contrast: $color-primary-contrast !default;
|
||||
$appbar-title-total-distance: 8 * $unit !default;
|
||||
$appbar-height: 6.4 * $unit !default;
|
||||
$appbar-height-m-portrait: 5.6 * $unit !default;
|
||||
$appbar-height-m-landscape: 4.8 * $unit !default;
|
||||
$appbar-h-padding: 2.4 * $unit !default;
|
||||
$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
:root {
|
||||
--appbar-color: var(--color-primary-dark);
|
||||
--appbar-contrast: var(--color-primary-contrast);
|
||||
--appbar-title-total-distance: calc(8 * var(--unit));
|
||||
--appbar-height: calc(6.4 * var(--unit));
|
||||
--appbar-height-m-portrait: calc(5.6 * var(--unit));
|
||||
--appbar-height-m-landscape: calc(4.8 * var(--unit));
|
||||
--appbar-h-padding: calc(2.4 * var(--unit));
|
||||
--appbar-title-distance: calc(var(--appbar-title-total-distance) - var(--appbar-h-padding));
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
|
|||
import { APP_BAR } from '../identifiers.js';
|
||||
import { appBarFactory } from './AppBar.js';
|
||||
import { IconButton } from '../button';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const AppBar = appBarFactory(IconButton);
|
||||
const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ The `AppBar` component provides properties for the common use cases of `title`,
|
|||
| `appBar` | Used for the component root element.|
|
||||
| `fixed` | Added to the root element when the app bar is fixed.|
|
||||
| `flat` | Added to the root element when the app bar is flat.|
|
||||
| `inner` | Added to a wrapper to the component main content.|
|
||||
| `title` | Added to the title element of the app bar.|
|
||||
| `leftIcon` | Added to the left icon element when the app bar.|
|
||||
| `rightIcon` | Added to the right icon element when the app bar.|
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
@import '../colors.css';
|
||||
@import '../media.css';
|
||||
@import '../variables.css';
|
||||
@import './config.css';
|
||||
|
||||
.appBar {
|
||||
background: var(--appbar-color);
|
||||
color: var(--appbar-contrast);
|
||||
composes: reset from '../helpers.css';
|
||||
font-family: var(--preferred-font);
|
||||
height: var(--appbar-height);
|
||||
padding: 0 var(--appbar-h-padding);
|
||||
transition-duration: 0.5s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
&.scrollHide {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&:not(.flat) {
|
||||
box-shadow: var(--shadow-4p);
|
||||
z-index: var(--z-index-high);
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: var(--z-index-highest);
|
||||
}
|
||||
|
||||
& .inner {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--appbar-contrast);
|
||||
}
|
||||
|
||||
@media screen and (--xxs-viewport) and (--portrait) {
|
||||
height: var(--appbar-height-m-portrait);
|
||||
}
|
||||
|
||||
@media screen and (--xs-viewport) and (--landscape) {
|
||||
height: var(--appbar-height-m-landscape);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
font-size: calc(1.8 * var(--unit));
|
||||
font-weight: bold;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
& > small {
|
||||
font-size: calc(1.8 * var(--unit));
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.leftIcon {
|
||||
margin-left: calc(-1.2 * var(--unit));
|
||||
}
|
||||
|
||||
.rightIcon {
|
||||
margin-left: auto;
|
||||
margin-right: calc(-1.2 * var(--unit));
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
|
||||
.appBar {
|
||||
display: flex;
|
||||
height: $appbar-height;
|
||||
align-items: center;
|
||||
padding: 0 $appbar-h-padding;
|
||||
color: $appbar-contrast;
|
||||
background: $appbar-color;
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xxs) and (orientation: portrait) {
|
||||
height: $appbar-height-m-portrait;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xs) and (orientation: landscape) {
|
||||
height: $appbar-height-m-landscape;
|
||||
}
|
||||
|
||||
&:not(.flat) {
|
||||
z-index: $z-index-high;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,.26);
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-highest;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $appbar-contrast;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
font-size: 1.8 * $unit;
|
||||
font-weight: bold;
|
||||
> small {
|
||||
font-size: 1.8 * $unit;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.leftIcon {
|
||||
margin-left: -1.2 * $unit;
|
||||
}
|
||||
|
||||
.rightIcon {
|
||||
margin-right: -1.2 * $unit;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transition-duration: .5s;
|
||||
transition-property: transform;
|
||||
|
||||
&.scrollHide {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
$autocomplete-color-primary-contrast: $color-primary-contrast !default;
|
||||
$autocomplete-color-primary: $color-primary !default;
|
||||
$autocomplete-overflow-max-height: 45vh !default;
|
||||
$autocomplete-suggestion-active-background: $palette-grey-200 !default;
|
||||
$autocomplete-suggestion-padding: $unit !default;
|
||||
$autocomplete-suggestions-background: $color-white !default;
|
||||
$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0 !default;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
:root {
|
||||
--autocomplete-border-size: calc(var(--input-field-height) / 7);
|
||||
--autocomplete-color-primary-contrast: var(--color-primary-contrast);
|
||||
--autocomplete-color-primary: var(--color-primary);
|
||||
--autocomplete-overflow-max-height: 45vh;
|
||||
--autocomplete-suggestion-active-background: var(--palette-grey-200);
|
||||
--autocomplete-suggestion-padding: var(--unit);
|
||||
--autocomplete-suggestions-background: var(--color-white);
|
||||
--autocomplete-value-margin: calc(var(--unit) * 0.25) calc(var(--unit) * 0.5) calc(var(--unit) * 0.25) 0;
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import { themr } from 'react-css-themr';
|
|||
import { autocompleteFactory } from './Autocomplete.js';
|
||||
import Chip from '../chip';
|
||||
import Input from '../input';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const Autocomplete = autocompleteFactory(Chip, Input);
|
||||
const ThemedAutocomplete = themr(AUTOCOMPLETE, theme)(Autocomplete);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import '../input/config.css';
|
||||
@import './config.css';
|
||||
|
||||
.autocomplete {
|
||||
composes: reset from '../helpers.css';
|
||||
padding: var(--unit) 0;
|
||||
position: relative;
|
||||
|
||||
&.focus {
|
||||
& .suggestions {
|
||||
box-shadow: var(--zdepth-shadow-1);
|
||||
max-height: var(--autocomplete-overflow-max-height);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.values {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 calc(var(--unit) / 2) 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: var(--autocomplete-value-margin);
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
background-color: var(--autocomplete-suggestions-background);
|
||||
list-style: none;
|
||||
max-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
transition-duration: var(--animation-duration);
|
||||
transition-property: max-height, box-shadow;
|
||||
transition-timing-function: var(--animation-curve-default);
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: var(--z-index-high);
|
||||
|
||||
&:not(.up) {
|
||||
margin-top: calc(-1 * var(--input-padding));
|
||||
}
|
||||
|
||||
&.up {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
cursor: pointer;
|
||||
font-size: var(--input-field-font-size);
|
||||
padding: var(--autocomplete-suggestion-padding);
|
||||
|
||||
&.active {
|
||||
background-color: var(--autocomplete-suggestion-active-background);
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
border-left: var(--autocomplete-border-size) solid transparent;
|
||||
border-right: var(--autocomplete-border-size) solid transparent;
|
||||
border-top: var(--autocomplete-border-size) solid var(--input-text-bottom-border-color);
|
||||
content: '';
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: var(--input-chevron-offset);
|
||||
top: 50%;
|
||||
transition: transform var(--animation-duration) var(--animation-curve-default);
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
@import "../input/config";
|
||||
|
||||
.autocomplete {
|
||||
position: relative;
|
||||
padding: $unit 0;
|
||||
&.focus {
|
||||
.suggestions {
|
||||
max-height: $autocomplete-overflow-max-height;
|
||||
visibility: visible;
|
||||
box-shadow: $zdepth-shadow-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.values {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: $unit / 2;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: $autocomplete-value-margin;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
@include no-webkit-scrollbar;
|
||||
position: absolute;
|
||||
z-index: $z-index-high;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
visibility: hidden;
|
||||
background-color: $autocomplete-suggestions-background;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: max-height, box-shadow;
|
||||
&:not(.up) {
|
||||
margin-top: - $input-padding;
|
||||
}
|
||||
&.up {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
padding: $autocomplete-suggestion-padding;
|
||||
font-size: $input-field-font-size;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
background-color: $autocomplete-suggestion-active-background;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
position: relative;
|
||||
&:after {
|
||||
$size: ($input-field-height / 7);
|
||||
$border: $size solid transparent;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $input-chevron-offset;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-top: $size solid $input-text-bottom-border-color;
|
||||
border-right: $border;
|
||||
border-left: $border;
|
||||
transition: transform $animation-duration $animation-curve-default;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
$avatar-color: $color-white !default;
|
||||
$avatar-background: $palette-grey-500 !default;
|
||||
$avatar-size: 4 * $unit !default;
|
||||
$avatar-font-size: 2.4 * $unit !default;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
:root {
|
||||
--avatar-color: var(--color-white);
|
||||
--avatar-background: var(--palette-grey-500);
|
||||
--avatar-size: calc(4 * var(--unit));
|
||||
--avatar-font-size: calc(2.4 * var(--unit));
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { AVATAR } from '../identifiers.js';
|
|||
import { themr } from 'react-css-themr';
|
||||
import { avatarFactory } from './Avatar.js';
|
||||
import FontIcon from '../font_icon/FontIcon.js';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const Avatar = avatarFactory(FontIcon);
|
||||
const ThemedAvatar = themr(AVATAR, theme)(Avatar);
|
||||
|
|
|
|||
|
|
@ -1,44 +1,46 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import './config.css';
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
background-color: var(--avatar-background);
|
||||
border-radius: 50%;
|
||||
color: var(--avatar-color);
|
||||
composes: reset from '../helpers.css';
|
||||
display: inline-block;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
font-size: var(--avatar-font-size);
|
||||
height: var(--avatar-size);
|
||||
overflow: hidden;
|
||||
font-size: $avatar-font-size;
|
||||
color: $avatar-color;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: $avatar-background;
|
||||
border-radius: 50%;
|
||||
> svg {
|
||||
width: 1em;
|
||||
height: $avatar-size;
|
||||
width: var(--avatar-size);
|
||||
|
||||
& > svg {
|
||||
fill: currentColor;
|
||||
height: var(--avatar-size);
|
||||
width: 1em;
|
||||
}
|
||||
> img {
|
||||
max-width: 100%;
|
||||
|
||||
& > img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.letter {
|
||||
display: block;
|
||||
line-height: var(--avatar-size);
|
||||
width: 100%;
|
||||
line-height: $avatar-size;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import expect from 'expect';
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import TestUtils from 'react-addons-test-utils';
|
||||
import theme from '../theme.scss';
|
||||
import theme from '../theme.css';
|
||||
import Button, { Button as RawButton } from '../Button';
|
||||
|
||||
const getRenderedClassName = (tree, Component) => {
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
$button-neutral-color: $color-white !default;
|
||||
$button-neutral-color-contrast: $palette-grey-900 !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, .2) !default;
|
||||
$button-primary-color: $color-primary !default;
|
||||
$button-accent-color-contrast: $color-primary-contrast !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;
|
||||
$button-disabled-text-color-inverse: rgba($color-white, 0.54) !default;
|
||||
$button-disabled-background-inverse: rgba($color-white, 0.08) !default;
|
||||
$button-border-radius: 0.2 * $unit !default;
|
||||
$button-floating-font-size: $unit * 2.4 !default;
|
||||
$button-floating-height: $unit * 5.6 !default;
|
||||
$button-floating-mini-height: $unit * 4 !default;
|
||||
$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
|
||||
$button-height: $unit * 3.6 !default;
|
||||
$button-squared-icon-margin: $unit * .6 !default;
|
||||
$button-squared-min-width: 9 * $unit !default;
|
||||
$button-squared-padding: 0 $unit * 1.2 !default;
|
||||
$button-toggle-font-size: $unit * 2 !default;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
@mixin btn-colors($name, $color, $background, $hover) {
|
||||
.#{$name}:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $color;
|
||||
background: $background;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $background;
|
||||
&:focus:not(:active) {
|
||||
background: $hover;
|
||||
}
|
||||
}
|
||||
&.flat:hover {
|
||||
background: $hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
:root {
|
||||
--button-border-radius: calc(0.2 * var(--unit));
|
||||
--button-height: calc(3.6 * var(--unit));
|
||||
--button-toggle-font-size: calc(2 * var(--unit));
|
||||
--button-primary-color: var(--color-primary);
|
||||
--button-primary-color-hover: color(var(--color-primary) a(20%));
|
||||
--button-primary-color-contrast: var(--color-primary-contrast);
|
||||
--button-accent-color-contrast: var(--color-primary-contrast);
|
||||
--button-accent-color-hover: color(var(--color-accent) a(20%));
|
||||
--button-accent-color: var(--color-accent);
|
||||
--button-neutral-color: var(--color-white);
|
||||
--button-neutral-color-contrast: var(--palette-grey-900);
|
||||
--button-neutral-color-hover: color(var(--palette-grey-900) a(20%));
|
||||
--button-floating-font-size: calc(2.4 * var(--unit));
|
||||
--button-floating-height: calc(5.6 * var(--unit));
|
||||
--button-floating-mini-height: calc(4 * var(--unit));
|
||||
--button-floating-mini-font-size: calc(var(--button-floating-mini-height) / 2.25);
|
||||
--button-disabled-text-color: color(var(--color-black) a(26%));
|
||||
--button-disabled-background-color: color(var(--color-black) a(12%));
|
||||
--button-disabled-text-color-inverse: color(var(--color-black) a(54%));
|
||||
--button-disabled-background-inverse: color(var(--color-black) a(8%));
|
||||
--button-squared-icon-margin: calc(0.6 * var(--unit));
|
||||
--button-squared-min-width: calc(9 * var(--unit));
|
||||
--button-squared-padding: 0 calc(1.2 * var(--unit));
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import { browseButtonFactory } from './BrowseButton.js';
|
|||
import { iconButtonFactory } from './IconButton.js';
|
||||
import FontIcon from '../font_icon/FontIcon.js';
|
||||
import themedRippleFactory from '../ripple';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const Button = buttonFactory(themedRippleFactory({ centered: false }), FontIcon);
|
||||
const IconButton = iconButtonFactory(themedRippleFactory({centered: true}), FontIcon);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,258 @@
|
|||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import './config.css';
|
||||
|
||||
.button {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
composes: reset from '../helpers.css';
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
flex-direction: row;
|
||||
font-size: calc(1.4 * var(--unit));
|
||||
font-weight: 500;
|
||||
height: var(--button-height);
|
||||
justify-content: center;
|
||||
letter-spacing: 0;
|
||||
line-height: var(--button-height);
|
||||
outline: none;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition:
|
||||
box-shadow 0.2s var(--animation-curve-fast-out-linear-in),
|
||||
background-color 0.2s var(--animation-curve-default),
|
||||
color 0.2s var(--animation-curve-default);
|
||||
white-space: nowrap;
|
||||
|
||||
& > input {
|
||||
height: 0.1px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 0.1px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
& > span:not([data-react-toolbox='tooltip']) {
|
||||
display: inline-block;
|
||||
line-height: var(--button-height);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
& > svg {
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
font-size: 120%;
|
||||
height: var(--button-height);
|
||||
vertical-align: top;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
& > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
& > .rippleWrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: var(--button-disabled-text-color);
|
||||
cursor: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.squared {
|
||||
border-radius: var(--button-border-radius);
|
||||
min-width: var(--button-squared-min-width);
|
||||
padding: var(--button-squared-padding);
|
||||
|
||||
& .icon {
|
||||
font-size: 120%;
|
||||
margin-right: var(--button-squared-icon-margin);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& > svg {
|
||||
margin-right: calc(0.5 * var(--unit));
|
||||
}
|
||||
}
|
||||
|
||||
.solid {
|
||||
&[disabled] {
|
||||
background-color: var(--button-disabled-background-color);
|
||||
box-shadow: var(--shadow-2p);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: var(--shadow-2p);
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
box-shadow:
|
||||
0 0 8px rgba(0, 0, 0, 0.18),
|
||||
0 8px 16px rgba(0, 0, 0, 0.36);
|
||||
}
|
||||
}
|
||||
|
||||
.raised {
|
||||
box-shadow: var(--shadow-2p);
|
||||
composes: button;
|
||||
composes: squared;
|
||||
composes: solid;
|
||||
}
|
||||
|
||||
.flat {
|
||||
background: transparent;
|
||||
composes: button;
|
||||
composes: squared;
|
||||
}
|
||||
|
||||
.floating {
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
0 1px 1.5px 0 rgba(0, 0, 0, 0.12),
|
||||
0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
||||
composes: button;
|
||||
composes: solid;
|
||||
font-size: var(--button-floating-font-size);
|
||||
height: var(--button-floating-height);
|
||||
width: var(--button-floating-height);
|
||||
|
||||
& .icon {
|
||||
line-height: var(--button-floating-height);
|
||||
}
|
||||
|
||||
& > .rippleWrapper {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.mini {
|
||||
font-size: var(--button-floating-mini-font-size);
|
||||
height: var(--button-floating-mini-height);
|
||||
width: var(--button-floating-mini-height);
|
||||
|
||||
& .icon {
|
||||
line-height: var(--button-floating-mini-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
composes: button;
|
||||
vertical-align: middle;
|
||||
width: var(--button-height);
|
||||
|
||||
& > .icon,
|
||||
& svg {
|
||||
font-size: var(--button-toggle-font-size);
|
||||
line-height: var(--button-height);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
& > .rippleWrapper {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.primary:not([disabled]) {
|
||||
&.raised,
|
||||
&.floating {
|
||||
background: var(--button-primary-color);
|
||||
color: var(--button-primary-color-contrast);
|
||||
}
|
||||
|
||||
&.flat,
|
||||
&.toggle {
|
||||
color: var(--button-primary-color);
|
||||
|
||||
&:focus:not(:active) {
|
||||
background: var(--button-primary-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.flat:hover {
|
||||
background: var(--button-primary-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.accent:not([disabled]) {
|
||||
&.raised,
|
||||
&.floating {
|
||||
background: var(--button-accent-color);
|
||||
color: var(--button-accent-color-contrast);
|
||||
}
|
||||
|
||||
&.flat,
|
||||
&.toggle {
|
||||
color: var(--button-accent-color);
|
||||
|
||||
&:focus:not(:active) {
|
||||
background: var(--button-accent-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.flat:hover {
|
||||
background: var(--button-accent-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.neutral:not([disabled]) {
|
||||
&.raised,
|
||||
&.floating {
|
||||
background-color: var(--button-neutral-color);
|
||||
color: var(--button-neutral-color-contrast);
|
||||
}
|
||||
|
||||
&.flat,
|
||||
&.toggle {
|
||||
color: var(--button-neutral-color-contrast);
|
||||
|
||||
&:focus:not(:active) {
|
||||
background: var(--button-neutral-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.flat:hover {
|
||||
background: var(--button-neutral-color-hover);
|
||||
}
|
||||
|
||||
&.inverse {
|
||||
&.raised,
|
||||
&.floating {
|
||||
background-color: var(--button-neutral-color-contrast);
|
||||
color: var(--button-neutral-color);
|
||||
}
|
||||
|
||||
&.flat,
|
||||
&.toggle {
|
||||
color: var(--button-neutral-color);
|
||||
|
||||
&:focus:not(:active) {
|
||||
background: var(--button-neutral-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.flat:hover {
|
||||
background: var(--button-neutral-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.neutral.inverse[disabled] {
|
||||
background-color: var(--button-disabled-background-inverse);
|
||||
color: var(--button-disabled-text-color-inverse);
|
||||
}
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
@import "./mixins";
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
|
||||
> input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
width: 0.1px;
|
||||
height: 0.1px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
%button {
|
||||
@include typo-button();
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: $button-height;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: $button-height;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
outline: none;
|
||||
transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
> span:not([data-react-toolbox="tooltip"]) {
|
||||
display: inline-block;
|
||||
line-height: $button-height;
|
||||
vertical-align: top;
|
||||
}
|
||||
> svg {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: $button-height;
|
||||
font-size: 120%;
|
||||
vertical-align: top;
|
||||
fill: currentColor;
|
||||
}
|
||||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
> .rippleWrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
&[disabled] {
|
||||
color: $button-disabled-text-color;
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
%squared {
|
||||
min-width: $button-squared-min-width;
|
||||
padding: $button-squared-padding;
|
||||
border-radius: $button-border-radius;
|
||||
.icon {
|
||||
margin-right: $button-squared-icon-margin;
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
> svg {
|
||||
margin-right: .5 * $unit;
|
||||
}
|
||||
}
|
||||
|
||||
%solid {
|
||||
&[disabled] {
|
||||
@include shadow-2dp();
|
||||
background-color: $button-disabled-background-color;
|
||||
}
|
||||
&:active {
|
||||
@include shadow-4dp();
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
}
|
||||
}
|
||||
|
||||
.raised {
|
||||
@extend %button;
|
||||
@extend %squared;
|
||||
@extend %solid;
|
||||
@include shadow-2dp();
|
||||
}
|
||||
|
||||
.flat {
|
||||
@extend %button;
|
||||
@extend %squared;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.floating {
|
||||
@extend %button;
|
||||
@extend %solid;
|
||||
width: $button-floating-height;
|
||||
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);
|
||||
.icon {
|
||||
line-height: $button-floating-height;
|
||||
}
|
||||
> .rippleWrapper {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.mini {
|
||||
width: $button-floating-mini-height;
|
||||
height: $button-floating-mini-height;
|
||||
font-size: $button-floating-mini-font-size;
|
||||
.icon {
|
||||
line-height: $button-floating-mini-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
@extend %button;
|
||||
width: $button-height;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
> .icon, svg {
|
||||
font-size: $button-toggle-font-size;
|
||||
line-height: $button-height;
|
||||
vertical-align: top;
|
||||
}
|
||||
> .rippleWrapper {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.neutral:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $button-neutral-color-contrast;
|
||||
background-color: $button-neutral-color;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $button-neutral-color-contrast;
|
||||
&:focus:not(:active) {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
}
|
||||
&.flat:hover {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
|
||||
&.inverse {
|
||||
&.raised, &.floating {
|
||||
color: $button-neutral-color;
|
||||
background-color: $button-neutral-color-contrast;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $button-neutral-color;
|
||||
&:focus:not(:active) {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
}
|
||||
&.flat:hover {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.neutral.inverse[disabled] {
|
||||
color: $button-disabled-text-color-inverse;
|
||||
background-color: $button-disabled-background-inverse;
|
||||
}
|
||||
|
||||
@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,7 +0,0 @@
|
|||
$card-color-white: $color-white !default;
|
||||
$card-text-overlay: rgba($color-black, 0.35) !default;
|
||||
$card-background-color: $card-color-white !default;
|
||||
$card-padding-sm: .8 * $unit !default;
|
||||
$card-padding: 1.6 * $unit !default;
|
||||
$card-padding-lg: 2 * $unit !default;
|
||||
$card-font-size: $font-size-small !default;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
:root {
|
||||
--card-color-white: var(--color-white);
|
||||
--card-text-overlay: color(var(--color-black) a(35%));
|
||||
--card-background-color: var(--card-color-white);
|
||||
--card-padding-sm: calc(0.8 * var(--unit));
|
||||
--card-padding: calc(1.6 * var(--unit));
|
||||
--card-padding-lg: calc(2 * var(--unit));
|
||||
--card-font-size: var(--font-size-small);
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { CardMedia } from './CardMedia.js';
|
|||
import { CardText } from './CardText.js';
|
||||
import { cardTitleFactory } from './CardTitle.js';
|
||||
import Avatar from '../avatar';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const CardTitle = cardTitleFactory(Avatar);
|
||||
const ThemedCard = themr(CARD, theme)(Card);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,182 @@
|
|||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import './config.css';
|
||||
|
||||
.card {
|
||||
background: var(--card-background-color);
|
||||
border-radius: calc(0.2 * var(--unit));
|
||||
box-shadow: var(--shadow-2p);
|
||||
composes: reset from '../helpers.css';
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--card-font-size);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
&.raised {
|
||||
box-shadow: var(--shadow-8p);
|
||||
}
|
||||
|
||||
& [data-react-toolbox='avatar'] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.cardMedia {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
&.wide,
|
||||
&.square {
|
||||
width: 100%;
|
||||
|
||||
& .content {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
& .content > iframe,
|
||||
& .content > video,
|
||||
& .content > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&.wide::after {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
&.square::after {
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
& .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& .contentOverlay {
|
||||
& .cardTitle,
|
||||
& .cardActions,
|
||||
& .cardText {
|
||||
background-color: var(--card-text-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
& .cardTitle {
|
||||
& .title,
|
||||
& .subtitle {
|
||||
color: var(--card-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
& [data-react-toolbox='avatar'] {
|
||||
margin-right: calc(1.3 * var(--unit));
|
||||
}
|
||||
|
||||
& .title {
|
||||
font-size: calc(2 * var(--unit));
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& .subtitle {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: calc(1.4 * var(--unit));
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: calc(2.4 * var(--unit));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.large {
|
||||
padding: var(--card-padding-lg) var(--card-padding) calc(var(--card-padding) - 0.2 * var(--unit));
|
||||
|
||||
& .title {
|
||||
font-size: calc(2.4 * var(--unit));
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 400;
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
padding: var(--card-padding);
|
||||
|
||||
& .title {
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
& .subtitle {
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cardTitle,
|
||||
.cardText {
|
||||
padding: calc(var(--card-padding) - 0.2 * var(--unit)) var(--card-padding);
|
||||
|
||||
& p {
|
||||
font-size: calc(1.4 * var(--unit));
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: calc(2.4 * var(--unit));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: var(--card-padding-lg);
|
||||
}
|
||||
|
||||
& + .cardText {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cardActions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: var(--card-padding-sm);
|
||||
|
||||
& [data-react-toolbox='button'] {
|
||||
margin: 0 calc(var(--card-padding-sm) / 2);
|
||||
min-width: 0;
|
||||
padding: 0 var(--card-padding-sm);
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
|
||||
.card {
|
||||
@include shadow-2dp();
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
font-size: $card-font-size;
|
||||
background: $card-background-color;
|
||||
border-radius: .2 * $unit;
|
||||
&.raised {
|
||||
@include shadow-8dp();
|
||||
}
|
||||
[data-react-toolbox="avatar"] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.cardMedia {
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
&.wide, &.square {
|
||||
width: 100%;
|
||||
.content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
.content > iframe, .content > video, .content > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&.wide::after {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
&.square::after {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
.contentOverlay {
|
||||
.cardTitle, .cardActions, .cardText {
|
||||
background-color: $card-text-overlay;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
[data-react-toolbox="avatar"] {
|
||||
margin-right: 1.3 * $unit;
|
||||
}
|
||||
.subtitle {
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
&.large {
|
||||
padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
|
||||
.title {
|
||||
@include typo-headline();
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
&.small {
|
||||
padding: $card-padding;
|
||||
.title {
|
||||
@include typo-body-2(false, true);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.subtitle {
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
.cardMedia & {
|
||||
.title, .subtitle {
|
||||
color: $card-color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cardTitle, .cardText {
|
||||
padding: ($card-padding - .2 * $unit) $card-padding;
|
||||
&:last-child {
|
||||
padding-bottom: $card-padding-lg;
|
||||
}
|
||||
+ .cardText {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cardActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: $card-padding-sm;
|
||||
[data-react-toolbox="button"] {
|
||||
min-width: 0;
|
||||
padding: 0 $card-padding-sm;
|
||||
margin: 0 $card-padding-sm / 2;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
$checkbox-color: $color-primary !default;
|
||||
$checkbox-disabled-color: rgba($color-black, 0.26) !default;
|
||||
$checkbox-field-margin-bottom: 1.5 * $unit !default;
|
||||
$checkbox-focus-checked-color: rgba($color-primary, 0.26) !default;
|
||||
$checkbox-ripple-duration: 650ms !default;
|
||||
$checkbox-size: 1.8 * $unit !default;
|
||||
$checkbox-focus-color: rgba($color-black, 0.1) !default;
|
||||
$checkbox-focus-size: $checkbox-size * 2.3 !default;
|
||||
$checkbox-text-color: $color-black !default;
|
||||
$checkbox-text-font-size: $font-size-small !default;
|
||||
$checkbox-total-height: 1.8 * $unit !default;
|
||||
$checkbox-transition-duration: .2s !default;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
:root {
|
||||
--checkbox-color: var(--color-primary);
|
||||
--checkbox-disabled-color: color(var(--color-black) a(26%));
|
||||
--checkbox-field-margin-bottom: calc(1.5 * var(--unit));
|
||||
--checkbox-focus-checked-color: color(var(--color-primary) a(26%));
|
||||
--checkbox-ripple-duration: 650ms;
|
||||
--checkbox-size: calc(1.8 * var(--unit));
|
||||
--checkbox-focus-color: color(var(--color-black) a(1%));
|
||||
--checkbox-focus-size: calc(var(--checkbox-size) * 2.3);
|
||||
--checkbox-text-color: var(--color-black);
|
||||
--checkbox-text-font-size: var(--font-size-small);
|
||||
--checkbox-total-height: calc(1.8 * var(--unit));
|
||||
--checkbox-transition-duration: 0.2s;
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import { CHECKBOX } from '../identifiers.js';
|
|||
import themedRippleFactory from '../ripple';
|
||||
import { checkboxFactory } from './Checkbox.js';
|
||||
import checkFactory from './Check.js';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const ThemedCheck = checkFactory(themedRippleFactory({ centered: true, spread: 2.6}));
|
||||
const ThemedCheckbox = themr(CHECKBOX, theme)(checkboxFactory(ThemedCheck));
|
||||
|
|
|
|||
|
|
@ -0,0 +1,128 @@
|
|||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import './config.css';
|
||||
|
||||
.field {
|
||||
composes: reset from '../helpers.css';
|
||||
display: block;
|
||||
height: var(--checkbox-size);
|
||||
margin-bottom: var(--checkbox-field-margin-bottom);
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
& .ripple {
|
||||
background-color: var(--checkbox-color);
|
||||
opacity: 0.3;
|
||||
transition-duration: var(--checkbox-ripple-duration);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--checkbox-text-color);
|
||||
display: inline-block;
|
||||
font-size: var(--checkbox-text-font-size);
|
||||
line-height: var(--checkbox-size);
|
||||
padding-left: var(--unit);
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
|
||||
&:focus ~ .check {
|
||||
&::before {
|
||||
background-color: var(--checkbox-focus-color);
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
height: var(--checkbox-focus-size);
|
||||
left: 50%;
|
||||
margin-left: calc(-1 * var(--checkbox-focus-size) / 2);
|
||||
margin-top: calc(-1 * var(--checkbox-focus-size) / 2);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: var(--checkbox-focus-size);
|
||||
}
|
||||
|
||||
&.checked::before {
|
||||
background-color: var(--checkbox-focus-checked-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
border-color: var(--checkbox-text-color);
|
||||
border-radius: 2px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
composes: reset from '../helpers.css';
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: var(--checkbox-size);
|
||||
position: relative;
|
||||
transition-duration: var(--checkbox-transition-duration);
|
||||
transition-property: background-color;
|
||||
transition-timing-function: var(--animation-curve-default);
|
||||
vertical-align: top;
|
||||
width: var(--checkbox-size);
|
||||
|
||||
&.checked {
|
||||
background-color: var(--checkbox-color);
|
||||
border-color: var(--checkbox-color);
|
||||
|
||||
&::after {
|
||||
animation: checkmark-expand 140ms ease-out forwards;
|
||||
border-bottom-width: 2px;
|
||||
border-color: var(--color-background);
|
||||
border-left: 0;
|
||||
border-right-width: 2px;
|
||||
border-style: solid;
|
||||
border-top: 0;
|
||||
content: '';
|
||||
height: calc(1.2 * var(--unit));
|
||||
left: calc(0.4 * var(--unit));
|
||||
position: absolute;
|
||||
top: calc(-0.1 * var(--unit));
|
||||
transform: rotate(45deg);
|
||||
width: calc(0.7 * var(--unit));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
& > .text {
|
||||
color: var(--checkbox-disabled-color);
|
||||
}
|
||||
|
||||
& > .check {
|
||||
border-color: var(--checkbox-disabled-color);
|
||||
cursor: auto;
|
||||
|
||||
&.checked {
|
||||
background-color: var(--checkbox-disabled-color);
|
||||
border-color: transparent;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmark-expand {
|
||||
0% {
|
||||
height: 0;
|
||||
left: calc(0.6 * var(--unit));
|
||||
top: calc(0.9 * var(--unit));
|
||||
width: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: calc(1.2 * var(--unit));
|
||||
left: calc(0.4 * var(--unit));
|
||||
top: calc(-0.1 * var(--unit));
|
||||
width: calc(0.7 * var(--unit));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
|
||||
.field {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: $checkbox-size;
|
||||
margin-bottom: $checkbox-field-margin-bottom;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
.ripple {
|
||||
background-color: $checkbox-color;
|
||||
opacity: .3;
|
||||
transition-duration: $checkbox-ripple-duration;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
padding-left: $unit;
|
||||
font-size: $checkbox-text-font-size;
|
||||
line-height: $checkbox-size;
|
||||
color: $checkbox-text-color;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.input {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
&:focus ~ .check {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $checkbox-focus-size;
|
||||
height: $checkbox-focus-size;
|
||||
margin-top: - $checkbox-focus-size / 2;
|
||||
margin-left: - $checkbox-focus-size / 2;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background-color: $checkbox-focus-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.checked:before {
|
||||
background-color: $checkbox-focus-checked-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
border-color: $checkbox-text-color;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: 2px;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $checkbox-transition-duration;
|
||||
transition-property: background-color;
|
||||
&.checked {
|
||||
background-color: $checkbox-color;
|
||||
border-color: $checkbox-color;
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: -.1 * $unit;
|
||||
left: .4 * $unit;
|
||||
width: .7 * $unit;
|
||||
height: 1.2 * $unit;
|
||||
content: "";
|
||||
border-color: $color-background;
|
||||
border-style: solid;
|
||||
border-top: 0;
|
||||
border-right-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg);
|
||||
animation: checkmark-expand 140ms ease-out forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
> .text {
|
||||
color: $checkbox-disabled-color;
|
||||
}
|
||||
> .check {
|
||||
cursor: auto;
|
||||
border-color: $checkbox-disabled-color;
|
||||
&.checked {
|
||||
cursor: auto;
|
||||
background-color: $checkbox-disabled-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmark-expand {
|
||||
0% {
|
||||
top: .9 * $unit;
|
||||
left: .6 * $unit;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: -.1 * $unit;
|
||||
left: .4 * $unit;
|
||||
width: .7 * $unit;
|
||||
height: 1.2 * $unit;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
$chip-height: 3.2 * $unit !default;
|
||||
$chip-padding: 1.2 * $unit !default;
|
||||
$chip-margin-right: 0.25 * $unit !default;
|
||||
$chip-background: $palette-grey-200 !default;
|
||||
|
||||
$chip-icon-font-size: 2 * $unit !default;
|
||||
$chip-icon-margin-right: 0.8 * $unit !default;
|
||||
|
||||
$chip-color: $color-text-secondary !default;
|
||||
$chip-font-size: $font-size-small !default;
|
||||
|
||||
$chip-remove-size: 2.4 * $unit !default;
|
||||
$chip-remove-margin: 0.4 * $unit !default;
|
||||
$chip-remove-stroke-width: 0.4 * $unit !default;
|
||||
$chip-remove-background: $palette-grey-400 !default;
|
||||
$chip-remove-background-hover: $palette-grey-500 !default;
|
||||
$chip-remove-color: $color-white !default;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
:root {
|
||||
--chip-height: calc(3.2 * var(--unit));
|
||||
--chip-padding: calc(1.2 * var(--unit));
|
||||
--chip-margin-right: calc(0.25 * var(--unit));
|
||||
--chip-background: var(--palette-grey-200);
|
||||
--chip-icon-font-size: calc(2 * var(--unit));
|
||||
--chip-icon-margin-right: calc(0.8 * var(--unit));
|
||||
--chip-color: var(--color-text-secondary);
|
||||
--chip-font-size: var(--font-size-small);
|
||||
--chip-remove-size: calc(2.4 * var(--unit));
|
||||
--chip-remove-margin: calc(0.4 * var(--unit));
|
||||
--chip-remove-stroke-width: calc(0.4 * var(--unit));
|
||||
--chip-remove-background: var(--palette-grey-400);
|
||||
--chip-remove-background-hover: var(--palette-grey-500);
|
||||
--chip-remove-color: var(--color-white);
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { CHIP } from '../identifiers.js';
|
|||
import { themr } from 'react-css-themr';
|
||||
import { chipFactory } from './Chip.js';
|
||||
import Avatar from '../avatar';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const Chip = chipFactory(Avatar);
|
||||
const ThemedChip = themr(CHIP, theme)(Chip);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import './config.css';
|
||||
|
||||
.chip {
|
||||
background-color: var(--chip-background);
|
||||
border-radius: var(--chip-height);
|
||||
color: var(--chip-color);
|
||||
composes: reset from '../helpers.css';
|
||||
display: inline-block;
|
||||
font-size: var(--chip-font-size);
|
||||
line-height: var(--chip-height);
|
||||
margin-right: var(--chip-margin-right);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0 var(--chip-padding);
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
padding-left: 0;
|
||||
|
||||
& > [data-react-toolbox='avatar'] {
|
||||
height: var(--chip-height);
|
||||
margin-right: var(--chip-icon-margin-right);
|
||||
vertical-align: middle;
|
||||
width: var(--chip-height);
|
||||
|
||||
& > span {
|
||||
font-size: var(--chip-icon-font-size);
|
||||
line-height: var(--chip-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deletable {
|
||||
padding-right: calc(var(--chip-remove-size) + 2 * var(--chip-remove-margin));
|
||||
}
|
||||
|
||||
.delete {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: var(--chip-remove-size);
|
||||
margin: var(--chip-remove-margin);
|
||||
padding: var(--chip-remove-margin);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: var(--chip-remove-size);
|
||||
}
|
||||
|
||||
.delete:hover .deleteIcon {
|
||||
background: var(--chip-remove-background-hover);
|
||||
}
|
||||
|
||||
.deleteIcon {
|
||||
background: var(--chip-remove-background);
|
||||
border-radius: var(--chip-remove-size);
|
||||
vertical-align: top;
|
||||
|
||||
& .deleteX {
|
||||
fill: transparent;
|
||||
stroke: var(--chip-remove-color);
|
||||
stroke-width: var(--chip-remove-stroke-width);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
|
||||
.chip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
padding: 0 $chip-padding;
|
||||
margin-right: $chip-margin-right;
|
||||
overflow: hidden;
|
||||
font-size: $chip-font-size;
|
||||
line-height: $chip-height;
|
||||
color: $chip-color;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
|
||||
> span {
|
||||
font-size: $chip-icon-font-size;
|
||||
line-height: $chip-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deletable {
|
||||
padding-right: $chip-remove-size + 2 * $chip-remove-margin;
|
||||
}
|
||||
|
||||
.delete {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
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 {
|
||||
background: $chip-remove-background-hover;
|
||||
}
|
||||
|
||||
.deleteIcon {
|
||||
vertical-align: top;
|
||||
background: $chip-remove-background;
|
||||
border-radius: $chip-remove-size;
|
||||
|
||||
.deleteX {
|
||||
fill: transparent;
|
||||
stroke-width: $chip-remove-stroke-width;
|
||||
stroke: $chip-remove-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,279 @@
|
|||
:root {
|
||||
--palette-red-50: rgb(255, 235, 238);
|
||||
--palette-red-100: rgb(255, 205, 210);
|
||||
--palette-red-200: rgb(239, 154, 154);
|
||||
--palette-red-300: rgb(229, 115, 115);
|
||||
--palette-red-400: rgb(239, 83, 80);
|
||||
--palette-red-500: rgb(244, 67, 54);
|
||||
--palette-red-600: rgb(229, 57, 53);
|
||||
--palette-red-700: rgb(211, 47, 47);
|
||||
--palette-red-800: rgb(198, 40, 40);
|
||||
--palette-red-900: rgb(183, 28, 28);
|
||||
--palette-red-a100: rgb(255, 138, 128);
|
||||
--palette-red-a200: rgb(255, 82, 82);
|
||||
--palette-red-a400: rgb(255, 23, 68);
|
||||
--palette-red-a700: rgb(213, 0, 0);
|
||||
|
||||
--palette-pink-50: rgb(252, 228, 236);
|
||||
--palette-pink-100: rgb(248, 187, 208);
|
||||
--palette-pink-200: rgb(244, 143, 177);
|
||||
--palette-pink-300: rgb(240, 98, 146);
|
||||
--palette-pink-400: rgb(236, 64, 122);
|
||||
--palette-pink-500: rgb(233, 30, 99);
|
||||
--palette-pink-600: rgb(216, 27, 96);
|
||||
--palette-pink-700: rgb(194, 24, 91);
|
||||
--palette-pink-800: rgb(173, 20, 87);
|
||||
--palette-pink-900: rgb(136, 14, 79);
|
||||
--palette-pink-a100: rgb(255, 128, 171);
|
||||
--palette-pink-a200: rgb(255, 64, 129);
|
||||
--palette-pink-a400: rgb(245, 0, 87);
|
||||
--palette-pink-a700: rgb(197, 17, 98);
|
||||
|
||||
--palette-purple-50: rgb(243, 229, 245);
|
||||
--palette-purple-100: rgb(225, 190, 231);
|
||||
--palette-purple-200: rgb(206, 147, 216);
|
||||
--palette-purple-300: rgb(186, 104, 200);
|
||||
--palette-purple-400: rgb(171, 71, 188);
|
||||
--palette-purple-500: rgb(156, 39, 176);
|
||||
--palette-purple-600: rgb(142, 36, 170);
|
||||
--palette-purple-700: rgb(123, 31, 162);
|
||||
--palette-purple-800: rgb(106, 27, 154);
|
||||
--palette-purple-900: rgb(74, 20, 140);
|
||||
--palette-purple-a100: rgb(234, 128, 252);
|
||||
--palette-purple-a200: rgb(224, 64, 251);
|
||||
--palette-purple-a400: rgb(213, 0, 249);
|
||||
--palette-purple-a700: rgb(170, 0, 255);
|
||||
|
||||
--palette-deep-purple-50: rgb(237, 231, 246);
|
||||
--palette-deep-purple-100: rgb(209, 196, 233);
|
||||
--palette-deep-purple-200: rgb(179, 157, 219);
|
||||
--palette-deep-purple-300: rgb(149, 117, 205);
|
||||
--palette-deep-purple-400: rgb(126, 87, 194);
|
||||
--palette-deep-purple-500: rgb(103, 58, 183);
|
||||
--palette-deep-purple-600: rgb(94, 53, 177);
|
||||
--palette-deep-purple-700: rgb(81, 45, 168);
|
||||
--palette-deep-purple-800: rgb(69, 39, 160);
|
||||
--palette-deep-purple-900: rgb(49, 27, 146);
|
||||
--palette-deep-purple-a100: rgb(179, 136, 255);
|
||||
--palette-deep-purple-a200: rgb(124, 77, 255);
|
||||
--palette-deep-purple-a400: rgb(101, 31, 255);
|
||||
--palette-deep-purple-a700: rgb(98, 0, 234);
|
||||
|
||||
--palette-indigo-50: rgb(232, 234, 246);
|
||||
--palette-indigo-100: rgb(197, 202, 233);
|
||||
--palette-indigo-200: rgb(159, 168, 218);
|
||||
--palette-indigo-300: rgb(121, 134, 203);
|
||||
--palette-indigo-400: rgb(92, 107, 192);
|
||||
--palette-indigo-500: rgb(63, 81, 181);
|
||||
--palette-indigo-600: rgb(57, 73, 171);
|
||||
--palette-indigo-700: rgb(48, 63, 159);
|
||||
--palette-indigo-800: rgb(40, 53, 147);
|
||||
--palette-indigo-900: rgb(26, 35, 126);
|
||||
--palette-indigo-a100: rgb(140, 158, 255);
|
||||
--palette-indigo-a200: rgb(83, 109, 254);
|
||||
--palette-indigo-a400: rgb(61, 90, 254);
|
||||
--palette-indigo-a700: rgb(48, 79, 254);
|
||||
|
||||
--palette-blue-50: rgb(227, 242, 253);
|
||||
--palette-blue-100: rgb(187, 222, 251);
|
||||
--palette-blue-200: rgb(144, 202, 249);
|
||||
--palette-blue-300: rgb(100, 181, 246);
|
||||
--palette-blue-400: rgb(66, 165, 245);
|
||||
--palette-blue-500: rgb(33, 150, 243);
|
||||
--palette-blue-600: rgb(30, 136, 229);
|
||||
--palette-blue-700: rgb(25, 118, 210);
|
||||
--palette-blue-800: rgb(21, 101, 192);
|
||||
--palette-blue-900: rgb(13, 71, 161);
|
||||
--palette-blue-a100: rgb(130, 177, 255);
|
||||
--palette-blue-a200: rgb(68, 138, 255);
|
||||
--palette-blue-a400: rgb(41, 121, 255);
|
||||
--palette-blue-a700: rgb(41, 98, 255);
|
||||
|
||||
--palette-light-blue-50: rgb(225, 245, 254);
|
||||
--palette-light-blue-100: rgb(179, 229, 252);
|
||||
--palette-light-blue-200: rgb(129, 212, 250);
|
||||
--palette-light-blue-300: rgb(79, 195, 247);
|
||||
--palette-light-blue-400: rgb(41, 182, 246);
|
||||
--palette-light-blue-500: rgb(3, 169, 244);
|
||||
--palette-light-blue-600: rgb(3, 155, 229);
|
||||
--palette-light-blue-700: rgb(2, 136, 209);
|
||||
--palette-light-blue-800: rgb(2, 119, 189);
|
||||
--palette-light-blue-900: rgb(1, 87, 155);
|
||||
--palette-light-blue-a100: rgb(128, 216, 255);
|
||||
--palette-light-blue-a200: rgb(64, 196, 255);
|
||||
--palette-light-blue-a400: rgb(0, 176, 255);
|
||||
--palette-light-blue-a700: rgb(0, 145, 234);
|
||||
|
||||
--palette-cyan-50: rgb(224, 247, 250);
|
||||
--palette-cyan-100: rgb(178, 235, 242);
|
||||
--palette-cyan-200: rgb(128, 222, 234);
|
||||
--palette-cyan-300: rgb(77, 208, 225);
|
||||
--palette-cyan-400: rgb(38, 198, 218);
|
||||
--palette-cyan-500: rgb(0, 188, 212);
|
||||
--palette-cyan-600: rgb(0, 172, 193);
|
||||
--palette-cyan-700: rgb(0, 151, 167);
|
||||
--palette-cyan-800: rgb(0, 131, 143);
|
||||
--palette-cyan-900: rgb(0, 96, 100);
|
||||
--palette-cyan-a100: rgb(132, 255, 255);
|
||||
--palette-cyan-a200: rgb(24, 255, 255);
|
||||
--palette-cyan-a400: rgb(0, 229, 255);
|
||||
--palette-cyan-a700: rgb(0, 184, 212);
|
||||
|
||||
--palette-teal-50: rgb(224, 242, 241);
|
||||
--palette-teal-100: rgb(178, 223, 219);
|
||||
--palette-teal-200: rgb(128, 203, 196);
|
||||
--palette-teal-300: rgb(77, 182, 172);
|
||||
--palette-teal-400: rgb(38, 166, 154);
|
||||
--palette-teal-500: rgb(0, 150, 136);
|
||||
--palette-teal-600: rgb(0, 137, 123);
|
||||
--palette-teal-700: rgb(0, 121, 107);
|
||||
--palette-teal-800: rgb(0, 105, 92);
|
||||
--palette-teal-900: rgb(0, 77, 64);
|
||||
--palette-teal-a100: rgb(167, 255, 235);
|
||||
--palette-teal-a200: rgb(100, 255, 218);
|
||||
--palette-teal-a400: rgb(29, 233, 182);
|
||||
--palette-teal-a700: rgb(0, 191, 165);
|
||||
|
||||
--palette-green-50: rgb(232, 245, 233);
|
||||
--palette-green-100: rgb(200, 230, 201);
|
||||
--palette-green-200: rgb(165, 214, 167);
|
||||
--palette-green-300: rgb(129, 199, 132);
|
||||
--palette-green-400: rgb(102, 187, 106);
|
||||
--palette-green-500: rgb(76, 175, 80);
|
||||
--palette-green-600: rgb(67, 160, 71);
|
||||
--palette-green-700: rgb(56, 142, 60);
|
||||
--palette-green-800: rgb(46, 125, 50);
|
||||
--palette-green-900: rgb(27, 94, 32);
|
||||
--palette-green-a100: rgb(185, 246, 202);
|
||||
--palette-green-a200: rgb(105, 240, 174);
|
||||
--palette-green-a400: rgb(0, 230, 118);
|
||||
--palette-green-a700: rgb(0, 200, 83);
|
||||
|
||||
--palette-light-green-50: rgb(241, 248, 233);
|
||||
--palette-light-green-100: rgb(220, 237, 200);
|
||||
--palette-light-green-200: rgb(197, 225, 165);
|
||||
--palette-light-green-300: rgb(174, 213, 129);
|
||||
--palette-light-green-400: rgb(156, 204, 101);
|
||||
--palette-light-green-500: rgb(139, 195, 74);
|
||||
--palette-light-green-600: rgb(124, 179, 66);
|
||||
--palette-light-green-700: rgb(104, 159, 56);
|
||||
--palette-light-green-800: rgb(85, 139, 47);
|
||||
--palette-light-green-900: rgb(51, 105, 30);
|
||||
--palette-light-green-a100: rgb(204, 255, 144);
|
||||
--palette-light-green-a200: rgb(178, 255, 89);
|
||||
--palette-light-green-a400: rgb(118, 255, 3);
|
||||
--palette-light-green-a700: rgb(100, 221, 23);
|
||||
|
||||
--palette-lime-50: rgb(249, 251, 231);
|
||||
--palette-lime-100: rgb(240, 244, 195);
|
||||
--palette-lime-200: rgb(230, 238, 156);
|
||||
--palette-lime-300: rgb(220, 231, 117);
|
||||
--palette-lime-400: rgb(212, 225, 87);
|
||||
--palette-lime-500: rgb(205, 220, 57);
|
||||
--palette-lime-600: rgb(192, 202, 51);
|
||||
--palette-lime-700: rgb(175, 180, 43);
|
||||
--palette-lime-800: rgb(158, 157, 36);
|
||||
--palette-lime-900: rgb(130, 119, 23);
|
||||
--palette-lime-a100: rgb(244, 255, 129);
|
||||
--palette-lime-a200: rgb(238, 255, 65);
|
||||
--palette-lime-a400: rgb(198, 255, 0);
|
||||
--palette-lime-a700: rgb(174, 234, 0);
|
||||
|
||||
--palette-yellow-50: rgb(255, 253, 231);
|
||||
--palette-yellow-100: rgb(255, 249, 196);
|
||||
--palette-yellow-200: rgb(255, 245, 157);
|
||||
--palette-yellow-300: rgb(255, 241, 118);
|
||||
--palette-yellow-400: rgb(255, 238, 88);
|
||||
--palette-yellow-500: rgb(255, 235, 59);
|
||||
--palette-yellow-600: rgb(253, 216, 53);
|
||||
--palette-yellow-700: rgb(251, 192, 45);
|
||||
--palette-yellow-800: rgb(249, 168, 37);
|
||||
--palette-yellow-900: rgb(245, 127, 23);
|
||||
--palette-yellow-a100: rgb(255, 255, 141);
|
||||
--palette-yellow-a200: rgb(255, 255, 0);
|
||||
--palette-yellow-a400: rgb(255, 234, 0);
|
||||
--palette-yellow-a700: rgb(255, 214, 0);
|
||||
|
||||
--palette-amber-50: rgb(255, 248, 225);
|
||||
--palette-amber-100: rgb(255, 236, 179);
|
||||
--palette-amber-200: rgb(255, 224, 130);
|
||||
--palette-amber-300: rgb(255, 213, 79);
|
||||
--palette-amber-400: rgb(255, 202, 40);
|
||||
--palette-amber-500: rgb(255, 193, 7);
|
||||
--palette-amber-600: rgb(255, 179, 0);
|
||||
--palette-amber-700: rgb(255, 160, 0);
|
||||
--palette-amber-800: rgb(255, 143, 0);
|
||||
--palette-amber-900: rgb(255, 111, 0);
|
||||
--palette-amber-a100: rgb(255, 229, 127);
|
||||
--palette-amber-a200: rgb(255, 215, 64);
|
||||
--palette-amber-a400: rgb(255, 196, 0);
|
||||
--palette-amber-a700: rgb(255, 171, 0);
|
||||
|
||||
--palette-orange-50: rgb(255, 243, 224);
|
||||
--palette-orange-100: rgb(255, 224, 178);
|
||||
--palette-orange-200: rgb(255, 204, 128);
|
||||
--palette-orange-300: rgb(255, 183, 77);
|
||||
--palette-orange-400: rgb(255, 167, 38);
|
||||
--palette-orange-500: rgb(255, 152, 0);
|
||||
--palette-orange-600: rgb(251, 140, 0);
|
||||
--palette-orange-700: rgb(245, 124, 0);
|
||||
--palette-orange-800: rgb(239, 108, 0);
|
||||
--palette-orange-900: rgb(230, 81, 0);
|
||||
--palette-orange-a100: rgb(255, 209, 128);
|
||||
--palette-orange-a200: rgb(255, 171, 64);
|
||||
--palette-orange-a400: rgb(255, 145, 0);
|
||||
--palette-orange-a700: rgb(255, 109, 0);
|
||||
|
||||
--palette-deep-orange-50: rgb(251, 233, 231);
|
||||
--palette-deep-orange-100: rgb(255, 204, 188);
|
||||
--palette-deep-orange-200: rgb(255, 171, 145);
|
||||
--palette-deep-orange-300: rgb(255, 138, 101);
|
||||
--palette-deep-orange-400: rgb(255, 112, 67);
|
||||
--palette-deep-orange-500: rgb(255, 87, 34);
|
||||
--palette-deep-orange-600: rgb(244, 81, 30);
|
||||
--palette-deep-orange-700: rgb(230, 74, 25);
|
||||
--palette-deep-orange-800: rgb(216, 67, 21);
|
||||
--palette-deep-orange-900: rgb(191, 54, 12);
|
||||
--palette-deep-orange-a100: rgb(255, 158, 128);
|
||||
--palette-deep-orange-a200: rgb(255, 110, 64);
|
||||
--palette-deep-orange-a400: rgb(255, 61, 0);
|
||||
--palette-deep-orange-a700: rgb(221, 44, 0);
|
||||
|
||||
--palette-brown-50: rgb(239, 235, 233);
|
||||
--palette-brown-100: rgb(215, 204, 200);
|
||||
--palette-brown-200: rgb(188, 170, 164);
|
||||
--palette-brown-300: rgb(161, 136, 127);
|
||||
--palette-brown-400: rgb(141, 110, 99);
|
||||
--palette-brown-500: rgb(121, 85, 72);
|
||||
--palette-brown-600: rgb(109, 76, 65);
|
||||
--palette-brown-700: rgb(93, 64, 55);
|
||||
--palette-brown-800: rgb(78, 52, 46);
|
||||
--palette-brown-900: rgb(62, 39, 35);
|
||||
|
||||
--palette-grey-50: rgb(250, 250, 250);
|
||||
--palette-grey-100: rgb(245, 245, 245);
|
||||
--palette-grey-200: rgb(238, 238, 238);
|
||||
--palette-grey-300: rgb(224, 224, 224);
|
||||
--palette-grey-400: rgb(189, 189, 189);
|
||||
--palette-grey-500: rgb(158, 158, 158);
|
||||
--palette-grey-600: rgb(117, 117, 117);
|
||||
--palette-grey-700: rgb(97, 97, 97);
|
||||
--palette-grey-800: rgb(66, 66, 66);
|
||||
--palette-grey-900: rgb(33, 33, 33);
|
||||
|
||||
--palette-blue-grey-50: rgb(236, 239, 241);
|
||||
--palette-blue-grey-100: rgb(207, 216, 220);
|
||||
--palette-blue-grey-200: rgb(176, 190, 197);
|
||||
--palette-blue-grey-300: rgb(144, 164, 174);
|
||||
--palette-blue-grey-400: rgb(120, 144, 156);
|
||||
--palette-blue-grey-500: rgb(96, 125, 139);
|
||||
--palette-blue-grey-600: rgb(84, 110, 122);
|
||||
--palette-blue-grey-700: rgb(69, 90, 100);
|
||||
--palette-blue-grey-800: rgb(55, 71, 79);
|
||||
--palette-blue-grey-900: rgb(38, 50, 56);
|
||||
|
||||
--color-black: rgb(0, 0, 0);
|
||||
--color-white: rgb(255, 255, 255);
|
||||
--color-dark-contrast: var(--color-white);
|
||||
--color-light-contrast: var(--color-black);
|
||||
}
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
@import "./colors";
|
||||
@import "./globals";
|
||||
@import "./mixins";
|
||||
@import "~normalize.css";
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 1.6rem;
|
||||
-webkit-touch-callout: none;
|
||||
* {
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite,
|
||||
code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1,
|
||||
h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label,
|
||||
legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span,
|
||||
strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small {
|
||||
font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]), button {
|
||||
outline: none;
|
||||
appearance: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
// -- Remove firefox default style for required inputs
|
||||
input[required]:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// -- Material design font sizes
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||
@include typo-display-3($color-contrast: true);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include typo-display-3;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include typo-display-2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include typo-display-1;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include typo-headline;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include typo-title;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include typo-subhead;
|
||||
}
|
||||
|
||||
p {
|
||||
@include typo-body-1;
|
||||
}
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import CssTransitionGroup from 'react-addons-css-transition-group';
|
||||
import { SlideLeft, SlideRight } from '../animations';
|
||||
import { range, getAnimationModule } from '../utils/utils';
|
||||
import time from '../utils/time.js';
|
||||
import utils from '../utils/utils.js';
|
||||
import CalendarMonth from './CalendarMonth.js';
|
||||
|
||||
const DIRECTION_STEPS = { left: -1, right: 1 };
|
||||
|
|
@ -104,7 +103,7 @@ const factory = (IconButton) => {
|
|||
renderYears () {
|
||||
return (
|
||||
<ul data-react-toolbox='years' ref="years" className={this.props.theme.years}>
|
||||
{utils.range(1900, 2100).map(year => (
|
||||
{range(1900, 2100).map(year => (
|
||||
<li
|
||||
children={year}
|
||||
className={year === this.state.viewDate.getFullYear() ? this.props.theme.active : ''}
|
||||
|
|
@ -120,12 +119,17 @@ const factory = (IconButton) => {
|
|||
|
||||
renderMonths () {
|
||||
const { theme } = this.props;
|
||||
const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
|
||||
const animation = this.state.direction === 'left' ? 'slideLeft' : 'slideRight';
|
||||
const animationModule = getAnimationModule(animation, theme);
|
||||
return (
|
||||
<div data-react-toolbox='calendar'>
|
||||
<IconButton id='left' className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth} />
|
||||
<IconButton id='right' className={theme.next} icon='chevron_right' onClick={this.changeViewMonth} />
|
||||
<CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
|
||||
<CssTransitionGroup
|
||||
transitionName={animationModule}
|
||||
transitionEnterTimeout={350}
|
||||
transitionLeaveTimeout={350}
|
||||
>
|
||||
<CalendarMonth
|
||||
enabledDates={this.props.enabledDates}
|
||||
disabledDates={this.props.disabledDates}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import { range } from '../utils/utils';
|
||||
import time from '../utils/time.js';
|
||||
import utils from '../utils/utils.js';
|
||||
import CalendarDay from './CalendarDay.js';
|
||||
|
||||
class Month extends Component {
|
||||
|
|
@ -45,13 +45,13 @@ class Month extends Component {
|
|||
}
|
||||
|
||||
renderWeeks () {
|
||||
const days = utils.range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale));
|
||||
const days = range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale));
|
||||
const source = (this.props.sundayFirstDayOfWeek) ? days : [...days.slice(1), days[0]];
|
||||
return source.map((d, i) => (<span key={i}>{d}</span>));
|
||||
}
|
||||
|
||||
renderDays () {
|
||||
return utils.range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
|
||||
return range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
|
||||
const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
|
||||
return (
|
||||
<CalendarDay
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import expect from 'expect';
|
||||
import theme from '../theme.scss';
|
||||
import theme from '../theme.css';
|
||||
import { DatePickerDialog } from '../DatePicker';
|
||||
import utils from '../../utils/testing';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
$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, .2) !default;
|
||||
$datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
|
||||
$datepicker-primary-dark-color: $datepicker-primary-dark !default;
|
||||
$datepicker-dialog-width: 33 * $unit !default;
|
||||
$datepicker-inactive-opacity: .6 !default;
|
||||
$datepicker-weekday-line-height: 2 * $unit !default;
|
||||
$datepicker-weekday-font-size: $font-size-small !default;
|
||||
$datepicker-month-font-size: $font-size-big !default;
|
||||
$datepicker-day-font-size: 5 * $unit !default;
|
||||
$datepicker-day-line-height: 4 * $unit !default;
|
||||
$datepicker-year-font-size: $font-size-small !default;
|
||||
|
||||
$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, .21) !default;
|
||||
$calendar-arrows-color: $palette-grey-600 !default;
|
||||
$calendar-arrows-font-size: 2 * $unit !default;
|
||||
$calendar-year-font-size: 2.4 * $unit !default;
|
||||
$calendar-day-font-size: 1.3 * $unit !default;
|
||||
$calendar-day-disable-opacity: 0.25 !default;
|
||||
$calendar-row-height: 3 * $unit !default;
|
||||
$calendar-day-padding-topbottom: .2 * $unit !default;
|
||||
$calendar-day-padding-leftright: 0 !default;
|
||||
$calendar-title-height: 3.6 * $unit !default;
|
||||
$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding-topbottom * 12 !default;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
:root {
|
||||
--datepicker-primary: var(--color-primary);
|
||||
--datepicker-primary-contrast: var(--color-primary-contrast);
|
||||
--datepicker-primary-dark: var(--color-primary-dark);
|
||||
--datepicker-primary-color: var(--datepicker-primary);
|
||||
--datepicker-primary-hover-color: color(var(--datepicker-primary) a(0.2));
|
||||
--datepicker-primary-contrast-color: var(--datepicker-primary-contrast);
|
||||
--datepicker-primary-dark-color: var(--datepicker-primary-dark);
|
||||
--datepicker-dialog-width: calc(33 * var(--unit));
|
||||
--datepicker-inactive-opacity: 0.6;
|
||||
--datepicker-weekday-line-height: calc(2 * var(--unit));
|
||||
--datepicker-weekday-font-size: var(--font-size-small);
|
||||
--datepicker-month-font-size: var(--font-size-big);
|
||||
--datepicker-day-font-size: calc(5 * var(--unit));
|
||||
--datepicker-day-line-height: calc(4 * var(--unit));
|
||||
--datepicker-year-font-size: var(--font-size-small);
|
||||
--calendar-primary: var(--color-primary);
|
||||
--calendar-primary-contrast: var(--color-primary-contrast);
|
||||
--calendar-primary-color: var(--calendar-primary);
|
||||
--calendar-primary-contrast-color: var(--calendar-primary-contrast);
|
||||
--calendar-primary-hover-color: color(var(--calendar-primary) a(0.21));
|
||||
--calendar-arrows-color: var(--palette-grey-600);
|
||||
--calendar-arrows-font-size: calc(2 * var(--unit));
|
||||
--calendar-year-font-size: 2.4;
|
||||
--calendar-day-font-size: calc(1.3 * var(--unit));
|
||||
--calendar-day-disable-opacity: 0.25;
|
||||
--calendar-row-height: calc(3 * var(--unit));
|
||||
--calendar-day-padding-topbottom: calc(0.2 * var(--unit));
|
||||
--calendar-day-padding-leftright: 0;
|
||||
--calendar-title-height: calc(3.6 * var(--unit));
|
||||
--calendar-total-height: calc(var(--calendar-row-height) * 7 + var(--calendar-title-height) + var(--calendar-day-padding-topbottom) * 12);
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import calendarFactory from './Calendar.js';
|
|||
import { IconButton } from '../button';
|
||||
import Input from '../input';
|
||||
import Dialog from '../dialog';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const Calendar = calendarFactory(IconButton);
|
||||
const DatePickerDialog = datePickerDialogFactory(Dialog, Calendar);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,239 @@
|
|||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import './config.css';
|
||||
|
||||
.input:not(.disabled) > .inputElement {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: var(--datepicker-primary-color);
|
||||
color: var(--datepicker-primary-contrast-color);
|
||||
cursor: pointer;
|
||||
padding: calc(1.6 * var(--unit)) calc(2 * var(--unit));
|
||||
}
|
||||
|
||||
.year {
|
||||
display: inline-block;
|
||||
font-size: var(--datepicker-year-font-size);
|
||||
transition: opacity, font-size var(--animation-duration) var(--animation-curve-default);
|
||||
}
|
||||
|
||||
.date {
|
||||
display: block;
|
||||
font-size: calc(3.4 * var(--unit));
|
||||
font-weight: 400;
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
line-height: calc(4 * var(--unit));
|
||||
margin: 0;
|
||||
text-transform: capitalize;
|
||||
transition: opacity var(--animation-duration) var(--animation-curve-default);
|
||||
}
|
||||
|
||||
.calendarWrapper {
|
||||
padding: var(--unit) calc(0.5 * var(--unit)) 0;
|
||||
}
|
||||
|
||||
.yearsDisplay {
|
||||
& .date {
|
||||
opacity: var(--datepicker-inactive-opacity);
|
||||
}
|
||||
|
||||
& .year {
|
||||
font-size: var(--font-size-normal);
|
||||
}
|
||||
}
|
||||
|
||||
.monthsDisplay {
|
||||
& .year {
|
||||
opacity: var(--datepicker-inactive-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: var(--datepicker-dialog-width);
|
||||
|
||||
& > [role='body'] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& > [role='navigation'] > .button {
|
||||
color: var(--datepicker-primary-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--datepicker-primary-hover-color);
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
background: var(--datepicker-primary-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
background: var(--calendar-primary-contrast-color);
|
||||
font-size: var(--font-size-small);
|
||||
height: var(--calendar-total-height);
|
||||
line-height: var(--calendar-row-height);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
& .prev,
|
||||
& .next {
|
||||
cursor: pointer;
|
||||
height: calc(3.6 * var(--unit));
|
||||
opacity: 0.7;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: var(--z-index-high);
|
||||
}
|
||||
|
||||
& .prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
& .next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
line-height: var(--calendar-row-height);
|
||||
}
|
||||
|
||||
.years {
|
||||
font-size: var(--font-size-big);
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
|
||||
& > li {
|
||||
cursor: pointer;
|
||||
line-height: 2.4;
|
||||
|
||||
&.active {
|
||||
color: var(--calendar-primary-color);
|
||||
font-size: var(--calendar-year-font-size);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.week {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--calendar-day-font-size);
|
||||
height: var(--calendar-row-height);
|
||||
line-height: var(--calendar-row-height);
|
||||
opacity: 0.5;
|
||||
|
||||
& > span {
|
||||
flex: 0 0 calc(100% / 7);
|
||||
}
|
||||
}
|
||||
|
||||
.days {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--calendar-day-font-size);
|
||||
}
|
||||
|
||||
.day {
|
||||
flex: 0 0 calc(100% / 7);
|
||||
padding: var(--calendar-day-padding-topbottom) var(--calendar-day-padding-leftright);
|
||||
|
||||
& > span {
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: var(--calendar-row-height);
|
||||
line-height: var(--calendar-row-height);
|
||||
width: var(--calendar-row-height);
|
||||
}
|
||||
|
||||
&:hover:not(.active):not(.disabled) > span {
|
||||
background: var(--calendar-primary-hover-color);
|
||||
color: var(--calendar-primary-contrast-color);
|
||||
}
|
||||
|
||||
&.active > span {
|
||||
background: var(--calendar-primary-color);
|
||||
color: var(--calendar-primary-contrast-color);
|
||||
}
|
||||
|
||||
&:hover:not(.disabled) > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: var(--calendar-day-disable-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.month {
|
||||
background-color: var(--calendar-primary-contrast-color);
|
||||
}
|
||||
|
||||
.slideRightEnter,
|
||||
.slideRightLeave {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slideRightEnterActive,
|
||||
.slideRightLeaveActive {
|
||||
transition-duration: 350ms;
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.slideRightEnter {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
|
||||
&.slideRightEnterActive {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideRightLeave {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
|
||||
&.slideRightLeaveActive {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.slideLeftEnter,
|
||||
.slideLeftLeave {
|
||||
position: absolute;
|
||||
transition-duration: 0.35s;
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.slideLeftEnter {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
|
||||
&.slideLeftEnterActive {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideLeftLeave {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
&.slideLeftLeaveActive {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
|
||||
.input:not(.disabled) > .inputElement {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 1.6 * $unit 2 * $unit;
|
||||
color: $datepicker-primary-contrast-color;
|
||||
cursor: pointer;
|
||||
background-color: $datepicker-primary-color;
|
||||
}
|
||||
|
||||
.year {
|
||||
display: inline-block;
|
||||
font-size: $datepicker-year-font-size;
|
||||
transition: opacity, font-size $animation-duration $animation-curve-default;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: block;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
text-transform: capitalize;
|
||||
transition: opacity $animation-duration $animation-curve-default;
|
||||
}
|
||||
|
||||
.calendarWrapper {
|
||||
padding: $unit .5 * $unit 0;
|
||||
}
|
||||
|
||||
.yearsDisplay {
|
||||
.date {
|
||||
opacity: $datepicker-inactive-opacity;
|
||||
}
|
||||
.year {
|
||||
font-size: $font-size-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.monthsDisplay {
|
||||
.year {
|
||||
opacity: $datepicker-inactive-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: $datepicker-dialog-width;
|
||||
> [role="body"] {
|
||||
padding: 0;
|
||||
}
|
||||
> [role="navigation"] > .button {
|
||||
color: $datepicker-primary-color;
|
||||
&:hover {
|
||||
background: $datepicker-primary-hover-color;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background: $datepicker-primary-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
position: relative;
|
||||
height: $calendar-total-height;
|
||||
overflow: hidden;
|
||||
font-size: $font-size-small;
|
||||
line-height: $calendar-row-height;
|
||||
text-align: center;
|
||||
background: $calendar-primary-contrast-color;
|
||||
.prev, .next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: $z-index-high;
|
||||
height: 3.6 * $unit;
|
||||
cursor: pointer;
|
||||
opacity: .7;
|
||||
}
|
||||
.prev {
|
||||
left: 0;
|
||||
}
|
||||
.next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
line-height: $calendar-row-height;
|
||||
}
|
||||
|
||||
.years {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
font-size: $font-size-big;
|
||||
> li {
|
||||
line-height: 2.4;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
font-size: $calendar-year-font-size;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
color: $calendar-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.week {
|
||||
display: flex;
|
||||
height: $calendar-row-height;
|
||||
flex-wrap: wrap;
|
||||
font-size: $calendar-day-font-size;
|
||||
line-height: $calendar-row-height;
|
||||
opacity: .5;
|
||||
> span {
|
||||
flex: 0 0 (100% / 7);
|
||||
}
|
||||
}
|
||||
|
||||
.days {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: $calendar-day-font-size;
|
||||
}
|
||||
|
||||
.day {
|
||||
flex: 0 0 (100% / 7);
|
||||
padding: $calendar-day-padding-topbottom $calendar-day-padding-leftright;
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: $calendar-row-height;
|
||||
height: $calendar-row-height;
|
||||
line-height: $calendar-row-height;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:hover:not(.active):not(.disabled) > span {
|
||||
color: $calendar-primary-contrast-color;
|
||||
background: $calendar-primary-hover-color;
|
||||
}
|
||||
&.active > span {
|
||||
color: $calendar-primary-contrast-color;
|
||||
background: $calendar-primary-color;
|
||||
}
|
||||
&:hover:not(.disabled) > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: $calendar-day-disable-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.month {
|
||||
background-color: $calendar-primary-contrast-color;
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
|
|||
import { themr } from 'react-css-themr';
|
||||
import classnames from 'classnames';
|
||||
import { DIALOG } from '../identifiers.js';
|
||||
import Portal from '../hoc/Portal.js';
|
||||
import ActivableRenderer from '../hoc/ActivableRenderer.js';
|
||||
import InjectButton from '../button/Button.js';
|
||||
import InjectOverlay from '../overlay/Overlay.js';
|
||||
|
|
@ -18,14 +19,15 @@ const factory = (Overlay, Button) => {
|
|||
}, props.className);
|
||||
|
||||
return (
|
||||
<Overlay
|
||||
active={props.active}
|
||||
onClick={props.onOverlayClick}
|
||||
onEscKeyDown={props.onEscKeyDown}
|
||||
onMouseDown={props.onOverlayMouseDown}
|
||||
onMouseMove={props.onOverlayMouseMove}
|
||||
onMouseUp={props.onOverlayMouseUp}
|
||||
>
|
||||
<Portal className={props.theme.wrapper}>
|
||||
<Overlay
|
||||
active={props.active}
|
||||
onClick={props.onOverlayClick}
|
||||
onEscKeyDown={props.onEscKeyDown}
|
||||
onMouseDown={props.onOverlayMouseDown}
|
||||
onMouseMove={props.onOverlayMouseMove}
|
||||
onMouseUp={props.onOverlayMouseUp}
|
||||
/>
|
||||
<div data-react-toolbox='dialog' className={className}>
|
||||
<section role='body' className={props.theme.body}>
|
||||
{props.title ? <h6 className={props.theme.title}>{props.title}</h6> : null}
|
||||
|
|
@ -38,7 +40,7 @@ const factory = (Overlay, Button) => {
|
|||
: null
|
||||
}
|
||||
</div>
|
||||
</Overlay>
|
||||
</Portal>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -58,7 +60,8 @@ const factory = (Overlay, Button) => {
|
|||
button: PropTypes.string,
|
||||
dialog: PropTypes.string,
|
||||
navigation: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
title: PropTypes.string,
|
||||
wrapper: PropTypes.string
|
||||
}),
|
||||
title: PropTypes.string,
|
||||
type: PropTypes.string
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
$dialog-border-radius: .2 * $unit !default;
|
||||
$dialog-color-title: $color-black !default;
|
||||
$dialog-color-white: $color-white !default;
|
||||
$dialog-content-padding: 2.4 * $unit !default;
|
||||
$dialog-navigation-padding: .8 * $unit !default;
|
||||
$dialog-translate-y: 4 * $unit !default;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
:root {
|
||||
--dialog-border-radius: calc(0.2 * var(--unit));
|
||||
--dialog-color-title: var(--color-black);
|
||||
--dialog-color-white: var(--color-white);
|
||||
--dialog-content-padding: calc(2.4 * var(--unit));
|
||||
--dialog-navigation-padding: calc(0.8 * var(--unit));
|
||||
--dialog-translate-y: calc(4 * var(--unit));
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import { DIALOG } from '../identifiers.js';
|
|||
import { dialogFactory } from './Dialog.js';
|
||||
import Overlay from '../overlay';
|
||||
import Button from '../button';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const Dialog = dialogFactory(Overlay, Button);
|
||||
const ThemedDialog = themr(DIALOG, theme)(Dialog);
|
||||
|
|
|
|||
|
|
@ -69,3 +69,4 @@ Notice that the `fullscreen` option only applies on mobile devices with small sc
|
|||
| `dialog` | Used for the root element.|
|
||||
| `navigation` | Used for the navigation element when it implements actions.|
|
||||
| `title` | Used for the title element of the dialog.|
|
||||
| `wrapper` | A wrapper class for the top of the root.|
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import '../media.css';
|
||||
@import './config.css';
|
||||
|
||||
.wrapper {
|
||||
align-items: center;
|
||||
composes: reset from '../helpers.css';
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
z-index: var(--z-index-higher);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background-color: var(--dialog-color-white);
|
||||
border-radius: var(--dialog-border-radius);
|
||||
box-shadow: var(--zdepth-shadow-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 96vh;
|
||||
max-width: 96vw;
|
||||
opacity: 0;
|
||||
transform: translateY(calc(-1 * var(--dialog-translate-y)));
|
||||
transition:
|
||||
opacity var(--animation-duration) var(--animation-curve-default),
|
||||
transform var(--animation-duration) var(--animation-curve-default);
|
||||
transition-delay: var(--animation-delay);
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
width: 30vw;
|
||||
|
||||
@media screen and (--sm-tablet-viewport) {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
@media screen and (--xs-viewport) {
|
||||
width: 75vw;
|
||||
}
|
||||
}
|
||||
|
||||
.normal {
|
||||
width: 50vw;
|
||||
|
||||
@media screen and (--xs-viewport) {
|
||||
width: 96vw;
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
width: 96vw;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
width: 96vw;
|
||||
|
||||
@media screen and (--xs-viewport) {
|
||||
border-radius: 0;
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--dialog-color-title);
|
||||
flex-grow: 0;
|
||||
font-size: calc(2 * var(--unit));
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1;
|
||||
margin: 0 0 calc(1.6 * var(--unit));
|
||||
}
|
||||
|
||||
.body {
|
||||
color: var(--color-text-secondary);
|
||||
flex-grow: 2;
|
||||
padding: var(--dialog-content-padding);
|
||||
|
||||
& p {
|
||||
font-size: calc(1.4 * var(--unit));
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: calc(2.4 * var(--unit));
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
flex-grow: 0;
|
||||
padding: var(--dialog-navigation-padding);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: var(--dialog-navigation-padding);
|
||||
min-width: 0;
|
||||
padding-left: var(--dialog-navigation-padding);
|
||||
padding-right: var(--dialog-navigation-padding);
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
max-width: 96vw;
|
||||
max-height: 96vh;
|
||||
flex-direction: column;
|
||||
background-color: $dialog-color-white;
|
||||
border-radius: $dialog-border-radius;
|
||||
box-shadow: $zdepth-shadow-5;
|
||||
opacity: 0;
|
||||
transition-delay: $animation-delay;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: opacity, transform;
|
||||
transform: translateY(-$dialog-translate-y);
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
width: 30vw;
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-sm-tablet) {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xs) {
|
||||
width: 75vw;
|
||||
}
|
||||
}
|
||||
|
||||
.normal {
|
||||
width: 50vw;
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xs) {
|
||||
width: 96vw;
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
width: 96vw;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
width: 96vw;
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xs) {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include typo-title();
|
||||
flex-grow: 0;
|
||||
margin-bottom: 1.6 * $unit;
|
||||
color: $dialog-color-title;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex-grow: 2;
|
||||
padding: $dialog-content-padding;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
flex-grow: 0;
|
||||
padding: $dialog-navigation-padding;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.button {
|
||||
min-width: 0;
|
||||
padding-right: $dialog-navigation-padding;
|
||||
padding-left: $dialog-navigation-padding;
|
||||
margin-left: $dialog-navigation-padding;
|
||||
}
|
||||
|
|
@ -1,46 +1,74 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import { themr } from 'react-css-themr';
|
||||
import classnames from 'classnames';
|
||||
import Portal from '../hoc/Portal.js';
|
||||
import { DRAWER } from '../identifiers.js';
|
||||
import ActivableRenderer from '../hoc/ActivableRenderer.js';
|
||||
import InjectOverlay from '../overlay/Overlay.js';
|
||||
|
||||
const factory = (Overlay) => {
|
||||
const Drawer = ({ active, children, className, onOverlayClick, theme, type }) => {
|
||||
const Drawer = ({
|
||||
active,
|
||||
children,
|
||||
className,
|
||||
insideTree,
|
||||
onOverlayClick,
|
||||
theme,
|
||||
type,
|
||||
withOverlay
|
||||
}) => {
|
||||
const _className = classnames([theme.drawer, theme[type]], {
|
||||
[theme.active]: active
|
||||
}, className);
|
||||
|
||||
return (
|
||||
<Overlay active={active} onClick={onOverlayClick}>
|
||||
<div data-react-toolbox='drawer' className={_className}>
|
||||
<aside className={theme.content}>
|
||||
{children}
|
||||
</aside>
|
||||
</div>
|
||||
</Overlay>
|
||||
const content = (
|
||||
<aside
|
||||
data-react-toolbox='drawer'
|
||||
className={_className}
|
||||
children={children}
|
||||
/>
|
||||
);
|
||||
|
||||
return React.createElement(insideTree ? 'div' : Portal, {
|
||||
className: theme.wrapper,
|
||||
children: [
|
||||
withOverlay && (
|
||||
<Overlay
|
||||
active={active}
|
||||
onClick={onOverlayClick}
|
||||
theme={theme}
|
||||
themeNamespace="overlay"
|
||||
/>
|
||||
),
|
||||
content
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
Drawer.propTypes = {
|
||||
active: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
insideTree: PropTypes.bool,
|
||||
onOverlayClick: PropTypes.func,
|
||||
theme: PropTypes.shape({
|
||||
active: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
drawer: PropTypes.string,
|
||||
left: PropTypes.string,
|
||||
right: PropTypes.string
|
||||
}),
|
||||
type: PropTypes.oneOf(['left', 'right'])
|
||||
type: PropTypes.oneOf([
|
||||
'left', 'right'
|
||||
]),
|
||||
withOverlay: PropTypes.bool
|
||||
};
|
||||
|
||||
Drawer.defaultProps = {
|
||||
active: false,
|
||||
className: '',
|
||||
type: 'left'
|
||||
insideTree: false,
|
||||
type: 'left',
|
||||
withOverlay: true
|
||||
};
|
||||
|
||||
return ActivableRenderer()(Drawer);
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
$drawer-background-color: $palette-grey-50 !default;
|
||||
$drawer-border-color: $palette-grey-300 !default;
|
||||
$drawer-text-color: $palette-grey-800 !default;
|
||||
$drawer-width: 24 * $unit !default;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
:root {
|
||||
--drawer-background-color: var(--palette-grey-50);
|
||||
--drawer-border-color: var(--palette-grey-300);
|
||||
--drawer-text-color: var(--palette-grey-800);
|
||||
--drawer-width: calc(24 * var(--unit));
|
||||
--drawer-desktop-width: calc(4 * var(--standard-increment-desktop));
|
||||
--drawer-mobile-width: calc(5 * var(--standard-increment-mobile));
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
|
|||
import { DRAWER } from '../identifiers.js';
|
||||
import { Overlay } from '../overlay';
|
||||
import { drawerFactory } from './Drawer.js';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const Drawer = drawerFactory(Overlay);
|
||||
const ThemedDrawer = themr(DRAWER, theme)(Drawer);
|
||||
|
|
|
|||
|
|
@ -37,8 +37,10 @@ If you want to provide a theme via context, the component key is `RTDrawer`.
|
|||
|:-----|:-----|:-----|:-----|
|
||||
| `active` | `Boolean` | `false` | If true, the drawer will be visible.|
|
||||
| `className` | `String` | `''` | Sets a class to give customized styles to the drawer.|
|
||||
| `insideTree` | `Boolean` | `false` | If true the Drawer is rendered inside the normal tree.|
|
||||
| `onOverlayClick` | `Function` | | Callback function to be invoked when the overlay is clicked.|
|
||||
| `type` | `String` | `left` | Type of drawer. It can be `left` or `right` to display the drawer on the left or right side of the screen.|
|
||||
| `withOverlay` | `String` | `true` | If true display an Overlay that locks the scroll when the Drawer is active.|
|
||||
|
||||
## Theme
|
||||
|
||||
|
|
@ -49,3 +51,4 @@ If you want to provide a theme via context, the component key is `RTDrawer`.
|
|||
| `drawer` | Root class.|
|
||||
| `left` | Added to the root class when drawer is to the left.|
|
||||
| `right` | Added to the root class when drawer is to the right.|
|
||||
| `wrapper` | A wrapper class for the top of the root.|
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import '../media.css';
|
||||
@import './config.css';
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: var(--z-index-higher);
|
||||
}
|
||||
|
||||
.drawer {
|
||||
background-color: var(--drawer-background-color);
|
||||
box-shadow: var(--shadow-2p);
|
||||
color: var(--drawer-text-color);
|
||||
composes: reset from '../helpers.css';
|
||||
display: block;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform var(--animation-duration) var(--animation-curve-default);
|
||||
transition-delay: 0s;
|
||||
width: var(--drawer-mobile-width);
|
||||
will-change: transform;
|
||||
|
||||
&.active {
|
||||
pointer-events: all;
|
||||
transform: translateX(0);
|
||||
transition-delay: var(--animation-delay);
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-left: 1px solid var(--drawer-border-color);
|
||||
right: 0;
|
||||
|
||||
&:not(.active) {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-right: 1px solid var(--drawer-border-color);
|
||||
left: 0;
|
||||
|
||||
&:not(.active) {
|
||||
transform: translateX(calc(-1 * 100%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (--larger-than-xs-viewport) {
|
||||
.drawer {
|
||||
width: var(--drawer-desktop-width);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
|
||||
.drawer {
|
||||
@include shadow-2dp();
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: $drawer-width;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: $drawer-text-color;
|
||||
pointer-events: none;
|
||||
background-color: $drawer-background-color;
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: transform;
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
&.active {
|
||||
pointer-events: all;
|
||||
transition-delay: $animation-delay;
|
||||
transform: translateX(0);
|
||||
}
|
||||
&.right {
|
||||
right: 0;
|
||||
border-left: 1px solid $drawer-border-color;
|
||||
&:not(.active) {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
left: 0;
|
||||
border-right: 1px solid $drawer-border-color;
|
||||
&:not(.active) {
|
||||
transform: translateX(- 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -194,11 +194,10 @@ const factory = (Input) => {
|
|||
data-react-toolbox='dropdown'
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.handleFocus}
|
||||
tabIndex="0"
|
||||
>
|
||||
<Input
|
||||
{...others}
|
||||
tabIndex="-1"
|
||||
tabIndex="0"
|
||||
className={theme.value}
|
||||
onClick={this.handleClick}
|
||||
required={this.props.required}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import {
|
|||
Simulate
|
||||
} from 'react-addons-test-utils';
|
||||
import sinon from 'sinon';
|
||||
import theme from '../theme.scss';
|
||||
import theme from '../theme.css';
|
||||
import Dropdown from '../Dropdown';
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
$dropdown-color-white: $color-white !default;
|
||||
$dropdown-color-primary: $color-primary !default;
|
||||
$dropdown-color-primary-contrast: $color-primary-contrast !default;
|
||||
$dropdown-color-disabled: rgba($color-black, 0.26) !default;
|
||||
$dropdown-value-hover-background: $palette-grey-200 !default;
|
||||
$dropdown-overflow-max-height: 45vh !default;
|
||||
$dropdown-value-border-radius: .2 * $unit !default;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
:root {
|
||||
--dropdown-value-border-size: calc(var(--input-field-height) / 7);
|
||||
--dropdown-color-white: var(--color-white);
|
||||
--dropdown-color-primary: var(--color-primary);
|
||||
--dropdown-color-primary-contrast: var(--color-primary-contrast);
|
||||
--dropdown-color-disabled: color(var(--color-black) a(26%));
|
||||
--dropdown-value-hover-background: var(--palette-grey-200);
|
||||
--dropdown-overflow-max-height: 45vh;
|
||||
--dropdown-value-border-radius: calc(0.2 * var(--unit));
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
|
|||
import { DROPDOWN } from '../identifiers.js';
|
||||
import { dropdownFactory } from './Dropdown.js';
|
||||
import { Input } from '../input';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const Dropdown = dropdownFactory(Input);
|
||||
const ThemedDropdown = themr(DROPDOWN, theme)(Dropdown);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,165 @@
|
|||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import '../input/config.css';
|
||||
@import './config.css';
|
||||
|
||||
.dropdown {
|
||||
composes: reset from '../helpers.css';
|
||||
position: relative;
|
||||
|
||||
&:not(.active) {
|
||||
& > .values {
|
||||
max-height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
& > .label,
|
||||
& > .value {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
& > .values {
|
||||
box-shadow: var(--zdepth-shadow-1);
|
||||
max-height: var(--dropdown-overflow-max-height);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.up) > .values {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.up > .values {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: normal;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
& > input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-left: var(--dropdown-value-border-size) solid transparent;
|
||||
border-right: var(--dropdown-value-border-size) solid transparent;
|
||||
border-top: var(--dropdown-value-border-size) solid var(--input-text-bottom-border-color);
|
||||
content: '';
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: var(--input-chevron-offset);
|
||||
top: 50%;
|
||||
transition: transform var(--animation-duration) var(--animation-curve-default);
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
cursor: pointer;
|
||||
padding: var(--input-padding) 0;
|
||||
position: relative;
|
||||
|
||||
&.errored {
|
||||
padding-bottom: 0;
|
||||
|
||||
& > .label {
|
||||
color: var(--input-text-error-color);
|
||||
}
|
||||
|
||||
& > .templateValue {
|
||||
border-bottom: 1px solid var(--input-text-error-color);
|
||||
}
|
||||
|
||||
& > .label > .required {
|
||||
color: var(--input-text-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: normal;
|
||||
pointer-events: none;
|
||||
|
||||
& > .templateValue {
|
||||
border-bottom-style: dotted;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.templateValue {
|
||||
background-color: var(--input-text-background-color);
|
||||
border-bottom: 1px solid var(--input-text-bottom-border-color);
|
||||
color: var(--color-text);
|
||||
min-height: var(--input-field-height);
|
||||
padding: var(--input-field-padding) 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--input-text-label-color);
|
||||
font-size: var(--input-label-font-size);
|
||||
left: 0;
|
||||
line-height: var(--input-field-font-size);
|
||||
position: absolute;
|
||||
top: var(--input-focus-label-top);
|
||||
|
||||
& .required {
|
||||
color: var(--input-text-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--input-text-error-color);
|
||||
font-size: var(--input-label-font-size);
|
||||
line-height: var(--input-underline-height);
|
||||
margin-bottom: calc(-1 * var(--input-underline-height));
|
||||
}
|
||||
|
||||
.values {
|
||||
background-color: var(--dropdown-color-white);
|
||||
border-radius: var(--dropdown-value-border-radius);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
transition-duration: var(--animation-duration);
|
||||
transition-property: max-height, box-shadow;
|
||||
transition-timing-function: var(--animation-curve-default);
|
||||
width: 100%;
|
||||
z-index: var(--z-index-high);
|
||||
|
||||
& > * {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
padding: var(--unit);
|
||||
position: relative;
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
background-color: var(--dropdown-value-hover-background);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: var(--dropdown-color-primary);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: var(--dropdown-color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "../input/config";
|
||||
@import "./config";
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
&:not(.active) {
|
||||
> .values {
|
||||
max-height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> .label, > .value {
|
||||
opacity: .5;
|
||||
}
|
||||
> .values {
|
||||
max-height: $dropdown-overflow-max-height;
|
||||
visibility: visible;
|
||||
box-shadow: $zdepth-shadow-1;
|
||||
}
|
||||
}
|
||||
&:not(.up) > .values {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
&.up > .values {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
cursor: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
> input {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:after {
|
||||
$size: ($input-field-height / 7);
|
||||
$border: $size solid transparent;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $input-chevron-offset;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-top: $size solid $input-text-bottom-border-color;
|
||||
border-right: $border;
|
||||
border-left: $border;
|
||||
transition: transform $animation-duration $animation-curve-default;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
position: relative;
|
||||
padding: $input-padding 0;
|
||||
cursor: pointer;
|
||||
&.errored {
|
||||
padding-bottom: 0;
|
||||
> .label {
|
||||
color: $input-text-error-color;
|
||||
}
|
||||
> .templateValue {
|
||||
border-bottom: 1px solid $input-text-error-color;
|
||||
}
|
||||
> .label > .required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
cursor: normal;
|
||||
> .templateValue {
|
||||
border-bottom-style: dotted;
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.templateValue {
|
||||
position: relative;
|
||||
min-height: $input-field-height;
|
||||
padding: $input-field-padding 0;
|
||||
color: $color-text;
|
||||
background-color: $input-text-background-color;
|
||||
border-bottom: 1px solid $input-text-bottom-border-color;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: $input-focus-label-top;
|
||||
left: 0;
|
||||
font-size: $input-label-font-size;
|
||||
line-height: $input-field-font-size;
|
||||
color: $input-text-label-color;
|
||||
.required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-bottom: - $input-underline-height;
|
||||
font-size: $input-label-font-size;
|
||||
line-height: $input-underline-height;
|
||||
color: $input-text-error-color;
|
||||
}
|
||||
|
||||
.values {
|
||||
@include no-webkit-scrollbar;
|
||||
position: absolute;
|
||||
z-index: $z-index-high;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
background-color: $dropdown-color-white;
|
||||
border-radius: $dropdown-value-border-radius;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: max-height, box-shadow;
|
||||
> * {
|
||||
position: relative;
|
||||
padding: $unit;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover:not(.disabled) {
|
||||
background-color: $dropdown-value-hover-background;
|
||||
}
|
||||
&.selected {
|
||||
color: $dropdown-color-primary;
|
||||
}
|
||||
&.disabled {
|
||||
color: $dropdown-color-disabled;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@import './variables.css';
|
||||
|
||||
.reset {
|
||||
box-sizing: border-box;
|
||||
font-family: var(--preferred-font);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
text-size-adjust: 100%;
|
||||
|
||||
& *,
|
||||
& *::after,
|
||||
& *::before {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,11 +4,13 @@ import ReactDOM from 'react-dom';
|
|||
class Portal extends Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
container: PropTypes.any,
|
||||
lockBody: PropTypes.bool
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
className: '',
|
||||
lockBody: true
|
||||
}
|
||||
|
||||
|
|
@ -49,11 +51,13 @@ class Portal extends Component {
|
|||
this._portalContainerNode = null;
|
||||
}
|
||||
|
||||
_renderOverlay () {
|
||||
const overlay = !this.props.children
|
||||
? null
|
||||
: React.Children.only(this.props.children);
|
||||
_getOverlay () {
|
||||
if (!this.props.children) return null;
|
||||
return <div className={this.props.className}>{this.props.children}</div>;
|
||||
}
|
||||
|
||||
_renderOverlay () {
|
||||
const overlay = this._getOverlay();
|
||||
if (overlay !== null) {
|
||||
this._mountOverlayTarget();
|
||||
this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer(
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export const CHIP = 'RTChip';
|
|||
export const CHECKBOX = 'RTCheckbox';
|
||||
export const DATE_PICKER = 'RTDatePicker';
|
||||
export const DIALOG = 'RTDialog';
|
||||
export const DRAWER = 'RTDrawer';
|
||||
export const DROPDOWN = 'RTDropdown';
|
||||
export const INPUT = 'RTInput';
|
||||
export const LAYOUT = 'RTLayout';
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
$input-padding: 2 * $unit !default;
|
||||
$input-field-padding: .8 * $unit !default;
|
||||
$input-field-font-size: 1.6 * $unit !default;
|
||||
$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4 !default;
|
||||
$input-label-font-size: 1.2 * $unit !default;
|
||||
$input-focus-label-top: .6 * $unit !default;
|
||||
$input-text-background-color: transparent !default;
|
||||
$input-text-label-color: rgba($color-black, 0.26) !default;
|
||||
$input-text-bottom-border-color: rgba($color-black, 0.12) !default;
|
||||
$input-text-highlight-color: $color-primary !default;
|
||||
$input-text-disabled-color: $input-text-bottom-border-color !default;
|
||||
$input-text-disabled-text-color: $input-text-label-color !default;
|
||||
$input-text-error-color: rgb(222, 50, 38) !default;
|
||||
$input-text-required-color: rgb(222, 50, 38) !default;
|
||||
$input-underline-height: 2 * $unit !default;
|
||||
$input-icon-font-size: 2.4 * $unit !default;
|
||||
$input-icon-size: 2 * $input-icon-font-size !default;
|
||||
$input-icon-offset: 1.6 * $unit !default;
|
||||
$input-chevron-offset: .8 * $unit !default;
|
||||
$input-hint-opacity: 1 !default;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
:root {
|
||||
--input-padding: calc(2 * var(--unit));
|
||||
--input-field-padding: calc(0.8 * var(--unit));
|
||||
--input-field-font-size: calc(1.6 * var(--unit));
|
||||
--input-field-height: calc(var(--input-field-padding) * 2 + var(--input-field-font-size) * 1.4);
|
||||
--input-label-font-size: calc(1.2 * var(--unit));
|
||||
--input-focus-label-top: calc(0.6 * var(--unit));
|
||||
--input-text-background-color: transparent;
|
||||
--input-text-label-color: color(var(--color-black) a(26%));
|
||||
--input-text-bottom-border-color: color(var(--color-black) a(12%));
|
||||
--input-text-highlight-color: var(--color-primary);
|
||||
--input-text-disabled-color: var(--input-text-bottom-border-color);
|
||||
--input-text-disabled-text-color: var(--input-text-label-color);
|
||||
--input-text-error-color: rgb(222, 50, 38);
|
||||
--input-text-required-color: rgb(222, 50, 38);
|
||||
--input-underline-height: calc(2 * var(--unit));
|
||||
--input-icon-font-size: calc(2.4 * var(--unit));
|
||||
--input-icon-size: calc(2 * var(--input-icon-font-size));
|
||||
--input-icon-offset: calc(1.6 * var(--unit));
|
||||
--input-chevron-offset: calc(0.8 * var(--unit));
|
||||
--input-hint-opacity: 1;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { INPUT } from '../identifiers.js';
|
|||
import { themr } from 'react-css-themr';
|
||||
import { inputFactory } from './Input.js';
|
||||
import FontIcon from '../font_icon/FontIcon.js';
|
||||
import theme from './theme.scss';
|
||||
import theme from './theme.css';
|
||||
|
||||
const Input = inputFactory(FontIcon);
|
||||
const ThemedInput = themr(INPUT, theme, { withRef: true })(Input);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,183 @@
|
|||
@import '../colors.css';
|
||||
@import '../variables.css';
|
||||
@import './config.css';
|
||||
|
||||
.input {
|
||||
composes: reset from '../helpers.css';
|
||||
padding: var(--input-padding) 0;
|
||||
position: relative;
|
||||
|
||||
&.withIcon {
|
||||
margin-left: var(--input-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--input-text-label-color);
|
||||
display: block;
|
||||
font-size: var(--input-icon-font-size) !important;
|
||||
height: var(--input-icon-size);
|
||||
left: calc(-1 * var(--input-icon-size));
|
||||
line-height: var(--input-icon-size) !important;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: var(--input-icon-offset);
|
||||
transition: color var(--animation-duration) var(--animation-curve-default);
|
||||
width: var(--input-icon-size);
|
||||
}
|
||||
|
||||
.inputElement {
|
||||
background-color: var(--input-text-background-color);
|
||||
border-bottom: 1px solid var(--input-text-bottom-border-color);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
color: var(--color-text);
|
||||
display: block;
|
||||
font-size: var(--input-field-font-size);
|
||||
outline: none;
|
||||
padding: var(--input-field-padding) 0;
|
||||
width: 100%;
|
||||
|
||||
&:focus:not([disabled]):not([readonly]) {
|
||||
& ~ .bar::before,
|
||||
& ~ .bar::after {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
& ~ .label:not(.fixed) {
|
||||
color: var(--input-text-highlight-color);
|
||||
}
|
||||
|
||||
& ~ .label > .required {
|
||||
color: var(--input-text-required-color);
|
||||
}
|
||||
|
||||
& ~ .hint {
|
||||
display: block;
|
||||
opacity: var(--input-hint-opacity);
|
||||
}
|
||||
|
||||
& ~ .icon {
|
||||
color: var(--input-text-highlight-color);
|
||||
}
|
||||
|
||||
&.filled ~ .hint {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not([disabled]):not([readonly]),
|
||||
&.filled,
|
||||
&[type='date'],
|
||||
&[type='time'] {
|
||||
& ~ .label:not(.fixed) {
|
||||
font-size: var(--input-label-font-size);
|
||||
top: var(--input-focus-label-top);
|
||||
}
|
||||
}
|
||||
|
||||
&.filled ~ .label.fixed,
|
||||
&.filled ~ .hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--input-text-label-color);
|
||||
font-size: var(--input-field-font-size);
|
||||
left: 0;
|
||||
line-height: var(--input-field-font-size);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: calc(var(--input-padding) + 1.5 * var(--input-field-padding));
|
||||
transition-duration: var(--animation-duration);
|
||||
transition-property: top, font-size, color;
|
||||
transition-timing-function: var(--animation-curve-default);
|
||||
|
||||
&.fixed ~ .hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: var(--input-text-label-color);
|
||||
font-size: var(--input-field-font-size);
|
||||
left: 0;
|
||||
line-height: var(--input-field-font-size);
|
||||
opacity: var(--input-hint-opacity);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: calc(var(--input-padding) + 1.5 * var(--input-field-padding));
|
||||
transition-duration: var(--animation-duration);
|
||||
transition-property: opacity;
|
||||
transition-timing-function: var(--animation-curve-default);
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: var(--input-text-highlight-color);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: width, background-color;
|
||||
transition-timing-function: var(--animation-curve-default);
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.error,
|
||||
.counter {
|
||||
color: var(--input-text-error-color);
|
||||
font-size: var(--input-label-font-size);
|
||||
line-height: var(--input-underline-height);
|
||||
margin-bottom: calc(-1 * var(--input-underline-height));
|
||||
}
|
||||
|
||||
.counter {
|
||||
color: var(--input-text-label-color);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.disabled > .inputElement {
|
||||
border-bottom-style: dotted;
|
||||
color: var(--input-text-disabled-text-color);
|
||||
}
|
||||
|
||||
.errored {
|
||||
padding-bottom: 0;
|
||||
|
||||
& > .inputElement {
|
||||
border-bottom-color: var(--input-text-error-color);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
& > .counter,
|
||||
& > .label {
|
||||
color: var(--input-text-error-color);
|
||||
}
|
||||
|
||||
& > .label > .required {
|
||||
color: var(--input-text-required-color);
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
|
||||
.input {
|
||||
position: relative;
|
||||
padding: $input-padding 0;
|
||||
&.withIcon {
|
||||
margin-left: $input-icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: $input-icon-offset;
|
||||
left: -$input-icon-size;
|
||||
display: block;
|
||||
width: $input-icon-size;
|
||||
height: $input-icon-size;
|
||||
font-size: $input-icon-font-size !important;
|
||||
line-height: $input-icon-size !important;
|
||||
color: $input-text-label-color;
|
||||
text-align: center;
|
||||
transition: color $animation-duration $animation-curve-default;
|
||||
}
|
||||
|
||||
.inputElement {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $input-field-padding 0;
|
||||
font-size: $input-field-font-size;
|
||||
color: $color-text;
|
||||
background-color: $input-text-background-color;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $input-text-bottom-border-color;
|
||||
outline: none;
|
||||
&:focus:not([disabled]):not([readonly]) {
|
||||
~ .bar:before, ~ .bar:after {
|
||||
width: 50%;
|
||||
}
|
||||
~ .label:not(.fixed) {
|
||||
color: $input-text-highlight-color;
|
||||
}
|
||||
~ .label > .required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
~ .hint {
|
||||
display: block;
|
||||
opacity: $input-hint-opacity;
|
||||
}
|
||||
~ .icon {
|
||||
color: $input-text-highlight-color;
|
||||
}
|
||||
}
|
||||
&:focus:not([disabled]):not([readonly]), &.filled, &[type="date"], &[type="time"] {
|
||||
~ .label:not(.fixed) {
|
||||
top: $input-focus-label-top;
|
||||
font-size: $input-label-font-size;
|
||||
}
|
||||
&.filled ~ .hint {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.filled ~ .label.fixed, &.filled ~ .hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: $input-padding + (1.5 * $input-field-padding);
|
||||
left: 0;
|
||||
font-size: $input-field-font-size;
|
||||
line-height: $input-field-font-size;
|
||||
color: $input-text-label-color;
|
||||
pointer-events: none;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: top, font-size, color;
|
||||
&.fixed ~ .hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
position: absolute;
|
||||
top: $input-padding + (1.5 * $input-field-padding);
|
||||
left: 0;
|
||||
font-size: $input-field-font-size;
|
||||
line-height: $input-field-font-size;
|
||||
color: $input-text-label-color;
|
||||
pointer-events: none;
|
||||
opacity: $input-hint-opacity;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
&:before, &:after {
|
||||
@include material-animation-default();
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
content: "";
|
||||
background-color: $input-text-highlight-color;
|
||||
transition-property: width, background-color;
|
||||
}
|
||||
&:before {
|
||||
left: 50%;
|
||||
}
|
||||
&:after {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.error, .counter {
|
||||
margin-bottom: - $input-underline-height;
|
||||
font-size: $input-label-font-size;
|
||||
line-height: $input-underline-height;
|
||||
color: $input-text-error-color;
|
||||
}
|
||||
|
||||
.counter {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: $input-text-label-color;
|
||||
}
|
||||
|
||||
.disabled > .inputElement {
|
||||
color: $input-text-disabled-text-color;
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
|
||||
.errored {
|
||||
padding-bottom: 0;
|
||||
> .inputElement {
|
||||
margin-top: 1px;
|
||||
border-bottom-color: $input-text-error-color;
|
||||
}
|
||||
> .counter, > .label {
|
||||
color: $input-text-error-color;
|
||||
}
|
||||
> .label > .required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,28 +1,113 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import { themr } from 'react-css-themr';
|
||||
import React, { cloneElement, Component, PropTypes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { LAYOUT } from '../identifiers.js';
|
||||
import { themr } from 'react-css-themr';
|
||||
import { getViewport } from '../utils/utils';
|
||||
import filterReactChildren from '../utils/filter-react-children.js';
|
||||
import isComponentOfType from '../utils/is-component-of-type.js';
|
||||
import InjectAppBar from '../app_bar/AppBar';
|
||||
import InjectNavDrawer from './NavDrawer';
|
||||
import InjectSidebar from './Sidebar';
|
||||
import isBrowser from '../utils/is-browser';
|
||||
import breakpoints from '../utils/breakpoints';
|
||||
import { LAYOUT } from '../identifiers';
|
||||
|
||||
const Layout = ({ className, children, theme }) => (
|
||||
<div data-react-toolbox='layout' className={classnames(theme.layout, className)}>
|
||||
{React.Children.map(children, (child) => React.cloneElement(child, { theme }))}
|
||||
</div>
|
||||
);
|
||||
const factory = (AppBar, NavDrawer, Sidebar) => {
|
||||
const isNavDrawer = child => isComponentOfType(NavDrawer, child);
|
||||
const isSidebar = child => isComponentOfType(Sidebar, child);
|
||||
const isAppBar = child => isComponentOfType(AppBar, child);
|
||||
const isUnknown = child => !isNavDrawer(child) && !isSidebar(child) && !isAppBar(child);
|
||||
|
||||
Layout.propTypes = {
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.arrayOf(PropTypes.element),
|
||||
PropTypes.element
|
||||
]),
|
||||
className: PropTypes.string,
|
||||
theme: PropTypes.shape({
|
||||
layout: PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
Layout.defaultProps = {
|
||||
className: ''
|
||||
class Layout extends Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
theme: PropTypes.object
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
className: ''
|
||||
};
|
||||
|
||||
state = {
|
||||
width: isBrowser() && getViewport().width
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
if (!this.state.width) this.handleResize();
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
}
|
||||
|
||||
handleResize = () => {
|
||||
this.setState({ width: getViewport().width });
|
||||
}
|
||||
|
||||
isPinned = sideNav => {
|
||||
if (sideNav) {
|
||||
const { permanentAt, pinned } = sideNav.props;
|
||||
const { width } = this.state;
|
||||
return width > breakpoints[permanentAt] || pinned;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children, className, theme, ...rest } = this.props;
|
||||
const appBar = filterReactChildren(children, isAppBar)[0];
|
||||
const navDrawer = filterReactChildren(children, isNavDrawer)[0];
|
||||
const sidebar = filterReactChildren(children, isSidebar)[0];
|
||||
const unknown = filterReactChildren(children, isUnknown);
|
||||
const appBarFixed = appBar && appBar.props.fixed;
|
||||
const navDrawerPinned = this.isPinned(navDrawer);
|
||||
const navDrawerClipped = navDrawer && navDrawer.props.clipped;
|
||||
const sidebarWidth = sidebar && sidebar.props.width;
|
||||
const sidebarPinned = this.isPinned(sidebar);
|
||||
const sidebarClipped = sidebar && sidebar.props.clipped;
|
||||
|
||||
const clonedAppBar = appBar && cloneElement(appBar, {
|
||||
theme,
|
||||
themeNamespace: 'appbar'
|
||||
});
|
||||
|
||||
const clonedLeftSideNav = navDrawer && cloneElement(navDrawer, {
|
||||
clipped: navDrawerClipped,
|
||||
pinned: navDrawerPinned
|
||||
});
|
||||
|
||||
const clonedRightSideNav = sidebar && cloneElement(sidebar, {
|
||||
clipped: sidebarClipped,
|
||||
pinned: sidebarPinned
|
||||
});
|
||||
|
||||
const _className = classnames(theme.layout,
|
||||
theme[`sidebarWidth${sidebarWidth}`], {
|
||||
[theme.navDrawerPinned]: navDrawerPinned,
|
||||
[theme.navDrawerClipped]: navDrawerClipped,
|
||||
[theme.sidebarPinned]: sidebarPinned,
|
||||
[theme.sidebarClipped]: sidebarClipped,
|
||||
[theme.appbarFixed]: appBarFixed
|
||||
}, className);
|
||||
|
||||
return (
|
||||
<div {...rest} className={_className}>
|
||||
{clonedLeftSideNav}
|
||||
{clonedAppBar}
|
||||
<div className={theme.layoutInner}>
|
||||
{unknown}
|
||||
</div>
|
||||
{clonedRightSideNav}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return Layout;
|
||||
};
|
||||
|
||||
const Layout = factory(InjectAppBar, InjectNavDrawer, InjectSidebar);
|
||||
export default themr(LAYOUT)(Layout);
|
||||
export { factory as layoutFactory };
|
||||
export { Layout };
|
||||
|
|
|
|||
|
|
@ -1,64 +1,57 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { themr } from 'react-css-themr';
|
||||
import { LAYOUT } from '../identifiers.js';
|
||||
import InjectDrawer from '../drawer/Drawer';
|
||||
import { LAYOUT } from '../identifiers';
|
||||
|
||||
const NavDrawer = ({ active, children, className, onOverlayClick, permanentAt, pinned, scrollY, theme, width }) => {
|
||||
const rootClasses = classnames([theme.navDrawer], {
|
||||
[theme[permanentAt + 'Permanent']]: permanentAt,
|
||||
[theme.wide]: (width === 'wide'),
|
||||
[theme.active]: active,
|
||||
[theme.pinned]: pinned
|
||||
}, className);
|
||||
const factory = Drawer => {
|
||||
const NavDrawer = ({
|
||||
active,
|
||||
className,
|
||||
clipped,
|
||||
permanentAt, // eslint-disable-line
|
||||
pinned,
|
||||
theme,
|
||||
...rest
|
||||
}) => {
|
||||
const _className = classnames({
|
||||
[theme.pinned]: pinned,
|
||||
[theme.clipped]: clipped
|
||||
}, className);
|
||||
|
||||
const drawerClasses = classnames(theme.drawerContent, {
|
||||
[theme.scrollY]: scrollY
|
||||
});
|
||||
return (
|
||||
<Drawer
|
||||
{...rest}
|
||||
active={active || pinned}
|
||||
className={_className}
|
||||
insideTree
|
||||
theme={theme}
|
||||
themeNamespace="navDrawer"
|
||||
withOverlay={!pinned}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='nav-drawer' className={rootClasses}>
|
||||
<div data-react-toolbox='nav-drawer-scrim' className={theme.scrim} onClick={onOverlayClick} />
|
||||
<aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
|
||||
{children}
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
NavDrawer.propTypes = {
|
||||
active: PropTypes.bool,
|
||||
children: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
onOverlayClick: PropTypes.func,
|
||||
permanentAt: PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
|
||||
pinned: PropTypes.bool,
|
||||
scrollY: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
active: PropTypes.string,
|
||||
drawerContent: PropTypes.string,
|
||||
lgPermanent: PropTypes.string,
|
||||
lgTabletPermanent: PropTypes.string,
|
||||
mdPermanent: PropTypes.string,
|
||||
navDrawer: PropTypes.string,
|
||||
pinned: PropTypes.string,
|
||||
scrim: PropTypes.string,
|
||||
scrollY: PropTypes.string,
|
||||
smPermanent: PropTypes.string,
|
||||
smTabletPermanent: PropTypes.string,
|
||||
wide: PropTypes.string,
|
||||
xlPermanent: PropTypes.string,
|
||||
xxlPermanent: PropTypes.string,
|
||||
xxxlPermanent: PropTypes.string
|
||||
}),
|
||||
width: PropTypes.oneOf(['normal', 'wide'])
|
||||
};
|
||||
|
||||
NavDrawer.defaultProps = {
|
||||
active: false,
|
||||
className: '',
|
||||
scrollY: false,
|
||||
width: 'normal'
|
||||
NavDrawer.propTypes = {
|
||||
active: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
clipped: PropTypes.bool,
|
||||
permanentAt: PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
|
||||
pinned: PropTypes.bool,
|
||||
right: PropTypes.bool,
|
||||
theme: PropTypes.object
|
||||
};
|
||||
|
||||
NavDrawer.defaultProps = {
|
||||
className: '',
|
||||
pinned: false
|
||||
};
|
||||
|
||||
return NavDrawer;
|
||||
};
|
||||
|
||||
const NavDrawer = factory(InjectDrawer);
|
||||
export default themr(LAYOUT)(NavDrawer);
|
||||
export { factory as navDrawerFactory };
|
||||
export { NavDrawer };
|
||||
|
|
|
|||
|
|
@ -3,32 +3,29 @@ import classnames from 'classnames';
|
|||
import { themr } from 'react-css-themr';
|
||||
import { LAYOUT } from '../identifiers.js';
|
||||
|
||||
const Panel = ({ children, className, onScroll, scrollY, theme }) => {
|
||||
const _className = classnames(theme.panel, {
|
||||
[theme.scrollY]: scrollY
|
||||
}, className);
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='panel' onScroll={onScroll} className={_className}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const Panel = ({ bodyScroll, children, className, theme, ...other }) => (
|
||||
<div
|
||||
{...other}
|
||||
data-react-toolbox='panel'
|
||||
className={classnames(theme.panel, {
|
||||
[theme.bodyScroll]: bodyScroll
|
||||
}, className)}
|
||||
children={children}
|
||||
/>
|
||||
);
|
||||
|
||||
Panel.propTypes = {
|
||||
bodyScroll: PropTypes.bool,
|
||||
children: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
onScroll: PropTypes.func,
|
||||
scrollY: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
panel: PropTypes.string,
|
||||
scrollY: PropTypes.string
|
||||
panel: PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
Panel.defaultProps = {
|
||||
className: '',
|
||||
scrollY: false
|
||||
bodyScroll: true,
|
||||
className: ''
|
||||
};
|
||||
|
||||
export default themr(LAYOUT)(Panel);
|
||||
|
|
|
|||
|
|
@ -1,46 +1,59 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { themr } from 'react-css-themr';
|
||||
import { LAYOUT } from '../identifiers.js';
|
||||
import InjectDrawer from '../drawer/Drawer';
|
||||
import { LAYOUT } from '../identifiers';
|
||||
|
||||
const Sidebar = ({ children, className, pinned, scrollY, theme, width }) => {
|
||||
const wrapperClasses = classnames(theme.sidebar, theme[`width-${width}`], {
|
||||
[theme.pinned]: pinned
|
||||
}, className);
|
||||
const factory = Drawer => {
|
||||
const Sidebar = ({
|
||||
active,
|
||||
className,
|
||||
clipped,
|
||||
permanentAt, // eslint-disable-line
|
||||
pinned,
|
||||
theme,
|
||||
...rest
|
||||
}) => {
|
||||
const _className = classnames({
|
||||
[theme.pinned]: pinned,
|
||||
[theme.clipped]: clipped
|
||||
}, className);
|
||||
|
||||
const innerClasses = classnames(theme.sidebarContent, {
|
||||
[theme.scrollY]: scrollY
|
||||
});
|
||||
return (
|
||||
<Drawer
|
||||
{...rest}
|
||||
active={active || pinned}
|
||||
className={_className}
|
||||
insideTree
|
||||
theme={theme}
|
||||
themeNamespace="sidebar"
|
||||
type="right"
|
||||
withOverlay={!pinned}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='sidebar' className={wrapperClasses}>
|
||||
<aside data-react-toolbox='sidebar-content' className={innerClasses}>
|
||||
{children}
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Sidebar.propTypes = {
|
||||
children: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
pinned: PropTypes.bool,
|
||||
scrollY: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
pinned: PropTypes.string,
|
||||
scrollY: PropTypes.string,
|
||||
sidebar: PropTypes.string,
|
||||
sidebarContent: PropTypes.string
|
||||
}),
|
||||
width: 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
|
||||
Sidebar.propTypes = {
|
||||
active: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
clipped: PropTypes.bool,
|
||||
permanentAt: PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
|
||||
pinned: PropTypes.bool,
|
||||
theme: PropTypes.object,
|
||||
width: 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,
|
||||
right: false
|
||||
};
|
||||
|
||||
return Sidebar;
|
||||
};
|
||||
|
||||
const Sidebar = factory(InjectDrawer);
|
||||
export default themr(LAYOUT)(Sidebar);
|
||||
export { factory as sidebarFactory };
|
||||
export { Sidebar };
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
$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://material.google.com/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;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
@mixin open() {
|
||||
transition-delay: $animation-delay;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,21 @@
|
|||
import { themr } from 'react-css-themr';
|
||||
import { LAYOUT } from '../identifiers.js';
|
||||
import { Layout } from './Layout.js';
|
||||
import { Panel } from './Panel.js';
|
||||
import { NavDrawer } from './NavDrawer.js';
|
||||
import { Sidebar } from './Sidebar.js';
|
||||
import theme from './theme.scss';
|
||||
import { LAYOUT } from '../identifiers';
|
||||
import { layoutFactory } from './Layout';
|
||||
import { sidebarFactory } from './Sidebar';
|
||||
import { navDrawerFactory } from './NavDrawer';
|
||||
import Panel from './Panel';
|
||||
import AppBar from '../app_bar';
|
||||
import Drawer from '../drawer';
|
||||
import theme from './theme.css';
|
||||
|
||||
const ThemedLayout = themr(LAYOUT, theme)(Layout);
|
||||
const ThemedPanel = themr(LAYOUT, theme)(Panel);
|
||||
const ThemedNavDrawer = themr(LAYOUT, theme)(NavDrawer);
|
||||
const ThemedSidebar = themr(LAYOUT, theme)(Sidebar);
|
||||
const injectTheme = component => themr(LAYOUT, theme)(component);
|
||||
const ThemedNavDrawer = injectTheme(navDrawerFactory(Drawer));
|
||||
const ThemedSidebar = injectTheme(sidebarFactory(Drawer));
|
||||
const ThemedPanel = injectTheme(Panel);
|
||||
const ThemedLayout = injectTheme(layoutFactory(AppBar, ThemedNavDrawer, ThemedSidebar));
|
||||
|
||||
export default ThemedLayout;
|
||||
export { ThemedLayout as Layout };
|
||||
export { ThemedPanel as Panel };
|
||||
export { ThemedNavDrawer as NavDrawer };
|
||||
export { ThemedSidebar as Sidebar };
|
||||
export { ThemedNavDrawer as NavDrawer };
|
||||
export { ThemedPanel as Panel };
|
||||
|
|
|
|||
|
|
@ -4,56 +4,102 @@ A Layout is a container that can hold a main content area with an optional navig
|
|||
|
||||
<!-- example -->
|
||||
```jsx
|
||||
import { AppBar, Checkbox, IconButton } from 'react-toolbox';
|
||||
import { Layout, NavDrawer, Panel, Sidebar } from 'react-toolbox';
|
||||
import React, { Component } from 'react';
|
||||
import { Layout, NavDrawer, Sidebar, Panel } from '../../components/layout';
|
||||
import { AppBar } from '../../components/app_bar';
|
||||
import Checkbox from '../../components/checkbox';
|
||||
|
||||
class LayoutTest extends React.Component {
|
||||
state = {
|
||||
drawerActive: false,
|
||||
drawerPinned: false,
|
||||
sidebarPinned: false
|
||||
};
|
||||
class LayoutExample extends Component {
|
||||
state = {
|
||||
bodyScrolled: true,
|
||||
sideNavActive: false,
|
||||
sideNavPinned: false,
|
||||
sideNavClipped: false,
|
||||
rightSideNavActive: false,
|
||||
rightSideNavPinned: false,
|
||||
rightSideNavClipped: false
|
||||
};
|
||||
|
||||
toggleDrawerActive = () => {
|
||||
this.setState({ drawerActive: !this.state.drawerActive });
|
||||
};
|
||||
handleToggle = param => {
|
||||
this.setState({ [param]: !this.state[param] });
|
||||
}
|
||||
|
||||
toggleDrawerPinned = () => {
|
||||
this.setState({ drawerPinned: !this.state.drawerPinned });
|
||||
}
|
||||
render () {
|
||||
const { sideNavActive, rightSideNavActive } = this.state;
|
||||
return (
|
||||
<Layout>
|
||||
<NavDrawer
|
||||
active={sideNavActive}
|
||||
clipped={this.state.sideNavClipped}
|
||||
onOverlayClick={this.handleToggle.bind(this, 'sideNavActive')}
|
||||
permanentAt="md"
|
||||
pinned={this.state.sideNavPinned}
|
||||
>
|
||||
<p>I'm a NavDrawer content.</p>
|
||||
</NavDrawer>
|
||||
|
||||
toggleSidebar = () => {
|
||||
this.setState({ sidebarPinned: !this.state.sidebarPinned });
|
||||
};
|
||||
<AppBar
|
||||
fixed
|
||||
rightIcon='more'
|
||||
leftIcon='menu'
|
||||
onLeftIconClick={this.handleToggle.bind(this, 'sideNavActive')}
|
||||
title="Super Layout with a large text to be covered!"
|
||||
/>
|
||||
|
||||
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 leftIcon='menu' onLeftIconClick={ this.toggleDrawerActive } />
|
||||
<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>
|
||||
);
|
||||
}
|
||||
<Panel bodyScroll={this.state.bodyScrolled}>
|
||||
<section style={{ margin: '1.8rem'}}>
|
||||
<h5 style={{ marginBottom: 20 }}>SideNav State</h5>
|
||||
<Checkbox
|
||||
label='Pinned'
|
||||
checked={this.state.sideNavPinned}
|
||||
onChange={this.handleToggle.bind(this, 'sideNavPinned')}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
label='Clipped'
|
||||
checked={this.state.sideNavClipped}
|
||||
onChange={this.handleToggle.bind(this, 'sideNavClipped')}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
label="Right SideNav Active"
|
||||
checked={this.state.rightSideNavActive}
|
||||
onChange={this.handleToggle.bind(this, 'rightSideNavActive')}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
label="Right SideNav Pinned"
|
||||
checked={this.state.rightSideNavPinned}
|
||||
onChange={this.handleToggle.bind(this, 'rightSideNavPinned')}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
label="Right SideNav Clipped"
|
||||
checked={this.state.rightSideNavClipped}
|
||||
onChange={this.handleToggle.bind(this, 'rightSideNavClipped')}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
label="Body scrolled"
|
||||
checked={this.state.bodyScrolled}
|
||||
onChange={this.handleToggle.bind(this, 'bodyScrolled')}
|
||||
/>
|
||||
</section>
|
||||
</Panel>
|
||||
|
||||
<Sidebar
|
||||
active={rightSideNavActive}
|
||||
onOverlayClick={this.handleToggle.bind(this, 'rightSideNavActive')}
|
||||
clipped={this.state.rightSideNavClipped}
|
||||
pinned={this.state.rightSideNavPinned}
|
||||
width={11}
|
||||
right
|
||||
>
|
||||
<p>I'm a Sidebar content.</p>
|
||||
</Sidebar>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -91,15 +137,23 @@ If the column layout does not suit your needs, simply fill the content area with
|
|||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `children` | `Nodes` | | A `Panel`, optionally preceded by a `NavDrawer` and/or followed by a `Sidebar` |
|
||||
| `children` | `Nodes` | | Can hold a `Panel`, along with a `NavDrawer`, a `Sidebar` and an `AppBar` |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
### Theme
|
||||
The themed key the `Layout` in general is `ToolboxLayout`. For the `Layout` wrapper it should only provide one class interface:
|
||||
The themed key the `Layout` in general is `ToolboxLayout`. We add classes to the root element depending on the parsed children:
|
||||
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
| `layout` | Class used in the container to position and align inner items.|
|
||||
| `appbarFixed` | Added to the root class if there is a fixed `AppBar` present.|
|
||||
| `layout` | The root class that wraps the whole layout.|
|
||||
| `navDrawerPinned` | Added to the root if there is a pinned `NavDrawer`.|
|
||||
| `navDrawerClipped` | Added to the root if there is a clipped NavDrawer.|
|
||||
| `sidebarPinned` | Added to the root if there is a pinned sidebar.|
|
||||
| `sidebarClipped` | Added to the root if there is a clipped sidebar.|
|
||||
| `sidebarWidth${width}` | Added to the root element in case there is a sidebar present. width correspond to the value passed to the `Sidebar`.|
|
||||
|
||||
Note that you can also pass namespaced properties under `appbar` to override styles of a nested `AppBar` inside the layout.
|
||||
|
||||
## NavDrawer
|
||||
|
||||
|
|
@ -111,52 +165,42 @@ The [navigation drawer](https://material.google.com/patterns/navigation-drawer.h
|
|||
| > `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.
|
||||
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. You can also use a `clipped` property when it's pinned so the `AppBar` would stick over the Drawer.
|
||||
|
||||
### 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. |
|
||||
| `clipped` | `bool` | `false` | If true, when the `AppBar` gets pinned, it will stand over the `Drawer`. |
|
||||
| `permanentAt` | `enum`(`'sm'`,`'smTablet'`,`'md'`,`'lg'`,`'lgTablet'`,`'xl'`,`'xxl'`,`'xxxl'`) | | The breakpoint at which the drawer is automatically pinned. |
|
||||
| `pinned` | `bool` | `false` | If true, the drawer will be pinned open. `pinned` takes precedence over `active`. |
|
||||
| `onOverlayClick` | `Function` | | Callback function to be invoked when the overlay is clicked. It only works if the `Drawer` is actually displaying and Overlay|
|
||||
|
||||
### Theme
|
||||
|
||||
The `navDrawer` uses a `Drawer` component under the covers the theme is the same as for it but namespaced under `navDrawer`. It takes the following extra properties:
|
||||
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
| `active` | Used when the drawer is active.|
|
||||
| `drawerContent` | Used for the content of the drawer.|
|
||||
| `lgPermanent` | Added to the root class for large drawer.|
|
||||
| `mdPermanent` | Added to the root class for medium drawer.|
|
||||
| `navDrawer` | Root class for the drawer.|
|
||||
| `pinned` | Added to the root class if positioning is pinned.|
|
||||
| `scrim` | Used as a wrapper for the drawer content.|
|
||||
| `scrollY` | Added to the drawer content if its scrollable.|
|
||||
| `smPermanent` | Added to the root class for small drawer.|
|
||||
| `wide` | Added to the root class if width is wide.|
|
||||
| `xlPermanent` | Added to the root class for extra big drawer.|
|
||||
| `xxlPermanent` | Added to the root class for super big drawer.|
|
||||
| `xxxlPermanent` | Added to the root class for largest possible drawer.|
|
||||
| `pinned` | Added to the root class when it is pinned.|
|
||||
| `clipped` | Added to the root class when it is clipped.|
|
||||
|
||||
## 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.
|
||||
The `Panel` is the main content area within a `Layout`. By default we assume it is rendered in the body using the `document` scroll but you can use a `bodyScroll` to `false` property to make it look like a scrolled `div`.
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `onScroll` | `Function` | | Callback function to be invoked when the component scrolls. |
|
||||
| `scrollY` | `bool` | `false` | If true, the panel will vertically scroll all content. |
|
||||
| `bodyScroll` | `Boolean` | | You can set it to true in case you are using a pinned Sidebar so it takes an scrolled `div` instead of using the document scroll. |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
### Theme
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
| `bodyScroll` | Used in the root class in case the panel has bodyScroll.|
|
||||
| `panel` | Used as the root class of the panel component.|
|
||||
| `scrollY` | Used in case the panel is scrollable.|
|
||||
|
||||
## Sidebar
|
||||
|
||||
|
|
@ -171,31 +215,10 @@ The `Sidebar` is an extra drawer that docks to the right side of the `Layout`. T
|
|||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
### Theme
|
||||
|
||||
The `Sidebar` uses a `Drawer` component under the covers the theme is the same as for it but namespaced under `sidebar`. It takes the following extra properties:
|
||||
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
| `pinned` | Added to the root class if sidebar is pinned.|
|
||||
| `scrollY` | Add to the content of sidebar if its scrollable.|
|
||||
| `sidebar` | Root class of the sidebar.|
|
||||
| `sidebarContent` | Used in for the content element of the sidebar.|
|
||||
|
||||
## 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.
|
||||
| `clipped` | Added to the root class when it is clipped.|
|
||||
| `pinned` | Added to the root class when it is pinned.|
|
||||
|
|
|
|||
|
|
@ -0,0 +1,236 @@
|
|||
@import '../colors.css';
|
||||
@import '../media.css';
|
||||
@import '../variables.css';
|
||||
@import '../app_bar/config.css';
|
||||
@import '../drawer/config.css';
|
||||
|
||||
:root {
|
||||
--layout-side-transition: all var(--animation-duration) var(--animation-curve-default);
|
||||
}
|
||||
|
||||
.layout {
|
||||
align-items: stretch;
|
||||
composes: reset from '../helpers.css';
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100vh;
|
||||
min-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
&:not(.bodyScroll) {
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarDrawer,
|
||||
.navDrawerDrawer {
|
||||
z-index: var(--z-index-high);
|
||||
|
||||
&.pinned {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.clipped {
|
||||
height: calc(100vh - var(--appbar-height));
|
||||
padding-top: calc(0.5 * var(--unit));
|
||||
top: var(--appbar-height);
|
||||
|
||||
@media screen and (--xxs-viewport) and (--portrait) {
|
||||
height: calc(100vh - var(--appbar-height-m-portrait));
|
||||
top: var(--appbar-height-m-portrait);
|
||||
}
|
||||
|
||||
@media screen and (--xs-viewport) and (--landscape) {
|
||||
height: calc(100vh - var(--appbar-height-m-landscape));
|
||||
top: var(--appbar-height-m-landscape);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.appbarInner,
|
||||
.panel {
|
||||
transition: var(--layout-side-transition);
|
||||
}
|
||||
|
||||
.appbarFixed {
|
||||
&.appbarAppBar {
|
||||
z-index: var(--z-index-high);
|
||||
}
|
||||
|
||||
& .panel {
|
||||
top: var(--appbar-height);
|
||||
|
||||
&:not(.bodyScroll) {
|
||||
height: calc(100vh - var(--appbar-height));
|
||||
max-height: calc(100vh - var(--appbar-height));
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@media screen and (--xxs-viewport) and (--portrait) {
|
||||
top: var(--appbar-height-m-portrait);
|
||||
}
|
||||
|
||||
@media screen and (--xs-viewport) and (--landscape) {
|
||||
top: var(--appbar-height-m-landscape);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navDrawerPinned {
|
||||
& .appbarLeftIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .panel {
|
||||
left: var(--drawer-mobile-width);
|
||||
}
|
||||
|
||||
&:not(.navDrawerClipped) {
|
||||
& .appbarAppBar {
|
||||
padding-left: calc(var(--drawer-mobile-width) + var(--appbar-h-padding));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (--larger-than-xs-viewport) {
|
||||
& .panel {
|
||||
left: var(--drawer-desktop-width);
|
||||
}
|
||||
|
||||
&:not(.navDrawerClipped) {
|
||||
& .appbarAppBar {
|
||||
padding-left: calc(var(--drawer-desktop-width) + var(--appbar-h-padding));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navDrawerClipped {
|
||||
& .navDrawerWrapper {
|
||||
position: relative;
|
||||
z-index: var(--z-index-normal);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarPinned {
|
||||
& .appbarLeftIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .panel {
|
||||
right: var(--drawer-mobile-width);
|
||||
}
|
||||
|
||||
&:not(.sidebarClipped) {
|
||||
& .appbarAppBar {
|
||||
padding-right: calc(var(--drawer-mobile-width) + var(--appbar-h-padding));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (--larger-than-xs-viewport) {
|
||||
& .panel {
|
||||
right: var(--drawer-desktop-width);
|
||||
}
|
||||
|
||||
&:not(.sidebarClipped) {
|
||||
& .appbarAppBar {
|
||||
padding-right: calc(var(--drawer-desktop-width) + var(--appbar-h-padding));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarClipped {
|
||||
& .sidebarWrapper {
|
||||
position: relative;
|
||||
z-index: var(--z-index-normal);
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin sidebarIncrements $platform {
|
||||
& .sidebarDrawer {
|
||||
width: calc(var(--standard-increment-$(platform)) * $(increment));
|
||||
}
|
||||
|
||||
&.sidebarPinned {
|
||||
& .panel {
|
||||
right: calc(var(--standard-increment-$(platform)) * $(increment));
|
||||
}
|
||||
|
||||
&:not(.sidebarClipped) {
|
||||
& .appbarAppBar {
|
||||
padding-right: calc(var(--standard-increment-$(platform)) * $(increment) + var(--appbar-h-padding));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $increment in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
|
||||
.sidebarWidth$(increment) {
|
||||
& .sidebarDrawer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (--larger-than-sm-viewport) {
|
||||
@mixin sidebarIncrements desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $increment in 1, 2, 3, 4, 5, 6, 7, 8, 9 {
|
||||
.sidebarWidth$(increment) {
|
||||
@media screen and (--larger-than-xs-viewport) and (--landscape) {
|
||||
@mixin sidebarIncrements mobile;
|
||||
}
|
||||
|
||||
@media screen and (--larger-than-xs-viewport) and (orientation: portrait) {
|
||||
@mixin sidebarIncrements desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $increment in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
|
||||
.sidebarWidth$(increment) {
|
||||
@media screen and (--larger-than-sm-tablet-viewport) {
|
||||
@mixin sidebarIncrements desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $pct in 25, 33, 50, 66, 75, 100 {
|
||||
.sidebarWidth$(pct) {
|
||||
& .sidebarDrawer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (--larger-than-sm-tablet-viewport) {
|
||||
@each $pct in 25, 33, 50, 66, 75, 100 {
|
||||
.sidebarWidth$(pct) {
|
||||
& .panel {
|
||||
right: calc($(pct) * 1%);
|
||||
}
|
||||
|
||||
& .sidebarDrawer {
|
||||
width: calc($(pct) * 1%);
|
||||
}
|
||||
|
||||
&:not(.sidebarClipped) {
|
||||
& .appbarAppBar {
|
||||
padding-right: calc(calc($(pct) * 1%) + var(--appbar-h-padding));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,325 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
@import "./mixins";
|
||||
|
||||
.layout {
|
||||
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-higher;
|
||||
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();
|
||||
position: absolute;
|
||||
z-index: $z-index-highest;
|
||||
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) {
|
||||
&.smPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-sm-tablet) {
|
||||
&.smTabletPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-md) {
|
||||
&.mdPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-lg) {
|
||||
&.lgPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-lg-tablet) {
|
||||
&.lgTabletPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xl) {
|
||||
&.xlPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xxl) {
|
||||
&.xxlPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xxxl) {
|
||||
&.xxxlPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .layout {
|
||||
.scrim {
|
||||
z-index: $z-index-highest - 1;
|
||||
}
|
||||
& .layout {
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue